-
Notifications
You must be signed in to change notification settings - Fork 10
/
subscriptions.js
85 lines (74 loc) · 3.3 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
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";
// 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: `9e37d7b0-3621-418f-a6b6-b82bdeaf051d`,
// 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([]);
// This function fetches a list of public plans.
async function fetchPlans() {
// 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);
}
// This function creates a redirect to the checkout page for a specific plan.
async function createRedirect(plan) {
// 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 },
});
// 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>
{/* We map over the plan list and create a section for each plan. */}
{planList.map((plan) => {
return (
<section
key={plan._id}
data-testid={testIds.SUBSCRIPTIONS_PAGE.PRICING_PLAN}
// When the section is clicked, we create a redirect to the checkout page for the plan.
onClick={() => createRedirect(plan)}
>
{/* We display the name of the plan. */}
{plan.name}
</section>
);
})}
</div>
</main>
);
}