@edx/frontend-app-subscription-manage 1.1.0 → 1.2.0

package/dist/data/hooks/useCheckoutMutations.js

@@ -0,0 +1,131 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * query/useCheckoutMutations.ts — write-side TanStack mutations.
+ *
+ * The placeOrder mutation drives the checkout sequence on button click.
+ * The viax token and customerUid are established on page load via
+ * GET /edx-session and passed in through sessionRef.
+ *
+ *   1. getSalableUid + getBillingPlans (parallel)
+ *   2. createTwouCart
+ *   3. stripe.createPaymentMethod   → pm_xxx
+ *   4. updateTwouCartItem           → billing address + pm_xxx
+ *   5. updateTwouCart               → consent fields (SUBS-228)
+ *   6. startBusinessProcessableTransition('Sanction_Check')
+ */
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { STATUS } from '../../constants';
+import { checkoutKeys } from './keys';
+class CardValidationError extends Error {
+}
+function toCartAddress(b) {
+    return {
+        tFirstName: b.firstName,
+        tLastName: b.lastName,
+        upaLine1: b.line1,
+        upaCity: b.city,
+        upaPostcode: b.zip,
+        gadStateOrProvince: b.state,
+        gadCountry: { iso2Code: b.country },
+    };
+}
+function toStripeAddress(b) {
+    return {
+        line1: b.line1 || undefined,
+        city: b.city || undefined,
+        state: b.state || undefined,
+        postal_code: b.zip || undefined,
+        country: b.country || undefined,
+    };
+}
+export function useCheckoutMutations(ctx) {
+    const queryClient = useQueryClient();
+    const optimisticConfirm = (cartBiId) => {
+        queryClient.setQueryData(checkoutKeys.status(cartBiId), (old) => {
+            var _a, _b;
+            return ({
+                status: STATUS.CONFIRM,
+                stripeSubscriptionId: (_a = old === null || old === void 0 ? void 0 : old.stripeSubscriptionId) !== null && _a !== void 0 ? _a : null,
+                lastComment: (_b = old === null || old === void 0 ? void 0 : old.lastComment) !== null && _b !== void 0 ? _b : '',
+            });
+        });
+        queryClient.invalidateQueries({ queryKey: checkoutKeys.status(cartBiId) });
+    };
+    const placeOrder = useMutation({
+        mutationFn: (consent) => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const { client, stripeRef, cardNumberElRef, billingRef } = ctx;
+            const stripe = stripeRef.current;
+            const card = cardNumberElRef.current;
+            if (!client || !stripe || !card)
+                throw new Error('Checkout is not ready yet.');
+            const billing = billingRef.current;
+            if (!billing)
+                throw new Error('Billing information is not available. Please refresh and try again.');
+            const session = ctx.sessionRef.current;
+            if (!session) {
+                throw new Error('Checkout session is not ready yet. Please wait a moment and try again.');
+            }
+            const { customerUid } = session;
+            // ── Step 1: Fetch salable(product) uid + billing plans in parallel ─────────────
+            const [productInfo, plansResult] = yield Promise.all([
+                client.getSalableUid('TWOU-SUB-PLAN-001'),
+                client.getBillingPlans(),
+            ]);
+            const salableUid = productInfo.uid;
+            const defaultPlan = (_a = plansResult.plans.find((p) => !p.isTemplate)) !== null && _a !== void 0 ? _a : plansResult.plans[0];
+            if (!defaultPlan)
+                throw new Error('No billing plans available.');
+            const billingPlanUid = defaultPlan.uid;
+            // ── Step 2: Create the cart ───────────────────────────────────────────
+            const createdCart = yield client.createCart({ customerUid, salableUid, billingPlanUid });
+            ctx.onCartCreated(createdCart);
+            // ── Step 3: Tokenize the card (browser → Stripe) ──────────────────────
+            const { paymentMethod, error } = yield stripe.createPaymentMethod({
+                type: 'card',
+                card,
+                billing_details: {
+                    name: `${billing.firstName} ${billing.lastName}`.trim(),
+                    address: toStripeAddress(billing),
+                },
+            });
+            if (error || !paymentMethod) {
+                throw new CardValidationError((error === null || error === void 0 ? void 0 : error.message) || 'There was a problem with your card.');
+            }
+            // ── Step 4: Attach billing address + payment method to cart item ──────
+            const { cartItemUid } = yield client.getCartItem(createdCart.biId);
+            yield client.updateCartItem({
+                cartItemUid,
+                billingAddress: toCartAddress(billing),
+                paymentMethodId: paymentMethod.id,
+            });
+            // ── Step 5: Persist auto-renewal consent on the TwouCart BI ───────────
+            yield client.updateCartConsent({
+                cartUid: createdCart.uid,
+                consent,
+            });
+            // ── Step 6: Fire the backend workflow ─────────────────────────────────
+            yield client.placeOrder(createdCart.uid);
+            return createdCart;
+        }),
+        onSuccess: (cart) => {
+            optimisticConfirm(cart.biId);
+        },
+        onError: (err) => {
+            if (err instanceof CardValidationError)
+                ctx.setCardError(err.message);
+            else
+                ctx.setError(err.message);
+        },
+    });
+    return { placeOrder };
+}
+//# sourceMappingURL=useCheckoutMutations.js.map

