@edx/frontend-app-subscription-checkout 1.0.0

package/dist/slots.js

@@ -0,0 +1,7 @@
+var _a;
+import { exampleHeaderApp } from './widgets/ExampleHeader';
+const slots = [
+    ...((_a = exampleHeaderApp.slots) !== null && _a !== void 0 ? _a : []),
+];
+export default slots;
+//# sourceMappingURL=slots.js.map

package/dist/slots.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.js","sourceRoot":"","sources":["../src/slots.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,KAAK,GAAoB;IAC7B,GAAG,CAAC,MAAA,gBAAgB,CAAC,KAAK,mCAAI,EAAE,CAAC;CAClC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { SlotOperation } from '@openedx/frontend-base';\n\nimport { exampleHeaderApp } from './widgets/ExampleHeader';\n\nconst slots: SlotOperation[] = [\n  ...(exampleHeaderApp.slots ?? []),\n];\n\nexport default slots;\n"]}

package/dist/style.scss

@@ -0,0 +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;
+  }
+}

package/dist/styles/components/edxUnlimitedBanner.scss

@@ -0,0 +1,138 @@
+
+.edx-banner {
+  background: #0a1628;
+  border-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  align-items: stretch;
+  min-height: 120px;
+  position: relative;
+
+  &__content {
+    flex: 1 1 0;
+    padding: 28px 32px 28px 28px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 10px;
+    z-index: 1;
+  }
+
+  &__eyebrow {
+    display: flex;
+    align-items: center;
+  }
+
+  &__headline {
+    margin: 0;
+    color: #fff;
+    font-size: clamp(1.1rem, 2.2vw, 1.55rem);
+    font-weight: 700;
+    line-height: 1.25;
+    letter-spacing: -0.01em;
+  }
+
+  &__body {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.78);
+    font-size: clamp(0.78rem, 1.3vw, 0.88rem);
+    line-height: 1.55;
+    max-width: 540px;
+  }
+
+  &__cta-wrapper {
+    margin-top: 4px;
+  }
+
+  &__cta {
+    display: inline-block;
+    background: #e2522a;
+    color: #fff;
+    font-weight: 700;
+    font-size: 0.82rem;
+    padding: 9px 20px;
+    border-radius: 6px;
+    text-decoration: none;
+    letter-spacing: 0.01em;
+    transition: background 0.15s;
+    white-space: nowrap;
+
+    &:hover {
+      background: #c94420;
+      color: #fff;
+      text-decoration: none;
+    }
+  }
+
+  &__bullet {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.15);
+    flex-shrink: 0;
+    margin-right: 10px;
+  }
+
+  &__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+    vertical-align: middle;
+    position: relative;
+    top: -2px;
+  }
+
+  &__badge-edx {
+    background: #fff;
+    border-radius: 4px 0 0 4px;
+    padding: 2px 5px 2px 6px;
+    font-weight: 800;
+    font-size: 0.78em;
+    letter-spacing: -0.02em;
+    color: #000;
+    line-height: 1.15;
+    font-style: normal;
+  }
+
+  &__badge-unlimited {
+    background: #000;
+    border-radius: 0 4px 4px 0;
+    padding: 2px 6px 2px 4px;
+    font-weight: 600;
+    font-size: 0.64em;
+    letter-spacing: 0.02em;
+    color: #c5b8ff;
+    line-height: 1.15;
+    font-style: normal;
+    text-transform: lowercase;
+  }
+
+  &__photo {
+    flex-shrink: 0;
+    width: clamp(120px, 22%, 240px);
+    position: relative;
+    overflow: hidden;
+
+    img {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center top;
+    }
+  }
+
+
+  &__placeholder {
+    flex-shrink: 0;
+    width: clamp(100px, 20%, 200px);
+    background: rgba(255, 255, 255, 0.06);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/dist/styles/components/enrollmentSummary.scss

@@ -0,0 +1,13 @@
+.enrolled__banner {
+    div:first-child {
+        border-top-left-radius: var(--pgn-size-border-radius-base);
+        border-top-right-radius: var(--pgn-size-border-radius-base);
+    }
+
+    div:last-child {
+        border: 1px solid var(--pgn-color-light-400);
+        border-top: 0;
+        border-bottom-left-radius: var(--pgn-size-border-radius-base);
+        border-bottom-right-radius: var(--pgn-size-border-radius-base);
+    }
+}

package/dist/styles/components/paymentFields.scss

@@ -0,0 +1,15 @@
+.payment--field {
+    .card__expiry,
+    .card__cvc {
+        width: 10.75rem;
+    }
+
+    .form-control {
+        border-radius: 5px;
+        border: 1px solid #E6E6E6;
+        background: #FFF;
+
+        /* default/box-shadow-default */
+        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.03);
+    }
+}

package/dist/styles/components/paymentForm.scss

