Skip to content

Commit 79e3762

Browse files
prafull-opensignlabsprafull-opensignlabs
committed
feat: change subscription plans
1 parent aa04a95 commit 79e3762

File tree

3 files changed

+114
-52
lines changed

3 files changed

+114
-52
lines changed

‎apps/OpenSign/src/components/Header.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const Header = ({ showSidebar }) => {
1515
const image = localStorage.getItem("profileImg") || dp;
1616

1717
const [isOpen, setIsOpen] = useState(false);
18-
const [isSubscribe, setIsSubscribe] = useState(false);
18+
const [isSubscribe, setIsSubscribe] = useState(true);
1919

2020
const toggleDropdown = () => {
2121
setIsOpen(!isOpen);

‎apps/OpenSign/src/json/plansArr.json‎

Lines changed: 41 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,70 @@
11
[
22
{
3-
"planName": "Free Plan",
3+
"planName": "OPENSIGN™ FREE",
44
"currency": "",
5-
"price": "Free",
6-
"subtitle": "Free for life.",
5+
"monthlyPrice": "Free",
6+
"yearlyPrice": "Free",
7+
"subtitle": "Free Unlimited E-signatures, Forever.",
78
"btnText": "Subscribe",
89
"url": "",
910
"target": "_blank",
1011
"benefits": [
11-
"Sign Unlimited Documents",
12-
"S3 Doc Storage",
13-
"Unlimited Guest Signers",
14-
"Unlimited completion certificates",
15-
"Unique Code(OTP) verification for guest signers",
16-
"Expiring docs & reject signature support",
17-
"PDF Template Creation",
18-
"Audit Trails",
19-
"API support",
20-
"Free for lifetime",
21-
"Community support"
12+
"Unlimited envelopes",
13+
"Sign documents yourself",
14+
"Request signatures from others",
15+
"14 field types",
16+
"Automatic e-signatures",
17+
"Completion certificates",
18+
"Send in order",
19+
"Document templates",
20+
"Import from Dropbox",
21+
"Contact book",
22+
"Document expiry support",
23+
"Decline document support",
24+
"Email notifications",
25+
"Recipient authentication using OTP",
26+
"And much more"
2227
]
2328
},
2429
{
25-
"planName": "THANKS PLAN",
30+
"planName": "OPENSIGN™ PROFESSIONAL",
2631
"currency": "$",
27-
"price": "29.99",
28-
"subtitle": "Use code <span style='background-color: yellow;'>'FREEBETA'</span> to get this for free(First 1000 users)",
32+
"monthlyPrice": "29.99",
33+
"yearlyPrice": "329.99",
34+
"subtitle": "Exclusive Access to advanced features.",
2935
"btnText": "Subscribe",
30-
"url": "https://subscriptions.zoho.in/subscribe/ef798486e6a0a11ea65f2bae8f2af901dbadf3175d495584fd25b9af5d2f2b9e/thanks",
36+
"url": "https://billing.opensignlabs.com/subscribe/ef798486e6a0a11ea65f2bae8f2af901d1a09dfa8085585cdd4ec4d7f32137f3/professional-monthly",
37+
"yearlyUrl": "https://billing.opensignlabs.com/subscribe/ef798486e6a0a11ea65f2bae8f2af901d8ad1135190dff951330360e47585a71/professional-yearly",
3138
"target": "_self",
3239
"benefits": [
33-
"Sign Unlimited Documents",
34-
"Unlimited Secure Doc Storage with OpenSign™ Drive",
35-
"Unlimited Guest Signers",
36-
"Unlimited completion certificates",
37-
"Unique Code(OTP) verification for guest signers",
38-
"Expiring docs & reject signature support",
39-
"PDF Template Creation(coming soon)",
40-
"Audit Trails",
41-
"API support",
42-
"Add-ons support(coming soon)",
43-
"Self hosted cloud infrastructure"
40+
"Everything in OpenSign™ professional",
41+
"Field validations",
42+
"Regular expression validations",
43+
"Organize docs in OpenSign™ Drive",
44+
"Webhooks",
45+
"Zapier integration",
46+
"API Access",
47+
"100 API signatures included",
48+
"DocumentId removal from signed docs",
49+
"Custom email templates(coming soon)"
4450
]
4551
},
4652
{
47-
"planName": "ENTERPRISE",
53+
"planName": "OPENSIGN™ ENTERPRISE",
4854
"currency": "",
49-
"price": "Request Price",
50-
"subtitle": "Customization available Priority support.",
55+
"monthlyPrice": "Request Price",
56+
"yearlyPrice": "Request Price",
57+
"subtitle": "Scalable Features with priority support.",
5158
"btnText": "Contact us",
5259
"url": "https://www.opensignlabs.com/contact-us",
5360
"target": "_blank",
5461
"benefits": [
5562
"All features",
5663
"Custom domain",
57-
"Whitelabeling",
64+
"Custom branding",
5865
"Uptime SLA",
5966
"SSO support",
60-
"24/7 support"
67+
"Priority support"
6168
]
6269
}
6370
]

‎apps/OpenSign/src/pages/PlanSubscriptions.js‎

Lines changed: 72 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ const PlanSubscriptions = () => {
3737
useEffect(() => {
3838
// if (localStorage.getItem("accesstoken")) {
3939
setIsLoader(false);
40-
setYearlyVisible(false);
4140
// } else {
4241
// navigate("/", { replace: true });
4342
// }
@@ -90,20 +89,37 @@ const PlanSubscriptions = () => {
9089
style={{
9190
backgroundColor: "white",
9291
overflowY: "auto",
93-
maxHeight: "100%",
94-
"--theme-color": "#7952b3",
95-
"--plan-width": 30
92+
maxHeight: "100%"
9693
}}
9794
>
98-
<div
99-
id="monthlyPlans"
100-
className={`${yearlyVisible ? "none" : "block my-2"}`}
101-
>
102-
<div className="flex justify-center w-full my-2">
103-
<ul className=" flex flex-col md:flex-row h-full bg-white justify-center border-collapse border-[1px] border-gray-300">
95+
<div id="monthlyPlans" className="block my-2">
96+
<div className="flex flex-col justify-center items-center w-full">
97+
<div className="mb-6 mt-2 flex flex-row border-[1px] p-2 border-gray-300 rounded text-sm">
98+
<span
99+
onClick={() => setYearlyVisible(false)}
100+
className={`${
101+
!yearlyVisible
102+
? "bg-[#002862] text-white"
103+
: "bg-white text-black"
104+
} px-4 py-1 rounded cursor-pointer`}
105+
>
106+
Monthly
107+
</span>
108+
<span
109+
onClick={() => setYearlyVisible(true)}
110+
className={`${
111+
yearlyVisible
112+
? "bg-[#002862] text-white"
113+
: "bg-white text-black"
114+
} px-4 py-1 rounded cursor-pointer`}
115+
>
116+
Yearly (10% off)
117+
</span>
118+
</div>
119+
<ul className=" flex flex-col md:flex-row h-full bg-white justify-center">
104120
{plansArr.map((item) => (
105121
<li
106-
className="flex flex-col md:my-0 text-center border-[1px] border-gray-300 max-w-[260px]"
122+
className="flex flex-col md:my-0 text-center border-[1px] border-gray-300 w-[260px]"
107123
key={item.planName}
108124
>
109125
<div className="p-2 flex flex-col justify-center items-center min-h-[320px]">
@@ -120,17 +136,23 @@ const PlanSubscriptions = () => {
120136
<div className="">
121137
<span className="text-3xl">
122138
{item.currency && <small>{item.currency}</small>}
123-
{item.price}
139+
{yearlyVisible
140+
? item?.yearlyPrice
141+
: item.monthlyPrice}
124142
</span>
143+
<p className="font-semibold pt-2 text-sm">
144+
{yearlyVisible ? "Billed Yearly" : "Billed Monthly"}
145+
</p>
125146
<div
126147
className={`${
127148
item.subtitle.length <= 32
128-
? "w-[150px] text-center"
149+
? "w-[150px] h-[40px] text-center"
129150
: ""
130151
} text-sm text-center my-2`}
131152
>
132153
<div
133154
style={{
155+
textAlign: "center",
134156
backgroundColor: item.subtitlecolor
135157
? item.subtitlecolor
136158
: "white"
@@ -148,22 +170,23 @@ const PlanSubscriptions = () => {
148170
</div>
149171
</div>
150172
</div>
151-
152173
{item.url ? (
153174
<NavLink
154175
to={
155176
item.btnText === "Subscribe"
156-
? item.url + details
177+
? yearlyVisible
178+
? item.yearlyUrl + details
179+
: item.url + details
157180
: item.url
158181
}
159-
className="bg-[#002862] w-full text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
182+
className="bg-[#002862] w-full mt-1 text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
160183
target={item.target}
161184
>
162185
{item.btnText}
163186
</NavLink>
164187
) : (
165188
<button
166-
className="bg-[#002862] w-full text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
189+
className="bg-[#002862] w-full mt-1 text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
167190
onClick={() => handleFreePlan()}
168191
>
169192
{item.btnText}
@@ -184,6 +207,38 @@ const PlanSubscriptions = () => {
184207
))}
185208
</ul>
186209
</div>
210+
<div
211+
style={{
212+
display: "flex",
213+
alignItems: "center",
214+
justifyContent: "center"
215+
}}
216+
className="text-sm"
217+
>
218+
<hr
219+
className={"border-[1px] border-gray-300 w-[20%]"}
220+
style={{ color: "grey" }}
221+
/>
222+
<span style={{ color: "grey" }} className="px-2 ">
223+
or
224+
</span>
225+
<hr
226+
className={"border-[1px] border-gray-300 w-[20%]"}
227+
style={{ color: "grey" }}
228+
/>
229+
</div>
230+
<div className="flex flex-col justify-center w-full items-center">
231+
<h3 className="text-[#002862] mt-1 mb-2">
232+
Host it yourself for free
233+
</h3>
234+
<NavLink
235+
to={"https://github.com/OpenSignLabs/OpenSign"}
236+
className="bg-[#002862] w-[200px] text-center text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
237+
target={"_blank"}
238+
>
239+
Visit Github
240+
</NavLink>
241+
</div>
187242
</div>
188243
</div>
189244
)}

0 commit comments

Comments
 (0)