-
Notifications
You must be signed in to change notification settings - Fork 10
/
subscriptions.js
130 lines (119 loc) · 5.57 KB
/
subscriptions.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import Cookies from "js-cookie";
import {useEffect, useState} from "react";
import {createClient, OAuthStrategy} from "@wix/sdk";
import {plans} from "@wix/pricing-plans";
import {redirects} from "@wix/redirects";
import testIds from "@/src/utils/test-ids";
import {CLIENT_ID} from "@/constants/constants";
import Link from "next/link";
import styles from "@/styles/app.module.css";
import {useAsyncHandler} from "@/src/hooks/async-handler";
import {useClient} from "@/internal/providers/client-provider";
// We're creating a Wix client using the createClient function from the Wix SDK.
const myWixClient = createClient({
// We specify the modules we want to use with the client.
// In this case, we're using the plans and redirects modules.
modules: {plans, redirects},
// We're using the OAuthStrategy for authentication.
// This strategy requires a client ID and a set of tokens.
auth: OAuthStrategy({
// The client ID is a unique identifier for the application.
// It's used to authenticate the application with the Wix platform.
clientId: CLIENT_ID,
// The tokens are used to authenticate the user.
// In this case, we're getting the tokens from a cookie named "session".
// If the cookie doesn't exist, we default to null.
tokens: JSON.parse(Cookies.get("session") || null),
}),
});
export default function Subscriptions() {
// State variable to store the list of plans.
const [planList, setPlanList] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [chosenPlan, setChosenPlan] = useState(null);
const handleAsync = useAsyncHandler();
const {msid} = useClient();
// This function fetches a list of public plans.
async function fetchPlans() {
setIsLoading(true);
try {
await handleAsync(async () => {
// We call the queryPublicPlans method from the plans module of the Wix client.
// This method retrieves a list of public plans.
// Public plans are visible plans that site visitors can see on the site and purchase.
const planList = await myWixClient.plans.queryPublicPlans().find();
// Then, we update the state of the plan list in the React component.
setPlanList(planList.items);
});
} catch (error) {
console.error("Error fetching plans", error);
} finally {
setIsLoading(false);
}
}
// This function creates a redirect to the checkout page for a specific plan.
async function createRedirect(plan) {
await handleAsync(async () => {
// We call the createRedirectSession method from the redirects module of the Wix client.
// This method creates a redirect session to the checkout page.
// We pass an object that specifies the plan ID for the paidPlansCheckout.
// We also specify the postFlowUrl to be the current page URL. This is where the user will be redirected after the checkout flow.
const redirect = await myWixClient.redirects.createRedirectSession({
paidPlansCheckout: {planId: plan._id},
callbacks: {postFlowUrl: window.location.href},
});
// We set the chosen plan in the state variable.
setChosenPlan(plan._id);
// Finally, we redirect the user to the URL generated by the redirect session.
window.location = redirect.redirectSession.fullUrl;
});
}
// Fetch the list of plans when the component mounts.
useEffect(() => {
fetchPlans();
}, []);
return (
<main data-testid={testIds.SUBSCRIPTIONS_PAGE.CONTAINER}>
<div>
<h2>Choose a Plan:</h2>
{isLoading ? (
<p>Loading plans...</p>
) : planList.length > 0 ? (
planList.map((plan) => {
return (
<section
key={plan._id}
data-testid={testIds.SUBSCRIPTIONS_PAGE.PRICING_PLAN}
className={styles.selectable}
// When the section is clicked, we create a redirect to the checkout page for the plan.
onClick={() => createRedirect(plan)}
style={{
background:
plan._id === chosenPlan && "rgba(var(--card-rgb), 0.1)",
border:
plan._id === chosenPlan &&
"1px solid rgba(var(--card-border-rgb), 0.15)",
}}
>
{/* We display the name of the plan. */}
{plan.name}
</section>
);
})
) : (
<div>
<p>No plans available.</p>
<Link
href={`https://manage.wix.com/dashboard/${msid}/pricing-plans`}
rel="noopener noreferrer"
target="_blank"
style={{textDecoration: "underline", color: "#0070f3"}}
>
Create a plan
</Link>
</div>
)}
</div>
</main>
);
}