@@ -0,0 +1,105 @@
+// styles/components/paymentForm.scss
+
+.payment-form {
+  &__heading {
+    font-size: 1.1rem;
+  }
+
+  &__help {
+    a {
+      text-decoration: underline;
+      text-underline-offset: 0.2rem;
+    }
+  }
+
+  // ── Payment method accordion ─────────────────────────────────────────────
+
+  &__method {
+    border-radius: 8px;
+    border: 1px solid #E7E9EF;
+    background: #FFF;
+    overflow: hidden;
+    background: #F6F8FA;
+    &--selected {
+      background-color: white;
+    }
+  }
+
+  // Header row: radio + icon(s) + name — full-width clickable label
+  &__method-header {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.9rem 1rem;
+    margin: 0;
+    cursor: pointer;
+    width: 100%;
+    font-weight: 600;
+    font-size: 0.95rem;
+  }
+
+  &__radio {
+    flex-shrink: 0;
+    width: 1.1rem;
+    height: 1.1rem;
+    accent-color: #000000;
+    cursor: pointer;
+  }
+
+  &__method-name {
+    flex: 1;
+  }
+
+  // Expanded card panel — no extra heading, just fields
+  &__card-panel {
+    padding: 0 1rem 1rem;
+    background: #fff;
+  }
+
+  // Icon badges for Google Pay / PayPal
+  &__method-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 4px;
+    color: #fff;
+    font-weight: 800;
+    font-size: 0.7rem;
+    flex-shrink: 0;
+
+    &--gpay {
+      background: #4285f4;
+    }
+
+    &--paypal {
+      background: #003087;
+    }
+  }
+
+  .payment__field--country {
+      select {
+        border-radius: 5px;
+        border: 1px solid #E6E6E6;
+        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.03);
+      }
+    }
+
+  // ── Submit button ────────────────────────────────────────────────────────
+  &__submit {
+    border-radius: 2rem;
+    font-weight: 700;
+    padding: 0.75rem 1.5rem;
+  }
+
+  &__terms {
+    line-height: 1.6;
+  }
+}
+
+@media (--pgn-size-breakpoint-min-width-lg) {
+  .payment-form { 
+    padding: 32px;
+  }
+}

package/dist/styles/components/statusScreens.scss