package/dist/data/hooks/useCheckoutMutations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCheckoutMutations.js","sourceRoot":"","sources":["../../../src/data/hooks/useCheckoutMutations.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * query/useCheckoutMutations.ts — write-side TanStack mutations.\n *\n * The placeOrder mutation drives the checkout sequence on button click.\n * The viax token and customerUid are established on page load via\n * GET /edx-session and passed in through sessionRef.\n *\n *   1. getSalableUid + getBillingPlans (parallel)\n *   2. createTwouCart\n *   3. stripe.createPaymentMethod   → pm_xxx\n *   4. updateTwouCartItem           → billing address + pm_xxx\n *   5. updateTwouCart               → consent fields (SUBS-228)\n *   6. startBusinessProcessableTransition('Sanction_Check')\n */\nimport { useMutation, useQueryClient } from '@tanstack/react-query';\nimport type { RefObject } from 'react';\nimport { STATUS } from '../../constants';\nimport { checkoutKeys } from './keys';\nimport type { EdxSessionResult } from '../../utils/provision';\nimport type {\n  CheckoutClient, StripeLike, StripeElementLike, Cart, BillingInfo,\n  CartBillingAddress, CartStatusResult, CheckoutConsent,\n} from '../../types';\n\nclass CardValidationError extends Error {}\n\nfunction toCartAddress(b: BillingInfo): CartBillingAddress {\n  return {\n    tFirstName: b.firstName,\n    tLastName: b.lastName,\n    upaLine1: b.line1,\n    upaCity: b.city,\n    upaPostcode: b.zip,\n    gadStateOrProvince: b.state,\n    gadCountry: { iso2Code: b.country },\n  };\n}\n\nfunction toStripeAddress(b: BillingInfo): Record<string, string | undefined> {\n  return {\n    line1: b.line1 || undefined,\n    city: b.city || undefined,\n    state: b.state || undefined,\n    postal_code: b.zip || undefined,\n    country: b.country || undefined,\n  };\n}\n\nexport interface CheckoutMutationsCtx {\n  client: CheckoutClient | null,\n  sessionRef: RefObject<EdxSessionResult | null>,\n  stripeRef: RefObject<StripeLike | null>,\n  cardNumberElRef: RefObject<StripeElementLike | null>,\n  billingRef: RefObject<BillingInfo | null>,\n  setError: (msg: string) => void,\n  setCardError: (msg: string) => void,\n  onCartCreated: (cart: Cart) => void,\n}\n\nexport function useCheckoutMutations(ctx: CheckoutMutationsCtx) {\n  const queryClient = useQueryClient();\n\n  const optimisticConfirm = (cartBiId: string) => {\n    queryClient.setQueryData<CartStatusResult>(checkoutKeys.status(cartBiId), (old) => ({\n      status: STATUS.CONFIRM,\n      stripeSubscriptionId: old?.stripeSubscriptionId ?? null,\n      lastComment: old?.lastComment ?? '',\n    }));\n    queryClient.invalidateQueries({ queryKey: checkoutKeys.status(cartBiId) });\n  };\n\n  const placeOrder = useMutation<Cart, Error, CheckoutConsent>({\n    mutationFn: async (consent) => {\n      const { client, stripeRef, cardNumberElRef, billingRef } = ctx;\n      const stripe = stripeRef.current;\n      const card = cardNumberElRef.current;\n      if (!client || !stripe || !card) throw new Error('Checkout is not ready yet.');\n\n      const billing = billingRef.current;\n      if (!billing) throw new Error('Billing information is not available. Please refresh and try again.');\n\n      const session = ctx.sessionRef.current;\n      if (!session) {\n        throw new Error('Checkout session is not ready yet. Please wait a moment and try again.');\n      }\n      const { customerUid } = session;\n\n      // ── Step 1: Fetch salable(product) uid + billing plans in parallel ─────────────\n      const [productInfo, plansResult] = await Promise.all([\n        client.getSalableUid('TWOU-SUB-PLAN-001'),\n        client.getBillingPlans(),\n      ]);\n      const salableUid = productInfo.uid;\n      const defaultPlan = plansResult.plans.find((p) => !p.isTemplate) ?? plansResult.plans[0];\n      if (!defaultPlan) throw new Error('No billing plans available.');\n      const billingPlanUid = defaultPlan.uid;\n\n      // ── Step 2: Create the cart ───────────────────────────────────────────\n      const createdCart = await client.createCart({ customerUid, salableUid, billingPlanUid });\n      ctx.onCartCreated(createdCart);\n\n      // ── Step 3: Tokenize the card (browser → Stripe) ──────────────────────\n      const { paymentMethod, error } = await stripe.createPaymentMethod({\n        type: 'card',\n        card,\n        billing_details: {\n          name: `${billing.firstName} ${billing.lastName}`.trim(),\n          address: toStripeAddress(billing),\n        },\n      });\n      if (error || !paymentMethod) {\n        throw new CardValidationError(error?.message || 'There was a problem with your card.');\n      }\n\n      // ── Step 4: Attach billing address + payment method to cart item ──────\n      const { cartItemUid } = await client.getCartItem(createdCart.biId);\n      await client.updateCartItem({\n        cartItemUid,\n        billingAddress: toCartAddress(billing),\n        paymentMethodId: paymentMethod.id,\n      });\n\n      // ── Step 5: Persist auto-renewal consent on the TwouCart BI ───────────\n      await client.updateCartConsent({\n        cartUid: createdCart.uid,\n        consent,\n      });\n\n      // ── Step 6: Fire the backend workflow ─────────────────────────────────\n      await client.placeOrder(createdCart.uid);\n\n      return createdCart;\n    },\n    onSuccess: (cart) => {\n      optimisticConfirm(cart.biId);\n    },\n    onError: (err) => {\n      if (err instanceof CardValidationError) ctx.setCardError(err.message);\n      else ctx.setError(err.message);\n    },\n  });\n\n  return { placeOrder };\n}\n"]}

package/dist/data/hooks/useCheckoutQueries.d.ts

@@ -0,0 +1,35 @@
+import type { CheckoutClient, CartStatusResult, BillingPlansResult, CourseDetail } from '../../types';
+/** Exchange edX session cookies for a viax token on page load. */
+export declare function useViaxSessionQuery(sessionUrl: string | null): import("@tanstack/react-query").UseQueryResult<import("../../utils/provision").EdxSessionResult, Error>;
+/**
+ * Fetches billing plans after the viax session is established.
+ * Used to display prices in CartSummary before the user starts checkout.
+ */
+export declare function useBillingPlansQuery(client: CheckoutClient | null, sessionReady: boolean): import("@tanstack/react-query").UseQueryResult<BillingPlansResult, Error>;
+/**
+ * Fetches the live active subscriber count after the viax session is ready.
+ * Refreshes every 5 minutes so the number stays roughly current.
+ */
+export declare function useActiveSubscriptionsQuery(client: CheckoutClient | null, sessionReady: boolean): import("@tanstack/react-query").UseQueryResult<{
+    active: number;
+}, Error>;
+/**
+ * Fetches the user's country from their edX account profile.
+ * Derives the LMS base URL from the session URL (same origin).
+ * Returns null if the fetch fails or the field is absent — checkout stays open in that case.
+ */
+export declare function useUserCountryQuery(sessionUrl: string | null, username: string | null): import("@tanstack/react-query").UseQueryResult<string | null, Error>;
+/**
+ * Checks whether the current user already has an active subscription.
+ * Requires a viax token (session must be ready). Runs once on mount.
+ */
+export declare function useIsSubscriberQuery(client: CheckoutClient | null, sessionReady: boolean): import("@tanstack/react-query").UseQueryResult<import("../../types").CurrentUserSubscriberResult | null, Error>;
+/** Polls the cart state machine every second; stops on terminal states. */
+export declare function useCartStatusQuery(client: CheckoutClient | null, cartBiId: string | null): import("@tanstack/react-query").UseQueryResult<CartStatusResult, Error>;
+/** Looks up the created subscription biId after success. */
+export declare function useSubscriptionIdQuery(client: CheckoutClient | null, cartBiId: string | null, enabled: boolean): import("@tanstack/react-query").UseQueryResult<import("../../types").SubscriptionDetails | null, Error>;
+/**
+ * Fetches course details when the user arrived via ?course_run_key=.
+ * Skipped entirely when no course key is present (standard checkout).
+ */
+export declare function useCourseDetailQuery(client: CheckoutClient | null, sessionReady: boolean, courseRunKey: string | null): import("@tanstack/react-query").UseQueryResult<CourseDetail | null, Error>;

package/dist/data/hooks/useCheckoutQueries.js

@@ -0,0 +1,110 @@
+/**
+ * query/useCheckoutQueries.ts — read-side TanStack Query hooks.
+ *
+ * useViaxSessionQuery runs on mount to exchange the edX session for a viax
+ * token. Billing plans and subscriber count wait until the session is ready.
+ */
+import { useQuery } from '@tanstack/react-query';
+import { isTerminalStatus } from '../../constants';
+import { checkoutKeys } from './keys';
+import { fetchEdxSession, fetchUserCountry } from '../../utils/provision';
+/** Exchange edX session cookies for a viax token on page load. */
+export function useViaxSessionQuery(sessionUrl) {
+    return useQuery({
+        queryKey: checkoutKeys.viaxSession(),
+        enabled: !!sessionUrl,
+        queryFn: () => fetchEdxSession(sessionUrl),
+        staleTime: 5 * 60 * 1000,
+        retry: 1,
+    });
+}
+/**
+ * Fetches billing plans after the viax session is established.
+ * Used to display prices in CartSummary before the user starts checkout.
+ */
+export function useBillingPlansQuery(client, sessionReady) {
+    return useQuery({
+        queryKey: checkoutKeys.billingPlans(),
+        enabled: !!client && sessionReady,
+        queryFn: () => client.getBillingPlans(),
+        staleTime: Infinity,
+        retry: 2,
+    });
+}
+/**
+ * Fetches the live active subscriber count after the viax session is ready.
+ * Refreshes every 5 minutes so the number stays roughly current.
+ */
+export function useActiveSubscriptionsQuery(client, sessionReady) {
+    return useQuery({
+        queryKey: ['checkout', 'activeSubscriptions'],
+        enabled: !!client && sessionReady,
+        queryFn: () => client.getActiveSubscriptions(),
+        staleTime: 5 * 60 * 1000, // 5 minutes
+        retry: 1,
+    });
+}
+/**
+ * Fetches the user's country from their edX account profile.
+ * Derives the LMS base URL from the session URL (same origin).
+ * Returns null if the fetch fails or the field is absent — checkout stays open in that case.
+ */
+export function useUserCountryQuery(sessionUrl, username) {
+    return useQuery({
+        queryKey: ['checkout', 'userCountry', username],
+        enabled: !!sessionUrl && !!username,
+        queryFn: () => {
+            const lmsBaseUrl = new URL(sessionUrl).origin;
+            return fetchUserCountry(lmsBaseUrl, username);
+        },
+        staleTime: Infinity,
+        retry: 1,
+    });
+}
+/**
+ * Checks whether the current user already has an active subscription.
+ * Requires a viax token (session must be ready). Runs once on mount.
+ */
+export function useIsSubscriberQuery(client, sessionReady) {
+    return useQuery({
+        queryKey: ['checkout', 'isCurrentUserSubscriber'],
+        enabled: !!client && sessionReady,
+        queryFn: () => client.isCurrentUserSubscriber(),
+        staleTime: Infinity,
+        retry: 1,
+    });
+}
+/** Polls the cart state machine every second; stops on terminal states. */
+export function useCartStatusQuery(client, cartBiId) {
+    return useQuery({
+        queryKey: checkoutKeys.status(cartBiId !== null && cartBiId !== void 0 ? cartBiId : 'none'),
+        enabled: !!client && !!cartBiId,
+        queryFn: () => client.getCartStatus(cartBiId),
+        refetchInterval: (query) => { var _a, _b; return isTerminalStatus((_b = (_a = query.state.data) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : null) ? false : 1000; },
+        refetchOnWindowFocus: false,
+        gcTime: 0,
+    });
+}
+/** Looks up the created subscription biId after success. */
+export function useSubscriptionIdQuery(client, cartBiId, enabled) {
+    return useQuery({
+        queryKey: checkoutKeys.subscriptionId(cartBiId !== null && cartBiId !== void 0 ? cartBiId : 'none'),
+        enabled: enabled && !!client && !!cartBiId,
+        queryFn: () => client.findSubscriptionBiId(cartBiId),
+        staleTime: Infinity,
+    });
+}
+/**
+ * Fetches course details when the user arrived via ?course_run_key=.
+ * Skipped entirely when no course key is present (standard checkout).
+ */
+export function useCourseDetailQuery(client, sessionReady, courseRunKey) {
+    return useQuery({
+        queryKey: checkoutKeys.courseDetail(courseRunKey !== null && courseRunKey !== void 0 ? courseRunKey : 'none'),
+        enabled: !!client && sessionReady && !!courseRunKey,
+        queryFn: () => client.getCourseDetail(courseRunKey),
+        staleTime: Infinity,
+        retry: 1,
+    });
+}
+//# sourceMappingURL=useCheckoutQueries.js.map

package/dist/data/hooks/useCheckoutQueries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCheckoutQueries.js","sourceRoot":"","sources":["../../../src/data/hooks/useCheckoutQueries.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * query/useCheckoutQueries.ts — read-side TanStack Query hooks.\n *\n * useViaxSessionQuery runs on mount to exchange the edX session for a viax\n * token. Billing plans and subscriber count wait until the session is ready.\n */\nimport { useQuery } from '@tanstack/react-query';\nimport { isTerminalStatus } from '../../constants';\nimport { checkoutKeys } from './keys';\nimport { fetchEdxSession, fetchUserCountry } from '../../utils/provision';\nimport type { CheckoutClient, CartStatusResult, BillingPlansResult, CourseDetail } from '../../types';\n\n/** Exchange edX session cookies for a viax token on page load. */\nexport function useViaxSessionQuery(sessionUrl: string | null) {\n  return useQuery({\n    queryKey: checkoutKeys.viaxSession(),\n    enabled: !!sessionUrl,\n    queryFn: () => fetchEdxSession(sessionUrl!),\n    staleTime: 5 * 60 * 1000,\n    retry: 1,\n  });\n}\n\n/**\n * Fetches billing plans after the viax session is established.\n * Used to display prices in CartSummary before the user starts checkout.\n */\nexport function useBillingPlansQuery(client: CheckoutClient | null, sessionReady: boolean) {\n  return useQuery({\n    queryKey: checkoutKeys.billingPlans(),\n    enabled: !!client && sessionReady,\n    queryFn: (): Promise<BillingPlansResult> => client!.getBillingPlans(),\n    staleTime: Infinity,\n    retry: 2,\n  });\n}\n\n/**\n * Fetches the live active subscriber count after the viax session is ready.\n * Refreshes every 5 minutes so the number stays roughly current.\n */\nexport function useActiveSubscriptionsQuery(client: CheckoutClient | null, sessionReady: boolean) {\n  return useQuery({\n    queryKey: ['checkout', 'activeSubscriptions'],\n    enabled: !!client && sessionReady,\n    queryFn: () => client!.getActiveSubscriptions(),\n    staleTime: 5 * 60 * 1000, // 5 minutes\n    retry: 1,\n  });\n}\n\n/**\n * Fetches the user's country from their edX account profile.\n * Derives the LMS base URL from the session URL (same origin).\n * Returns null if the fetch fails or the field is absent — checkout stays open in that case.\n */\nexport function useUserCountryQuery(sessionUrl: string | null, username: string | null) {\n  return useQuery({\n    queryKey: ['checkout', 'userCountry', username],\n    enabled: !!sessionUrl && !!username,\n    queryFn: () => {\n      const lmsBaseUrl = new URL(sessionUrl!).origin;\n      return fetchUserCountry(lmsBaseUrl, username!);\n    },\n    staleTime: Infinity,\n    retry: 1,\n  });\n}\n\n/**\n * Checks whether the current user already has an active subscription.\n * Requires a viax token (session must be ready). Runs once on mount.\n */\nexport function useIsSubscriberQuery(client: CheckoutClient | null, sessionReady: boolean) {\n  return useQuery({\n    queryKey: ['checkout', 'isCurrentUserSubscriber'],\n    enabled: !!client && sessionReady,\n    queryFn: () => client!.isCurrentUserSubscriber(),\n    staleTime: Infinity,\n    retry: 1,\n  });\n}\n\n/** Polls the cart state machine every second; stops on terminal states. */\nexport function useCartStatusQuery(client: CheckoutClient | null, cartBiId: string | null) {\n  return useQuery({\n    queryKey: checkoutKeys.status(cartBiId ?? 'none'),\n    enabled: !!client && !!cartBiId,\n    queryFn: (): Promise<CartStatusResult> => client!.getCartStatus(cartBiId!),\n    refetchInterval: (query) =>\n      isTerminalStatus(query.state.data?.status ?? null) ? false : 1000,\n    refetchOnWindowFocus: false,\n    gcTime: 0,\n  });\n}\n\n/** Looks up the created subscription biId after success. */\nexport function useSubscriptionIdQuery(\n  client: CheckoutClient | null,\n  cartBiId: string | null,\n  enabled: boolean,\n) {\n  return useQuery({\n    queryKey: checkoutKeys.subscriptionId(cartBiId ?? 'none'),\n    enabled: enabled && !!client && !!cartBiId,\n    queryFn: () => client!.findSubscriptionBiId(cartBiId!),\n    staleTime: Infinity,\n  });\n}\n\n/**\n * Fetches course details when the user arrived via ?course_run_key=.\n * Skipped entirely when no course key is present (standard checkout).\n */\nexport function useCourseDetailQuery(\n  client: CheckoutClient | null,\n  sessionReady: boolean,\n  courseRunKey: string | null,\n) {\n  return useQuery({\n    queryKey: checkoutKeys.courseDetail(courseRunKey ?? 'none'),\n    enabled: !!client && sessionReady && !!courseRunKey,\n    queryFn: (): Promise<CourseDetail | null> => client!.getCourseDetail(courseRunKey!),\n    staleTime: Infinity,\n    retry: 1,\n  });\n}\n"]}

package/dist/routes.d.ts

@@ -11,7 +11,7 @@ declare const routes: {
     children: {
         index: boolean;
         lazy(): Promise<{
-            Component: () => import("react/jsx-runtime").JSX.Element;
+            Component: import("react").FC<{}>;
         }>;
     }[];
 }[];

package/dist/routes.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { authenticatedLoader, getAuthenticatedHttpClient } from '@openedx/frontend-base';
+import { authenticatedLoader, getAuthenticatedHttpClient, } from '@openedx/frontend-base';
 import { redirect } from 'react-router-dom';
 import { getSubsInitApiUrl } from './data/services/subs/urls';
 import { subscriptionManageRole } from './constants';
@@ -36,15 +36,16 @@ const protectedLoader = (args) => __awaiter(void 0, void 0, void 0, function* ()
 });
 const routes = [
     {
-        id: 'org.openedx.frontend.route.subscription.manage.main',
-        path: 'subscription-manage',
+        id: 'org.openedx.frontend.route.template.main',
+        path: 'checkout-page',
         loader: protectedLoader,
         handle: {
             roles: [subscriptionManageRole],
         },
         lazy() {
             return __awaiter(this, void 0, void 0, function* () {
-                const module = yield import(/* webpackChunkName: "subscription-manage-main" */ './Main');
+                const module = yield import(
+                /* webpackChunkName: "template-main" */ './Main');
                 return { Component: module.default };
             });
         },
@@ -53,7 +54,8 @@ const routes = [
                 index: true,
                 lazy() {
                     return __awaiter(this, void 0, void 0, function* () {
-                        const module = yield import(/* webpackChunkName: "subscription-manage-example" */ './example/ExamplePage');
+                        const module = yield import(
+                        /* webpackChunkName: "CheckoutPage" */ './checkoutPage/CheckoutPage');
                         return { Component: module.default };
                     });
                 },

package/dist/routes.js.map

@@ -1 +1 @@
-{"version":3,"file":"routes.js","sourceRoot":"","sources":["../src/routes.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AACzF,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAErD,sDAAsD;AACtD,MAAM,wBAAwB,GAAG,GAAS,EAAE;IAC1C,IAAI,CAAC;QACH,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,0BAA0B,EAAE,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC;QAE7E,IAAI,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC;YACnE,MAAM,QAAQ,CAAC,oBAAoB,CAAC,CAAC,CAAC,0EAA0E;QAClH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,mCAAmC;QACnC,IAAI,KAAK,YAAY,QAAQ,EAAE,CAAC;YAC9B,MAAM,KAAK,CAAC;QACd,CAAC;QAED,MAAM,QAAQ,CAAC,oBAAoB,CAAC,CAAC,CAAC,mDAAmD;IAC3F,CAAC;AACH,CAAC,CAAA,CAAC;AAEF,yEAAyE;AACzE,MAAM,eAAe,GAAG,CAAO,IAAI,EAAE,EAAE;IACrC,MAAM,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,wBAAwB,EAAE,CAAC;IAEjC,OAAO,IAAI,CAAC;AACd,CAAC,CAAA,CAAC;AAEF,MAAM,MAAM,GAAG;IACb;QACE,EAAE,EAAE,qDAAqD;QACzD,IAAI,EAAE,qBAAqB;QAC3B,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE;YACN,KAAK,EAAE,CAAC,sBAAsB,CAAC;SAChC;QACK,IAAI;;gBACR,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,kDAAkD,CAAC,QAAQ,CAAC,CAAC;gBACzF,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;YACvC,CAAC;SAAA;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,IAAI;gBACL,IAAI;;wBACR,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,qDAAqD,CAAC,uBAAuB,CAAC,CAAC;wBAC3G,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;oBACvC,CAAC;iBAAA;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { authenticatedLoader, getAuthenticatedHttpClient } from '@openedx/frontend-base';\nimport { redirect } from 'react-router-dom';\n\nimport { getSubsInitApiUrl } from './data/services/subs/urls';\nimport { subscriptionManageRole } from './constants';\n\n// loader to check if the user has subscription access\nconst subscriptionAccessLoader = async () => {\n  try {\n    const { data } = await getAuthenticatedHttpClient().get(getSubsInitApiUrl());\n\n    if (!data?.userSubscription || !data.userSubscription.isSubscriber) {\n      throw redirect('/learner-dashboard'); // redirect to learner dashboard if user does not have subscription access\n    }\n\n    return null;\n  } catch (error) {\n    // Let redirect responses bubble up\n    if (error instanceof Response) {\n      throw error;\n    }\n\n    throw redirect('/learner-dashboard'); // redirect to learner dashboard if an error occurs\n  }\n};\n\n// composed loader that checks for authentication and subscription access\nconst protectedLoader = async (args) => {\n  await authenticatedLoader(args);\n  await subscriptionAccessLoader();\n\n  return null;\n};\n\nconst routes = [\n  {\n    id: 'org.openedx.frontend.route.subscription.manage.main',\n    path: 'subscription-manage',\n    loader: protectedLoader,\n    handle: {\n      roles: [subscriptionManageRole],\n    },\n    async lazy() {\n      const module = await import(/* webpackChunkName: \"subscription-manage-main\" */ './Main');\n      return { Component: module.default };\n    },\n    children: [\n      {\n        index: true,\n        async lazy() {\n          const module = await import(/* webpackChunkName: \"subscription-manage-example\" */ './example/ExamplePage');\n          return { Component: module.default };\n        },\n      },\n    ],\n  },\n];\n\nexport default routes;\n"]}
+{"version":3,"file":"routes.js","sourceRoot":"","sources":["../src/routes.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EACL,mBAAmB,EACnB,0BAA0B,GAC3B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAErD,sDAAsD;AACtD,MAAM,wBAAwB,GAAG,GAAS,EAAE;IAC1C,IAAI,CAAC;QACH,MAAM,EAAE,IAAI,EAAE,GACV,MAAM,0BAA0B,EAAE,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC;QAEhE,IAAI,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC;YACnE,MAAM,QAAQ,CAAC,oBAAoB,CAAC,CAAC,CAAC,0EAA0E;QAClH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,mCAAmC;QACnC,IAAI,KAAK,YAAY,QAAQ,EAAE,CAAC;YAC9B,MAAM,KAAK,CAAC;QACd,CAAC;QAED,MAAM,QAAQ,CAAC,oBAAoB,CAAC,CAAC,CAAC,mDAAmD;IAC3F,CAAC;AACH,CAAC,CAAA,CAAC;AAEF,yEAAyE;AACzE,MAAM,eAAe,GAAG,CAAO,IAAI,EAAE,EAAE;IACrC,MAAM,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,wBAAwB,EAAE,CAAC;IAEjC,OAAO,IAAI,CAAC;AACd,CAAC,CAAA,CAAC;AAEF,MAAM,MAAM,GAAG;IACb;QACE,EAAE,EAAE,0CAA0C;QAC9C,IAAI,EAAE,eAAe;QACrB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE;YACN,KAAK,EAAE,CAAC,sBAAsB,CAAC;SAChC;QACK,IAAI;;gBACR,MAAM,MAAM,GAAG,MAAM,MAAM;gBACzB,uCAAuC,CAAC,QAAQ,CACjD,CAAC;gBACF,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;YACvC,CAAC;SAAA;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,IAAI;gBACL,IAAI;;wBACR,MAAM,MAAM,GAAG,MAAM,MAAM;wBACzB,sCAAsC,CAAC,6BAA6B,CACrE,CAAC;wBACF,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC;oBACvC,CAAC;iBAAA;aACF;SACF;KACF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {\n  authenticatedLoader,\n  getAuthenticatedHttpClient,\n} from '@openedx/frontend-base';\nimport { redirect } from 'react-router-dom';\n\nimport { getSubsInitApiUrl } from './data/services/subs/urls';\nimport { subscriptionManageRole } from './constants';\n\n// loader to check if the user has subscription access\nconst subscriptionAccessLoader = async () => {\n  try {\n    const { data }\n      = await getAuthenticatedHttpClient().get(getSubsInitApiUrl());\n\n    if (!data?.userSubscription || !data.userSubscription.isSubscriber) {\n      throw redirect('/learner-dashboard'); // redirect to learner dashboard if user does not have subscription access\n    }\n\n    return null;\n  } catch (error) {\n    // Let redirect responses bubble up\n    if (error instanceof Response) {\n      throw error;\n    }\n\n    throw redirect('/learner-dashboard'); // redirect to learner dashboard if an error occurs\n  }\n};\n\n// composed loader that checks for authentication and subscription access\nconst protectedLoader = async (args) => {\n  await authenticatedLoader(args);\n  await subscriptionAccessLoader();\n\n  return null;\n};\n\nconst routes = [\n  {\n    id: 'org.openedx.frontend.route.template.main',\n    path: 'checkout-page',\n    loader: protectedLoader,\n    handle: {\n      roles: [subscriptionManageRole],\n    },\n    async lazy() {\n      const module = await import(\n        /* webpackChunkName: \"template-main\" */ './Main'\n      );\n      return { Component: module.default };\n    },\n    children: [\n      {\n        index: true,\n        async lazy() {\n          const module = await import(\n            /* webpackChunkName: \"CheckoutPage\" */ './checkoutPage/CheckoutPage'\n          );\n          return { Component: module.default };\n        },\n      },\n    ],\n  },\n];\n\nexport default routes;\n"]}

package/dist/style.scss

@@ -1 +1,14 @@
 @use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css";
+
+
+//components
+@use "./styles/components/checkout.scss";
+@use "./styles/components/enrollmentSummary.scss";
+@use "./styles/components/paymentForm.scss";
+@use "./styles/components/checkoutStepper.scss";
+@use "./styles/components/paymentFields.scss";
+@use "./styles/components/brandMarks.scss";
+@use "./styles/components/statusScreens.scss";
+@use "./styles/components/edxUnlimitedBanner.scss";
+@use "./styles/components/cartSummary.scss";
+@use "./styles/components/courseEnrollmentCard.scss";

package/dist/styles/components/brandMarks.scss

@@ -0,0 +1,54 @@
+.brand-marks {
+  &__card-brands {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 4px;
+  }
+
+  &__paypal {
+    font-family: Arial, sans-serif;
+    font-weight: 700;
+    font-style: italic;
+    font-size: 1.05rem;
+  }
+
+  &__paypal-pay {
+    color: #003087;
+  }
+
+  &__paypal-pal {
+    color: #009cde;
+  }
+
+  &__edx-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 56px;
+    height: 40px;
+    border-radius: 6px;
+    background: #1f1f1f;
+    line-height: 1;
+    margin-right: 0.75rem;
+  }
+
+  &__edx-logo-text {
+    text-align: center;
+  }
+
+  &__edx-logo-edx {
+    color: #fff;
+    font-weight: 800;
+    font-size: 0.8rem;
+    letter-spacing: -0.02em;
+  }
+
+  &__edx-logo-unlimited {
+    color: #b1c2ff;
+    font-size: 0.5rem;
+    font-weight: 600;
+    margin-top: 1px;
+  }
+}

package/dist/styles/components/cartSummary.scss

@@ -0,0 +1,18 @@
+// styles/components/cartSummary.scss
+
+.cart-summary {
+  // No background — inherits the page background (off-white in the design)
+  background: transparent;
+
+  &__stats {
+    display: flex;
+    gap: 1.5rem;
+    margin-top: 1rem;
+  }
+
+  &__stat {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+}

package/dist/styles/components/checkout.scss

@@ -0,0 +1,29 @@
+div.checkout__container {
+    padding-inline: 1.125rem; /* 18px */
+    padding-block: 3rem; /* 48px */
+    div.payment__options { 
+        > div {
+            padding: 32px;
+            background-color: white;
+        }
+    }
+}
+
+@media (--pgn-size-breakpoint-min-width-lg) { 
+    div.checkout__container { 
+        padding:0;
+        div.payment__options {
+            background-color: var(--pgn-color-light-100);
+            > div {
+                padding: 32px 32px 64px 32px;
+                background-color: transparent;
+            }
+        }
+        div.payment__summary {
+            padding: 48px 48px 32px 48px;
+        }
+        div.gap-5 {
+            gap: 0 !important;
+        }
+    }
+}

package/dist/styles/components/checkoutStepper.scss

@@ -0,0 +1,9 @@
+.checkout__stepper {
+    > div {
+        padding:0;
+
+        ul.pgn__stepper-header-step-list {
+            justify-content: flex-start;
+        }
+    }
+}

package/dist/styles/components/courseEnrollmentCard.scss

@@ -0,0 +1,38 @@
+.course-enrollment-card {
+  margin-top: 1.25rem;
+  padding: 1rem;
+  background: var(--pgn-color-white, #fff);
+  border: 1px solid var(--pgn-color-light-400, #e5e5e5);
+  border-radius: var(--pgn-size-border-radius-base, 0.375rem);
+
+  &__image {
+    display: block;
+    width: 4.5rem;
+    height: 3.25rem;
+    object-fit: cover;
+    border-radius: 0.25rem;
+    background: var(--pgn-color-light-300, #f2f2f2);
+
+    &--placeholder {
+      background:
+        linear-gradient(
+          to top right,
+          transparent calc(50% - 1px),
+          var(--pgn-color-light-500, #c2c2c2) 50%,
+          transparent calc(50% + 1px)
+        ),
+        linear-gradient(
+          to top left,
+          transparent calc(50% - 1px),
+          var(--pgn-color-light-500, #c2c2c2) 50%,
+          transparent calc(50% + 1px)
+        ),
+        var(--pgn-color-light-300, #f2f2f2);
+    }
+  }
+
+  &__copy {
+    color: var(--pgn-color-gray-900, #212529);
+    line-height: 1.4;
+  }
+}