@@ -0,0 +1,29 @@
+// styles/components/successScreen.scss
+
+.success-screen {
+  &__headline {
+    font-size: clamp(1.6rem, 3vw, 2.2rem);
+    color: #1a3a2a; // dark green as in design
+  }
+
+  &__ctas {
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  &__cta-primary {
+    border-radius: 2rem;
+    font-weight: 700;
+    padding: 0.65rem 1.5rem;
+  }
+
+  &__benefits {
+    list-style: disc;
+    padding-left: 1.25rem;
+
+    li {
+      color: var(--gray-700, #495057);
+      line-height: 1.6;
+    }
+  }
+}

package/dist/types.d.ts

@@ -0,0 +1,222 @@
+import type { Status, Phase } from './constants';
+export type { Status, Phase };
+export interface TwouCustomerContact {
+    email?: string;
+}
+export interface TwouCustomerParty {
+    paName: string;
+    indFirstName?: string;
+    indLastName?: string;
+    paContacts: {
+        edges: {
+            node: TwouCustomerContact;
+        }[];
+    };
+}
+export interface TwouCustomer {
+    uid: string;
+    parId: string;
+    parParty: TwouCustomerParty;
+}
+export type GqlRunner = (query: string, variables?: Record<string, unknown>, retry?: boolean) => Promise<any>;
+export interface Cart {
+    biId: string;
+    uid: string;
+}
+export interface CartIds {
+    customerUid: string;
+    salableUid: string;
+    billingPlanUid: string;
+}
+export type BillingCycle = 'monthly' | 'annual';
+export type BillingPeriod = 'MONTHLY' | 'ANNUAL' | 'QUARTERLY' | string;
+export interface BillingPlanOwnershipModel {
+    uid: string;
+    omName: string;
+}
+export interface BillingPlan {
+    uid: string;
+    stripePriceId: string;
+    /** Price amount e.g. "39.99" */
+    amount: string;
+    /** Currency code e.g. "USD" */
+    currency: string;
+    isTemplate: boolean;
+    ownershipModel: BillingPlanOwnershipModel;
+}
+export interface SubscriptionDetails {
+    biId: string;
+    trialStart: string | null;
+    trialEnd: string | null;
+    renewalType: string | null;
+    cardLast4: string | null;
+    cardBrand: string | null;
+    stripePaymentMethodId: string | null;
+    planName: string | null;
+}
+export interface CurrentUserSubscriberResult {
+    isSubscriber: boolean;
+    subscriptionBiId: string | null;
+    status: string | null;
+    subscriptionStartDate: string | null;
+    currentPeriodEnd: string | null;
+}
+/** Course shown on checkout / post-checkout when arriving via ?course_run_key=. */
+export interface CourseDetail {
+    maId: string;
+    maName: string;
+    maDescription: string | null;
+    tShortDescription: string | null;
+    imageUrl: string | null;
+    tCourseKey: string | null;
+    tBrandText: string | null;
+    tPrimarySubjectArea: string | null;
+    tLevelType: string | null;
+    tLanguage: string | null;
+    tPacingType: string | null;
+    tDurationLow: number | null;
+    tDurationHigh: number | null;
+    tDurationUnit: string | null;
+    tEffortLow: number | null;
+    tEffortHigh: number | null;
+    tEffortUnit: string | null;
+    tUrlCourse: string | null;
+    tB2cSubscriptionInclusion: boolean | null;
+    tHasOfacRestrictions: boolean | null;
+    tCatalogActive: boolean | null;
+}
+/** Returned by getBillingPlans — all available plans for the product. */
+export interface BillingPlansResult {
+    plans: BillingPlan[];
+}
+/** Returned by getSalableUid — the product uid and its ownership models. */
+export interface ProductInfo {
+    uid: string;
+    maName: string;
+    ownershipModels: {
+        uid: string;
+        omName: string;
+    }[];
+}
+export interface CartStatusResult {
+    status: Status | null;
+    stripeSubscriptionId: string | null;
+    lastComment: string;
+}
+export interface CartBillingAddress {
+    tFirstName: string;
+    tLastName: string;
+    upaLine1: string;
+    upaCity: string;
+    upaPostcode: string;
+    gadStateOrProvince: string;
+    gadCountry: {
+        iso2Code: string;
+    };
+}
+export interface UpdateCartItemArgs {
+    cartItemUid: string;
+    billingAddress?: CartBillingAddress;
+    paymentMethodId?: string;
+}
+/** Auto-renewal consent captured on TwouCart at checkout confirmation (SUBS-228). */
+export interface CheckoutConsent {
+    /** Main auto-renewal checkbox — always required at submit. */
+    tConsentRecurring: boolean;
+    /** UK/CA resident checkbox; null when that checkbox is not shown. */
+    tConsentUkCa: boolean | null;
+    /** ISO-8601 timestamp when consent was captured. */
+    tConsentAt: string;
+    /** Exact disclosure text shown to the learner (audit trail). */
+    tConsentText: string;
+}
+export interface UpdateCartConsentArgs {
+    cartUid: string;
+    consent: CheckoutConsent;
+}
+export interface BillingInfo {
+    firstName: string;
+    lastName: string;
+    city: string;
+    zip: string;
+    country: string;
+    line1: string;
+    state: string;
+}
+export interface CheckoutClient {
+    gql: GqlRunner;
+    setToken: (token: string) => void;
+    createCart: (vars: CartIds) => Promise<Cart>;
+    getCartItem: (biId: string) => Promise<{
+        cartUid: string;
+        cartItemUid: string;
+    }>;
+    updateCartItem: (args: UpdateCartItemArgs) => Promise<void>;
+    updateCartConsent: (args: UpdateCartConsentArgs) => Promise<void>;
+    placeOrder: (cartUid: string) => Promise<unknown>;
+    getCartStatus: (biId: string) => Promise<CartStatusResult>;
+    findSubscriptionBiId: (biId: string) => Promise<SubscriptionDetails | null>;
+    getSalableUid: (maId: string) => Promise<ProductInfo>;
+    getBillingPlans: () => Promise<BillingPlansResult>;
+    getActiveSubscriptions: () => Promise<{
+        active: number;
+    }>;
+    isCurrentUserSubscriber: () => Promise<CurrentUserSubscriberResult | null>;
+    getCourseDetail: (courseKey: string) => Promise<CourseDetail | null>;
+}
+export interface DevAuth {
+    iamUrl: string;
+    clientId: string;
+    clientSecret: string;
+}
+export interface StripeElementChangeEvent {
+    error?: {
+        message?: string;
+    };
+    [key: string]: unknown;
+}
+export interface StripeElementLike {
+    mount: (node: HTMLElement) => void;
+    on: (event: string, handler: (e: StripeElementChangeEvent) => void) => void;
+    unmount?: () => void;
+}
+export interface StripeElementsLike {
+    create: (type: string, options?: Record<string, unknown>) => StripeElementLike;
+}
+export interface StripeError {
+    message?: string;
+    code?: string;
+}
+export interface PaymentMethodResult {
+    paymentMethod?: {
+        id: string;
+    };
+    error?: StripeError;
+}
+export interface ConfirmResult {
+    error?: StripeError;
+    setupIntent?: unknown;
+    paymentIntent?: unknown;
+}
+export interface CreatePaymentMethodParams {
+    type: 'card';
+    card: StripeElementLike;
+    billing_details?: Record<string, unknown>;
+}
+export interface StripeLike {
+    elements: () => StripeElementsLike;
+    createPaymentMethod: (params: CreatePaymentMethodParams) => Promise<PaymentMethodResult>;
+    confirmCardSetup: (clientSecret: string) => Promise<ConfirmResult>;
+    confirmCardPayment: (clientSecret: string) => Promise<ConfirmResult>;
+}
+declare global {
+    interface Window {
+        Stripe?: (publishableKey: string) => StripeLike;
+    }
+}
+export interface TrialDateRange {
+    /** e.g. "June 22, 2026" */
+    displayStart: string;
+    /** e.g. "June 29, 2026" */
+    displayEnd: string;
+}