@edx/frontend-app-alacarte-checkout 1.0.0 → 1.2.0

package/dist/components/ExpressCheckout/Messages.js

@@ -0,0 +1,25 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    heading: {
+        id: 'checkout.expressCheckout.heading',
+        defaultMessage: 'Express checkout',
+        description: 'Heading for the express checkout section',
+    },
+    paypal: {
+        id: 'checkout.expressCheckout.paypal',
+        defaultMessage: 'PayPal',
+        description: 'Accessible label for the PayPal express checkout button',
+    },
+    applePay: {
+        id: 'checkout.expressCheckout.applePay',
+        defaultMessage: 'Apple Pay',
+        description: 'Accessible label for the Apple Pay express checkout button',
+    },
+    googlePay: {
+        id: 'checkout.expressCheckout.googlePay',
+        defaultMessage: 'Google Pay',
+        description: 'Accessible label for the Google Pay express checkout button',
+    },
+});
+export default messages;
+//# sourceMappingURL=Messages.js.map

package/dist/components/ExpressCheckout/Messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Messages.js","sourceRoot":"","sources":["../../../src/components/ExpressCheckout/Messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,OAAO,EAAE;QACP,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,0CAA0C;KACxD;IACD,MAAM,EAAE;QACN,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,QAAQ;QACxB,WAAW,EAAE,yDAAyD;KACvE;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,mCAAmC;QACvC,cAAc,EAAE,WAAW;QAC3B,WAAW,EAAE,4DAA4D;KAC1E;IACD,SAAS,EAAE;QACT,EAAE,EAAE,oCAAoC;QACxC,cAAc,EAAE,YAAY;QAC5B,WAAW,EAAE,6DAA6D;KAC3E;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  heading: {\n    id: 'checkout.expressCheckout.heading',\n    defaultMessage: 'Express checkout',\n    description: 'Heading for the express checkout section',\n  },\n  paypal: {\n    id: 'checkout.expressCheckout.paypal',\n    defaultMessage: 'PayPal',\n    description: 'Accessible label for the PayPal express checkout button',\n  },\n  applePay: {\n    id: 'checkout.expressCheckout.applePay',\n    defaultMessage: 'Apple Pay',\n    description: 'Accessible label for the Apple Pay express checkout button',\n  },\n  googlePay: {\n    id: 'checkout.expressCheckout.googlePay',\n    defaultMessage: 'Google Pay',\n    description: 'Accessible label for the Google Pay express checkout button',\n  },\n});\n\nexport default messages;\n"]}

package/dist/components/PaymentFields/PaymentFields.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Form } from '@openedx/paragon';
 import { STRIPE_FIELD_STYLE } from '../../constants';
 import { CardBrands } from '../BrandMarks/BrandMarks';
-const PaymentFields = ({ numberMountRef, expiryMountRef, cvcMountRef, cardError, }) => (_jsxs("div", { className: "payment--field", children: [_jsxs("div", { className: "d-flex flex-column mb-3 gap-4", children: [_jsxs(Form.Group, { controlId: "cardNumber", className: "mb-0 flex-grow-1", children: [_jsx(Form.Label, { className: "text-gray-900 m-0 x-small", children: "Card number" }), _jsxs("div", { className: "form-control", style: STRIPE_FIELD_STYLE, children: [_jsx("div", { ref: numberMountRef, className: "flex-grow-1" }), _jsx(CardBrands, {})] })] }), _jsxs("div", { className: "d-flex gap-4", children: [_jsxs(Form.Group, { controlId: "cardExpiry", className: "card__expiry mb-0 w-50", children: [_jsx(Form.Label, { className: "text-gray-900 m-0 x-small", children: "Expiration" }), _jsx("div", { className: "form-control", style: STRIPE_FIELD_STYLE, children: _jsx("div", { ref: expiryMountRef, className: "flex-grow-1" }) })] }), _jsxs(Form.Group, { controlId: "cardCvc", className: "card__cvc mb-0 w-50", children: [_jsx(Form.Label, { className: "text-gray-900 m-0 x-small", children: "CVC" }), _jsx("div", { className: "form-control", style: STRIPE_FIELD_STYLE, children: _jsx("div", { ref: cvcMountRef, className: "flex-grow-1" }) })] })] })] }), cardError && _jsx("p", { className: "text-danger small mb-2", children: cardError })] }));
+import creditCardCvc from './creditCardCvc.png';
+const PaymentFields = ({ numberMountRef, expiryMountRef, cvcMountRef, cardError, }) => (_jsxs("div", { className: "payment--field", children: [_jsxs("div", { className: "d-flex flex-column mb-3 gap-4", children: [_jsxs(Form.Group, { controlId: "cardNumber", className: "mb-0 flex-grow-1", children: [_jsx(Form.Label, { className: "payment--field__label text-gray-900", children: "Card number (16 digits)" }), _jsxs("div", { className: "form-control", style: STRIPE_FIELD_STYLE, children: [_jsx("div", { ref: numberMountRef, className: "flex-grow-1" }), _jsx(CardBrands, {})] })] }), _jsxs("div", { className: "d-flex gap-4", children: [_jsxs(Form.Group, { controlId: "cardExpiry", className: "card__expiry mb-0 w-50", children: [_jsx(Form.Label, { className: "payment--field__label text-gray-900", children: "Expiration (MM/YY)" }), _jsx("div", { className: "form-control", style: STRIPE_FIELD_STYLE, children: _jsx("div", { ref: expiryMountRef, className: "flex-grow-1" }) })] }), _jsxs(Form.Group, { controlId: "cardCvc", className: "card__cvc mb-0 w-50", children: [_jsx(Form.Label, { className: "payment--field__label text-gray-900", children: "CVC (3-4 digits)" }), _jsxs("div", { className: "form-control", style: STRIPE_FIELD_STYLE, children: [_jsx("div", { ref: cvcMountRef, className: "flex-grow-1" }), _jsx("img", { src: creditCardCvc, alt: "", width: 24, height: 24 })] })] })] })] }), cardError && _jsx("p", { className: "text-danger small mb-2", children: cardError })] }));
 export default PaymentFields;
 //# sourceMappingURL=PaymentFields.js.map

package/dist/components/PaymentFields/PaymentFields.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentFields.js","sourceRoot":"","sources":["../../../src/components/PaymentFields/PaymentFields.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAStD,MAAM,aAAa,GAAG,CAAC,EACrB,cAAc,EACd,cAAc,EACd,WAAW,EACX,SAAS,GACU,EAAE,EAAE,CAAC,CACxB,eAAK,SAAS,EAAC,gBAAgB,aAE7B,eAAK,SAAS,EAAC,+BAA+B,aAE5C,MAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,SAAS,EAAC,kBAAkB,aAC7D,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,2BAA2B,4BAEpC,EACb,eAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,kBAAkB,aACrD,cAAK,GAAG,EAAE,cAAc,EAAE,SAAS,EAAC,aAAa,GAAG,EACpD,KAAC,UAAU,KAAG,IACV,IACK,EAEb,eAAK,SAAS,EAAC,cAAc,aAE3B,MAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,SAAS,EAAC,wBAAwB,aACnE,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,2BAA2B,2BAEpC,EACb,cAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,kBAAkB,YACrD,cAAK,GAAG,EAAE,cAAc,EAAE,SAAS,EAAC,aAAa,GAAG,GAChD,IACK,EAGb,MAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,SAAS,EAAC,SAAS,EAAC,qBAAqB,aAC7D,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,2BAA2B,oBAAiB,EAClE,cAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,kBAAkB,YACrD,cAAK,GAAG,EAAE,WAAW,EAAE,SAAS,EAAC,aAAa,GAAG,GAC7C,IACK,IACT,IACF,EAEL,SAAS,IAAI,YAAG,SAAS,EAAC,wBAAwB,YAAE,SAAS,GAAK,IAC/D,CACP,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import React from 'react';\nimport type { Ref } from 'react';\nimport { Form } from '@openedx/paragon';\nimport { STRIPE_FIELD_STYLE } from '../../constants';\nimport { CardBrands } from '../BrandMarks/BrandMarks';\n\nexport interface PaymentFieldsProps {\n  numberMountRef: Ref<HTMLDivElement>,\n  expiryMountRef: Ref<HTMLDivElement>,\n  cvcMountRef: Ref<HTMLDivElement>,\n  cardError: string,\n}\n\nconst PaymentFields = ({\n  numberMountRef,\n  expiryMountRef,\n  cvcMountRef,\n  cardError,\n}: PaymentFieldsProps) => (\n  <div className=\"payment--field\">\n    {/* Single-row wrapper on desktop, stacked on mobile */}\n    <div className=\"d-flex flex-column mb-3 gap-4\">\n      {/* Card number — grows to fill available space */}\n      <Form.Group controlId=\"cardNumber\" className=\"mb-0 flex-grow-1\">\n        <Form.Label className=\"text-gray-900 m-0 x-small\">\n          Card number\n        </Form.Label>\n        <div className=\"form-control\" style={STRIPE_FIELD_STYLE}>\n          <div ref={numberMountRef} className=\"flex-grow-1\" />\n          <CardBrands />\n        </div>\n      </Form.Group>\n\n      <div className=\"d-flex gap-4\">\n        {/* Expiry — fixed width on desktop */}\n        <Form.Group controlId=\"cardExpiry\" className=\"card__expiry mb-0 w-50\">\n          <Form.Label className=\"text-gray-900 m-0 x-small\">\n            Expiration\n          </Form.Label>\n          <div className=\"form-control\" style={STRIPE_FIELD_STYLE}>\n            <div ref={expiryMountRef} className=\"flex-grow-1\" />\n          </div>\n        </Form.Group>\n\n        {/* CVC — fixed width on desktop */}\n        <Form.Group controlId=\"cardCvc\" className=\"card__cvc mb-0 w-50\">\n          <Form.Label className=\"text-gray-900 m-0 x-small\">CVC</Form.Label>\n          <div className=\"form-control\" style={STRIPE_FIELD_STYLE}>\n            <div ref={cvcMountRef} className=\"flex-grow-1\" />\n          </div>\n        </Form.Group>\n      </div>\n    </div>\n\n    {cardError && <p className=\"text-danger small mb-2\">{cardError}</p>}\n  </div>\n);\n\nexport default PaymentFields;\n"]}
+{"version":3,"file":"PaymentFields.js","sourceRoot":"","sources":["../../../src/components/PaymentFields/PaymentFields.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAShD,MAAM,aAAa,GAAG,CAAC,EACrB,cAAc,EACd,cAAc,EACd,WAAW,EACX,SAAS,GACU,EAAE,EAAE,CAAC,CACxB,eAAK,SAAS,EAAC,gBAAgB,aAE7B,eAAK,SAAS,EAAC,+BAA+B,aAE5C,MAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,SAAS,EAAC,kBAAkB,aAC7D,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,qCAAqC,wCAE9C,EACb,eAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,kBAAkB,aACrD,cAAK,GAAG,EAAE,cAAc,EAAE,SAAS,EAAC,aAAa,GAAG,EACpD,KAAC,UAAU,KAAG,IACV,IACK,EAEb,eAAK,SAAS,EAAC,cAAc,aAE3B,MAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,SAAS,EAAC,wBAAwB,aACnE,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,qCAAqC,mCAE9C,EACb,cAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,kBAAkB,YACrD,cAAK,GAAG,EAAE,cAAc,EAAE,SAAS,EAAC,aAAa,GAAG,GAChD,IACK,EAGb,MAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,SAAS,EAAC,SAAS,EAAC,qBAAqB,aAC7D,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,qCAAqC,iCAA8B,EACzF,eAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,kBAAkB,aACrD,cAAK,GAAG,EAAE,WAAW,EAAE,SAAS,EAAC,aAAa,GAAG,EACjD,cAAK,GAAG,EAAE,aAAa,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,IACrD,IACK,IACT,IACF,EAEL,SAAS,IAAI,YAAG,SAAS,EAAC,wBAAwB,YAAE,SAAS,GAAK,IAC/D,CACP,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import React from 'react';\nimport type { Ref } from 'react';\nimport { Form } from '@openedx/paragon';\nimport { STRIPE_FIELD_STYLE } from '../../constants';\nimport { CardBrands } from '../BrandMarks/BrandMarks';\nimport creditCardCvc from './creditCardCvc.png';\n\nexport interface PaymentFieldsProps {\n  numberMountRef: Ref<HTMLDivElement>,\n  expiryMountRef: Ref<HTMLDivElement>,\n  cvcMountRef: Ref<HTMLDivElement>,\n  cardError: string,\n}\n\nconst PaymentFields = ({\n  numberMountRef,\n  expiryMountRef,\n  cvcMountRef,\n  cardError,\n}: PaymentFieldsProps) => (\n  <div className=\"payment--field\">\n    {/* Single-row wrapper on desktop, stacked on mobile */}\n    <div className=\"d-flex flex-column mb-3 gap-4\">\n      {/* Card number — grows to fill available space */}\n      <Form.Group controlId=\"cardNumber\" className=\"mb-0 flex-grow-1\">\n        <Form.Label className=\"payment--field__label text-gray-900\">\n          Card number (16 digits)\n        </Form.Label>\n        <div className=\"form-control\" style={STRIPE_FIELD_STYLE}>\n          <div ref={numberMountRef} className=\"flex-grow-1\" />\n          <CardBrands />\n        </div>\n      </Form.Group>\n\n      <div className=\"d-flex gap-4\">\n        {/* Expiry — fixed width on desktop */}\n        <Form.Group controlId=\"cardExpiry\" className=\"card__expiry mb-0 w-50\">\n          <Form.Label className=\"payment--field__label text-gray-900\">\n            Expiration (MM/YY)\n          </Form.Label>\n          <div className=\"form-control\" style={STRIPE_FIELD_STYLE}>\n            <div ref={expiryMountRef} className=\"flex-grow-1\" />\n          </div>\n        </Form.Group>\n\n        {/* CVC — fixed width on desktop */}\n        <Form.Group controlId=\"cardCvc\" className=\"card__cvc mb-0 w-50\">\n          <Form.Label className=\"payment--field__label text-gray-900\">CVC (3-4 digits)</Form.Label>\n          <div className=\"form-control\" style={STRIPE_FIELD_STYLE}>\n            <div ref={cvcMountRef} className=\"flex-grow-1\" />\n            <img src={creditCardCvc} alt=\"\" width={24} height={24} />\n          </div>\n        </Form.Group>\n      </div>\n    </div>\n\n    {cardError && <p className=\"text-danger small mb-2\">{cardError}</p>}\n  </div>\n);\n\nexport default PaymentFields;\n"]}

package/dist/components/PaymentForm/Messages.d.ts

@@ -19,87 +19,27 @@ declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    card: {
+    payWithCard: {
         id: string;
         defaultMessage: string;
         description: string;
     };
-    googlePay: {
+    orderDisclaimer: {
         id: string;
         defaultMessage: string;
         description: string;
     };
-    paypal: {
+    total: {
         id: string;
         defaultMessage: string;
         description: string;
     };
-    termsNotice: {
+    totalAmount: {
         id: string;
         defaultMessage: string;
         description: string;
     };
-    termsNoticeAnnual: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    termsPricingMonthly: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    termsPricingAnnual: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    termsOfUse: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    refundPolicy: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    recurringConfirmMonthly: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    recurringConfirmAnnual: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    ukWithdrawalConfirm: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    canadaQuebecConfirm: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    confirmSubscription: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    continueWithPaypal: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    processing: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    loadingPayment: {
+    payNow: {
         id: string;
         defaultMessage: string;
         description: string;
@@ -109,7 +49,7 @@ declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    spinnerScreenReaderText: {
+    countryPlaceholder: {
         id: string;
         defaultMessage: string;
         description: string;

package/dist/components/PaymentForm/Messages.js

@@ -21,104 +21,42 @@ const messages = defineMessages({
         defaultMessage: 'Learner Help Center',
         description: 'Learner help center link text',
     },
-    // Payment method options
-    card: {
-        id: 'checkout.paymentForm.card',
-        defaultMessage: 'Card',
-        description: 'Credit/debit card payment method label',
-    },
-    googlePay: {
-        id: 'checkout.paymentForm.googlePay',
-        defaultMessage: 'Google Pay',
-        description: 'Google Pay payment method label',
-    },
-    paypal: {
-        id: 'checkout.paymentForm.paypal',
-        defaultMessage: 'PayPal',
-        description: 'PayPal payment method label',
-    },
-    // Terms
-    termsNotice: {
-        id: 'checkout.paymentForm.termsNotice',
-        defaultMessage: 'Your edX Plus subscription will start today with a {trialDays}-day free trial. Your subscription automatically renews on {date} for {pricing} (inclusive of applicable taxes). Cancel your subscription anytime from your dashboard. By clicking “Confirm subscription” you agree to our {termsLink}, and {refundLink}.',
-        description: 'Monthly subscription terms notice with free trial, shown before the confirm button',
-    },
-    termsNoticeAnnual: {
-        id: 'checkout.paymentForm.termsNoticeAnnual',
-        defaultMessage: 'Your edX Plus subscription will start today. You will be charged {pricing} today (inclusive of applicable taxes). Your subscription automatically renews annually. Cancel your subscription anytime from your dashboard. By clicking “Confirm subscription” you agree to our {termsLink}, and {refundLink}.',
-        description: 'Annual subscription terms notice without free trial, shown before the confirm button',
-    },
-    termsPricingMonthly: {
-        id: 'checkout.paymentForm.termsPricingMonthly',
-        defaultMessage: '${promoAmount}/mo for {promoMonths} months then ${regularAmount}/mo',
-        description: 'Monthly promotional pricing in the terms notice e.g. $39/mo for 3 months then $59/mo',
-    },
-    termsPricingAnnual: {
-        id: 'checkout.paymentForm.termsPricingAnnual',
-        defaultMessage: '${amount}/{frequency}',
-        description: 'Annual plan pricing in the terms notice e.g. $299/year — no promotional pricing',
-    },
-    termsOfUse: {
-        id: 'checkout.paymentForm.termsOfUse',
-        defaultMessage: 'Terms of Use',
-        description: 'Terms of Use link text',
-    },
-    refundPolicy: {
-        id: 'checkout.paymentForm.refundPolicy',
-        defaultMessage: 'Refund Policy',
-        description: 'Refund Policy link text',
-    },
-    // Checkboxes
-    recurringConfirmMonthly: {
-        id: 'checkout.paymentForm.recurringConfirmMonthly',
-        defaultMessage: 'I agree to enroll in a recurring monthly subscription for ${promoAmount}/mo for {promoMonths} months then ${regularAmount}/mo USD.',
-        description: 'Monthly checkbox confirming recurring charge with promo then regular price',
-    },
-    recurringConfirmAnnual: {
-        id: 'checkout.paymentForm.recurringConfirmAnnual',
-        defaultMessage: 'I agree to enroll in a recurring monthly subscription for ${amount}/yr USD.',
-        description: 'Annual checkbox confirming recurring charge',
-    },
-    ukWithdrawalConfirm: {
-        id: 'checkout.paymentForm.ukWithdrawalConfirm',
-        defaultMessage: 'I hereby consent to immediate performance of the contract and acknowledge that I will lose my right of withdrawal from the contract once the download or streaming of the digital content has begun.',
-        description: 'UK consent to immediate performance of the contract and loss of withdrawal rights',
-    },
-    canadaQuebecConfirm: {
-        id: 'checkout.paymentForm.canadaQuebecConfirm',
-        defaultMessage: 'I hereby verify I am not a resident of Quebec province',
-        description: 'Canadian consent verifying that the customer is not a resident of Quebec province',
+    payWithCard: {
+        id: 'checkout.paymentForm.payWithCard',
+        defaultMessage: 'Pay with card',
+        description: 'Heading for the card payment fields',
+    },
+    // Order total
+    orderDisclaimer: {
+        id: 'checkout.paymentForm.orderDisclaimer',
+        defaultMessage: 'The above total includes any applicable taxes. After you complete your order you will be automatically enrolled in the verified track of the course.',
+        description: 'Disclaimer shown above the order total explaining taxes and enrollment',
+    },
+    total: {
+        id: 'checkout.paymentForm.total',
+        defaultMessage: 'Total:',
+        description: 'Label for the order total amount',
+    },
+    totalAmount: {
+        id: 'checkout.paymentForm.totalAmount',
+        defaultMessage: '${amount} {currency}',
+        description: 'Formatted order total with currency code e.g. $219.00 USD',
     },
     // Submit button
-    confirmSubscription: {
-        id: 'checkout.paymentForm.confirmSubscription',
-        defaultMessage: 'Confirm subscription',
+    payNow: {
+        id: 'checkout.paymentForm.payNow',
+        defaultMessage: 'Pay now',
         description: 'Submit button label',
     },
-    continueWithPaypal: {
-        id: 'checkout.paymentForm.continueWithPaypal',
-        defaultMessage: 'Continue with PayPal',
-        description: 'Submit button label when PayPal is the selected payment method',
-    },
-    processing: {
-        id: 'checkout.paymentForm.processing',
-        defaultMessage: 'Confirming Subscription',
-        description: 'Submit button label while the subscription is being confirmed',
-    },
-    loadingPayment: {
-        id: 'checkout.paymentForm.loadingPayment',
-        defaultMessage: 'Loading payment…',
-        description: 'Submit button label while Stripe loads',
-    },
     country: {
         id: 'checkout.paymentForm.country',
         defaultMessage: 'Country',
         description: 'Country selector label',
     },
-    spinnerScreenReaderText: {
-        id: 'checkout.paymentForm.spinnerScreenReaderText',
-        defaultMessage: 'Working',
-        description: 'Screen reader text for the loading spinner',
+    countryPlaceholder: {
+        id: 'checkout.paymentForm.countryPlaceholder',
+        defaultMessage: 'Select your country',
+        description: 'Placeholder option shown before a country is selected',
     },
 });
 export default messages;

package/dist/components/PaymentForm/Messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"Messages.js","sourceRoot":"","sources":["../../../src/components/PaymentForm/Messages.ts"],"names":[],"mappings":"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","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  // Section headings\n  selectPaymentMethod: {\n    id: 'checkout.paymentForm.selectPaymentMethod',\n    defaultMessage: 'Select Payment Method',\n    description: 'Heading for the payment method selection section',\n  },\n  needAssistance: {\n    id: 'checkout.paymentForm.needAssistance',\n    defaultMessage: 'Need assistance?',\n    description: 'Help text heading',\n  },\n  needAssistanceBody: {\n    id: 'checkout.paymentForm.needAssistanceBody',\n    defaultMessage: 'Visit the {link} to review purchase and refund policies.',\n    description: 'Help text with learner help center link',\n  },\n  learnerHelpCenter: {\n    id: 'checkout.paymentForm.learnerHelpCenter',\n    defaultMessage: 'Learner Help Center',\n    description: 'Learner help center link text',\n  },\n\n  // Payment method options\n  card: {\n    id: 'checkout.paymentForm.card',\n    defaultMessage: 'Card',\n    description: 'Credit/debit card payment method label',\n  },\n  googlePay: {\n    id: 'checkout.paymentForm.googlePay',\n    defaultMessage: 'Google Pay',\n    description: 'Google Pay payment method label',\n  },\n  paypal: {\n    id: 'checkout.paymentForm.paypal',\n    defaultMessage: 'PayPal',\n    description: 'PayPal payment method label',\n  },\n\n  // Terms\n  termsNotice: {\n    id: 'checkout.paymentForm.termsNotice',\n    defaultMessage: 'Your edX Plus subscription will start today with a {trialDays}-day free trial. Your subscription automatically renews on {date} for {pricing} (inclusive of applicable taxes). Cancel your subscription anytime from your dashboard. By clicking “Confirm subscription” you agree to our {termsLink}, and {refundLink}.',\n    description: 'Monthly subscription terms notice with free trial, shown before the confirm button',\n  },\n  termsNoticeAnnual: {\n    id: 'checkout.paymentForm.termsNoticeAnnual',\n    defaultMessage: 'Your edX Plus subscription will start today. You will be charged {pricing} today (inclusive of applicable taxes). Your subscription automatically renews annually. Cancel your subscription anytime from your dashboard. By clicking “Confirm subscription” you agree to our {termsLink}, and {refundLink}.',\n    description: 'Annual subscription terms notice without free trial, shown before the confirm button',\n  },\n  termsPricingMonthly: {\n    id: 'checkout.paymentForm.termsPricingMonthly',\n    defaultMessage: '${promoAmount}/mo for {promoMonths} months then ${regularAmount}/mo',\n    description: 'Monthly promotional pricing in the terms notice e.g. $39/mo for 3 months then $59/mo',\n  },\n  termsPricingAnnual: {\n    id: 'checkout.paymentForm.termsPricingAnnual',\n    defaultMessage: '${amount}/{frequency}',\n    description: 'Annual plan pricing in the terms notice e.g. $299/year — no promotional pricing',\n  },\n  termsOfUse: {\n    id: 'checkout.paymentForm.termsOfUse',\n    defaultMessage: 'Terms of Use',\n    description: 'Terms of Use link text',\n  },\n  refundPolicy: {\n    id: 'checkout.paymentForm.refundPolicy',\n    defaultMessage: 'Refund Policy',\n    description: 'Refund Policy link text',\n  },\n\n  // Checkboxes\n  recurringConfirmMonthly: {\n    id: 'checkout.paymentForm.recurringConfirmMonthly',\n    defaultMessage: 'I agree to enroll in a recurring monthly subscription for ${promoAmount}/mo for {promoMonths} months then ${regularAmount}/mo USD.',\n    description: 'Monthly checkbox confirming recurring charge with promo then regular price',\n  },\n  recurringConfirmAnnual: {\n    id: 'checkout.paymentForm.recurringConfirmAnnual',\n    defaultMessage: 'I agree to enroll in a recurring monthly subscription for ${amount}/yr USD.',\n    description: 'Annual checkbox confirming recurring charge',\n  },\n  ukWithdrawalConfirm: {\n    id: 'checkout.paymentForm.ukWithdrawalConfirm',\n    defaultMessage: 'I hereby consent to immediate performance of the contract and acknowledge that I will lose my right of withdrawal from the contract once the download or streaming of the digital content has begun.',\n    description: 'UK consent to immediate performance of the contract and loss of withdrawal rights',\n  },\n  canadaQuebecConfirm: {\n    id: 'checkout.paymentForm.canadaQuebecConfirm',\n    defaultMessage: 'I hereby verify I am not a resident of Quebec province',\n    description: 'Canadian consent verifying that the customer is not a resident of Quebec province',\n  },\n\n  // Submit button\n  confirmSubscription: {\n    id: 'checkout.paymentForm.confirmSubscription',\n    defaultMessage: 'Confirm subscription',\n    description: 'Submit button label',\n  },\n  continueWithPaypal: {\n    id: 'checkout.paymentForm.continueWithPaypal',\n    defaultMessage: 'Continue with PayPal',\n    description: 'Submit button label when PayPal is the selected payment method',\n  },\n  processing: {\n    id: 'checkout.paymentForm.processing',\n    defaultMessage: 'Confirming Subscription',\n    description: 'Submit button label while the subscription is being confirmed',\n  },\n  loadingPayment: {\n    id: 'checkout.paymentForm.loadingPayment',\n    defaultMessage: 'Loading payment…',\n    description: 'Submit button label while Stripe loads',\n  },\n  country: {\n    id: 'checkout.paymentForm.country',\n    defaultMessage: 'Country',\n    description: 'Country selector label',\n  },\n  spinnerScreenReaderText: {\n    id: 'checkout.paymentForm.spinnerScreenReaderText',\n    defaultMessage: 'Working',\n    description: 'Screen reader text for the loading spinner',\n  },\n});\n\nexport default messages;\n"]}
+{"version":3,"file":"Messages.js","sourceRoot":"","sources":["../../../src/components/PaymentForm/Messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,mBAAmB;IACnB,mBAAmB,EAAE;QACnB,EAAE,EAAE,0CAA0C;QAC9C,cAAc,EAAE,uBAAuB;QACvC,WAAW,EAAE,kDAAkD;KAChE;IACD,cAAc,EAAE;QACd,EAAE,EAAE,qCAAqC;QACzC,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,mBAAmB;KACjC;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,yCAAyC;QAC7C,cAAc,EAAE,0DAA0D;QAC1E,WAAW,EAAE,yCAAyC;KACvD;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,wCAAwC;QAC5C,cAAc,EAAE,qBAAqB;QACrC,WAAW,EAAE,+BAA+B;KAC7C;IAED,WAAW,EAAE;QACX,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,qCAAqC;KACnD;IAED,cAAc;IACd,eAAe,EAAE;QACf,EAAE,EAAE,sCAAsC;QAC1C,cAAc,EAAE,sJAAsJ;QACtK,WAAW,EAAE,wEAAwE;KACtF;IACD,KAAK,EAAE;QACL,EAAE,EAAE,4BAA4B;QAChC,cAAc,EAAE,QAAQ;QACxB,WAAW,EAAE,kCAAkC;KAChD;IACD,WAAW,EAAE;QACX,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,sBAAsB;QACtC,WAAW,EAAE,2DAA2D;KACzE;IAED,gBAAgB;IAChB,MAAM,EAAE;QACN,EAAE,EAAE,6BAA6B;QACjC,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,qBAAqB;KACnC;IACD,OAAO,EAAE;QACP,EAAE,EAAE,8BAA8B;QAClC,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,wBAAwB;KACtC;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,yCAAyC;QAC7C,cAAc,EAAE,qBAAqB;QACrC,WAAW,EAAE,uDAAuD;KACrE;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  // Section headings\n  selectPaymentMethod: {\n    id: 'checkout.paymentForm.selectPaymentMethod',\n    defaultMessage: 'Select Payment Method',\n    description: 'Heading for the payment method selection section',\n  },\n  needAssistance: {\n    id: 'checkout.paymentForm.needAssistance',\n    defaultMessage: 'Need assistance?',\n    description: 'Help text heading',\n  },\n  needAssistanceBody: {\n    id: 'checkout.paymentForm.needAssistanceBody',\n    defaultMessage: 'Visit the {link} to review purchase and refund policies.',\n    description: 'Help text with learner help center link',\n  },\n  learnerHelpCenter: {\n    id: 'checkout.paymentForm.learnerHelpCenter',\n    defaultMessage: 'Learner Help Center',\n    description: 'Learner help center link text',\n  },\n\n  payWithCard: {\n    id: 'checkout.paymentForm.payWithCard',\n    defaultMessage: 'Pay with card',\n    description: 'Heading for the card payment fields',\n  },\n\n  // Order total\n  orderDisclaimer: {\n    id: 'checkout.paymentForm.orderDisclaimer',\n    defaultMessage: 'The above total includes any applicable taxes. After you complete your order you will be automatically enrolled in the verified track of the course.',\n    description: 'Disclaimer shown above the order total explaining taxes and enrollment',\n  },\n  total: {\n    id: 'checkout.paymentForm.total',\n    defaultMessage: 'Total:',\n    description: 'Label for the order total amount',\n  },\n  totalAmount: {\n    id: 'checkout.paymentForm.totalAmount',\n    defaultMessage: '${amount} {currency}',\n    description: 'Formatted order total with currency code e.g. $219.00 USD',\n  },\n\n  // Submit button\n  payNow: {\n    id: 'checkout.paymentForm.payNow',\n    defaultMessage: 'Pay now',\n    description: 'Submit button label',\n  },\n  country: {\n    id: 'checkout.paymentForm.country',\n    defaultMessage: 'Country',\n    description: 'Country selector label',\n  },\n  countryPlaceholder: {\n    id: 'checkout.paymentForm.countryPlaceholder',\n    defaultMessage: 'Select your country',\n    description: 'Placeholder option shown before a country is selected',\n  },\n});\n\nexport default messages;\n"]}

package/dist/components/PaymentForm/PaymentForm.d.ts

@@ -24,5 +24,5 @@ export interface PaymentFormProps {
     monthlyRegularAmount?: string;
     geolocationUrl?: string;
 }
-declare const PaymentForm: ({ billing, setField, numberMountRef, expiryMountRef, cvcMountRef, cardError, stripeReady, sessionReady, submitting, onPlaceOrder, priceToShow, cycleToShow, trialEnd, promoAmount, promoMonths, monthlyRegularAmount, geolocationUrl, }: PaymentFormProps) => import("react/jsx-runtime").JSX.Element;
+declare const PaymentForm: ({ billing, setField, numberMountRef, expiryMountRef, cvcMountRef, cardError, }: PaymentFormProps) => import("react/jsx-runtime").JSX.Element;
 export default PaymentForm;

package/dist/components/PaymentForm/PaymentForm.js

@@ -1,121 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Button, Form, Spinner } from '@openedx/paragon';
-import { useIntl, getAppConfig } from '@openedx/frontend-base';
+import { Button, Form } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
 import PaymentFields from '../PaymentFields/PaymentFields';
-import { appId, COUNTRIES_REQUIRING_EXTRA_CONFIRM, BILLING_COUNTRIES, } from '../../constants';
-import { fetchIpGeolocation, fetchPublicIp } from '../../utils/provision';
+import ExpressCheckout from '../ExpressCheckout/ExpressCheckout';
+import { BILLING_COUNTRIES } from '../../constants';
 import messages from './Messages';
-const PaymentForm = ({ billing, setField, numberMountRef, expiryMountRef, cvcMountRef, cardError, stripeReady, sessionReady, submitting, onPlaceOrder, priceToShow, cycleToShow, trialEnd, promoAmount = '39', promoMonths = 3, monthlyRegularAmount = '59', geolocationUrl, }) => {
-    var _a, _b;
+const PaymentForm = ({ billing, setField, numberMountRef, expiryMountRef, cvcMountRef, cardError, }) => {
     const { formatMessage } = useIntl();
-    const config = getAppConfig(appId);
-    const tosUrl = config.TOS_URL;
-    const refundPolicyUrl = config.REFUND_POLICY_URL;
-    const [paymentMethod, setPaymentMethod] = useState('card');
-    const [confirmed, setConfirmed] = useState(false);
-    const [extraConfirmed, setExtraConfirmed] = useState(false);
-    const showExtraConfirm = COUNTRIES_REQUIRING_EXTRA_CONFIRM.includes(billing.country);
-    const extraConfirmMessage = billing.country === 'CA'
-        ? messages.canadaQuebecConfirm
-        : messages.ukWithdrawalConfirm;
-    const extraConfirmId = billing.country === 'CA'
-        ? 'canadaQuebecConfirm'
-        : 'ukWithdrawalConfirm';
-    useEffect(() => {
-        if (!geolocationUrl)
-            return;
-        void fetchPublicIp()
-            .then((ipAddress) => fetchIpGeolocation(geolocationUrl, ipAddress))
-            .then((geolocation) => {
-            var _a;
-            const countryCode = (_a = geolocation.country_code) === null || _a === void 0 ? void 0 : _a.toUpperCase();
-            if (countryCode && BILLING_COUNTRIES.some(([code]) => code === countryCode)) {
-                setField('country', countryCode);
-            }
-        })
-            .catch(() => undefined);
-    }, [geolocationUrl, setField]);
-    const needsStripe = paymentMethod !== 'paypal';
-    const busy = submitting || (needsStripe && !stripeReady) || !sessionReady;
-    let buttonLabel = paymentMethod === 'paypal'
-        ? formatMessage(messages.continueWithPaypal)
-        : formatMessage(messages.confirmSubscription);
-    if (submitting)
-        buttonLabel = formatMessage(messages.processing);
-    else if (!sessionReady || (needsStripe && !stripeReady))
-        buttonLabel = formatMessage(messages.loadingPayment);
-    const isMonthly = cycleToShow === 'monthly';
-    const frequency = cycleToShow === 'annual' ? 'year' : 'month';
-    const trialDays = 7;
-    const pricing = isMonthly
-        ? formatMessage(messages.termsPricingMonthly, {
-            promoAmount,
-            promoMonths,
-            regularAmount: monthlyRegularAmount,
-        })
-        : formatMessage(messages.termsPricingAnnual, {
-            amount: (_a = priceToShow === null || priceToShow === void 0 ? void 0 : priceToShow.amount) !== null && _a !== void 0 ? _a : '',
-            frequency,
-        });
-    const recurringConfirmText = isMonthly
-        ? formatMessage(messages.recurringConfirmMonthly, {
-            promoAmount,
-            promoMonths,
-            regularAmount: monthlyRegularAmount,
-        })
-        : formatMessage(messages.recurringConfirmAnnual, {
-            amount: (_b = priceToShow === null || priceToShow === void 0 ? void 0 : priceToShow.amount) !== null && _b !== void 0 ? _b : '',
-        });
-    const termsNoticeValues = {
-        pricing,
-        termsLink: formatMessage(messages.termsOfUse),
-        refundLink: formatMessage(messages.refundPolicy),
-    };
-    const termsText = isMonthly
-        ? formatMessage(messages.termsNotice, Object.assign(Object.assign({}, termsNoticeValues), { trialDays, date: trialEnd !== null && trialEnd !== void 0 ? trialEnd : '{date}' }))
-        : formatMessage(messages.termsNoticeAnnual, termsNoticeValues);
-    const buildConsent = () => {
-        const consentParts = [termsText, recurringConfirmText];
-        if (showExtraConfirm) {
-            consentParts.push(formatMessage(extraConfirmMessage));
-        }
-        return {
-            tConsentRecurring: confirmed,
-            tConsentUkCa: showExtraConfirm ? extraConfirmed : null,
-            tConsentAt: new Date().toISOString(),
-            tConsentText: consentParts.join('\n\n'),
-        };
-    };
-    return (_jsxs("div", { className: "payment-form bg-white", children: [_jsx("h2", { className: "payment-form__heading font-weight-bold mb-3 text-primary-500", children: formatMessage(messages.selectPaymentMethod) }), _jsxs("p", { className: "payment-form__help small mb-4", children: [_jsx("strong", { className: "d-block text-primary-500", children: formatMessage(messages.needAssistance) }), ' ', _jsx("span", { className: "text-gray-700", children: formatMessage(messages.needAssistanceBody, {
-                            link: (_jsx("a", { href: "https://support.edx.org", target: "_blank", rel: "noreferrer", className: "text-gray-700", children: formatMessage(messages.learnerHelpCenter) })),
-                        }) })] }), _jsxs("div", { className: "payment-form__methods mb-4", children: [_jsxs("div", { className: `payment-form__method${paymentMethod === 'card' ? ' payment-form__method--selected' : ''}`, children: [_jsxs("label", { htmlFor: "paymentMethod-card", className: "payment-form__method-header", children: [_jsx("input", { id: "paymentMethod-card", type: "radio", name: "paymentMethod", value: "card", checked: paymentMethod === 'card', onChange: () => setPaymentMethod('card'), className: "payment-form__radio" }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 4C0 3.46957 0.210714 2.96086 0.585786 2.58579C0.960859 2.21071 1.46957 2 2 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4H0ZM0 6V12C0 12.5304 0.210714 13.0391 0.585786 13.4142C0.960859 13.7893 1.46957 14 2 14H14C14.5304 14 15.0391 13.7893 15.4142 13.4142C15.7893 13.0391 16 12.5304 16 12V6H0ZM3 11C3 10.7348 3.10536 10.4804 3.29289 10.2929C3.48043 10.1054 3.73478 10 4 10H5C5.26522 10 5.51957 10.1054 5.70711 10.2929C5.89464 10.4804 6 10.7348 6 11C6 11.2652 5.89464 11.5196 5.70711 11.7071C5.51957 11.8946 5.26522 12 5 12H4C3.73478 12 3.48043 11.8946 3.29289 11.7071C3.10536 11.5196 3 11.2652 3 11Z", fill: "#0270DE" }) }), _jsx("span", { className: "payment-form__method-name text-info-500", children: formatMessage(messages.card) })] }), _jsxs("div", { className: `payment-form__card-panel${paymentMethod === 'card' ? '' : ' payment-form__card-panel--collapsed'}`, "aria-hidden": paymentMethod !== 'card', children: [_jsx(PaymentFields, { numberMountRef: numberMountRef, expiryMountRef: expiryMountRef, cvcMountRef: cvcMountRef, cardError: cardError }), _jsxs(Form.Group, { controlId: "country", className: "mt-3 mb-0 payment__field--country", children: [_jsx(Form.Label, { className: "small m-0 x-small", children: formatMessage(messages.country) }), _jsx(Form.Control, { as: "select", value: billing.country, onChange: (e) => {
-                                                    const selectedCountry = e.target.value;
-                                                    setField('country', selectedCountry);
-                                                    setExtraConfirmed(false);
-                                                }, children: BILLING_COUNTRIES.map((country) => {
-                                                    return (_jsx("option", { value: country[0], children: country[1] }, country[0]));
-                                                }) })] })] })] }), _jsx("div", { className: `my-3 payment-form__method payment-form__method--hidden${paymentMethod === 'googlepay' ? ' payment-form__method--selected' : ''}`, children: _jsxs("label", { htmlFor: "paymentMethod-googlepay", className: "payment-form__method-header", children: [_jsx("input", { id: "paymentMethod-googlepay", type: "radio", name: "paymentMethod", value: "googlepay", checked: paymentMethod === 'googlepay', onChange: () => setPaymentMethod('googlepay'), className: "payment-form__radio" }), _jsx("span", { className: "payment-form__method-icon payment-form__method-icon--gpay", "aria-hidden": "true", children: "G" }), _jsx("span", { className: "payment-form__method-name", children: formatMessage(messages.googlePay) })] }) }), _jsx("div", { className: `my-3 payment-form__method${paymentMethod === 'paypal' ? ' payment-form__method--selected' : ''}`, children: _jsxs("label", { htmlFor: "paymentMethod-paypal", className: "payment-form__method-header", children: [_jsx("input", { id: "paymentMethod-paypal", type: "radio", name: "paymentMethod", value: "paypal", checked: paymentMethod === 'paypal', onChange: () => setPaymentMethod('paypal'), className: "payment-form__radio" }), _jsx("span", { className: "payment-form__method-icon payment-form__method-icon--paypal", "aria-hidden": "true", children: "P" }), _jsx("span", { className: "payment-form__method-name", children: formatMessage(messages.paypal) })] }) })] }), _jsx("p", { className: "payment-form__terms text-gray-700 mb-3", children: isMonthly
-                    ? formatMessage(messages.termsNotice, {
-                        trialDays,
-                        date: trialEnd !== null && trialEnd !== void 0 ? trialEnd : '{date}',
-                        pricing,
-                        termsLink: (_jsx("a", { className: "text-gray-700", href: tosUrl, children: formatMessage(messages.termsOfUse) })),
-                        refundLink: (_jsx("a", { className: "text-gray-700", href: refundPolicyUrl, children: formatMessage(messages.refundPolicy) })),
-                    })
-                    : formatMessage(messages.termsNoticeAnnual, {
-                        pricing,
-                        termsLink: (_jsx("a", { className: "text-gray-700", href: tosUrl, children: formatMessage(messages.termsOfUse) })),
-                        refundLink: (_jsx("a", { className: "text-gray-700", href: refundPolicyUrl, children: formatMessage(messages.refundPolicy) })),
-                    }) }), _jsx(Form.Group, { controlId: "recurringConfirm", className: "mb-3 payment-form__confirm", children: _jsx(Form.Checkbox, { id: "recurringConfirm", checked: confirmed, onChange: (e) => setConfirmed(e.target.checked), children: _jsx("span", { className: "text-gray-700 payment-form__confirm-label", children: recurringConfirmText }) }) }), showExtraConfirm && (_jsx(Form.Group, { controlId: extraConfirmId, className: "mb-4 payment-form__confirm", children: _jsx(Form.Checkbox, { id: extraConfirmId, checked: extraConfirmed, onChange: (e) => setExtraConfirmed(e.target.checked), children: _jsx("span", { className: "text-gray-700 payment-form__confirm-label", children: formatMessage(extraConfirmMessage) }) }) })), _jsxs(Button, { variant: "brand", className: "payment-form__submit", onClick: () => {
-                    if (paymentMethod !== 'googlepay') {
-                        onPlaceOrder(buildConsent(), paymentMethod);
-                    }
-                }, disabled: (needsStripe && !stripeReady)
-                    || submitting
-                    || !confirmed
-                    || paymentMethod === 'googlepay'
-                    || (showExtraConfirm && !extraConfirmed), children: [busy && (_jsx(Spinner, { animation: "border", size: "sm", className: "mr-2", screenReaderText: formatMessage(messages.spinnerScreenReaderText) })), buttonLabel] })] }));
+    // TODO: replace with the real order total and currency once wired to checkout state.
+    const totalAmount = '219.00';
+    const totalCurrency = 'USD';
+    return (_jsxs("div", { className: "payment-form bg-white", children: [_jsxs("div", { children: [_jsx("h2", { className: "payment-form__heading font-weight-bold mb-3 text-primary-500", children: formatMessage(messages.selectPaymentMethod) }), _jsxs("p", { className: "payment-form__help small mb-0", children: [_jsx("strong", { className: "d-block text-primary-500", children: formatMessage(messages.needAssistance) }), ' ', _jsx("span", { className: "text-gray-700 gap-y-2", children: formatMessage(messages.needAssistanceBody, {
+                                    link: (_jsx("a", { href: "https://support.edx.org", target: "_blank", rel: "noreferrer", className: "text-gray-700", children: formatMessage(messages.learnerHelpCenter) })),
+                                }) })] })] }), _jsx(ExpressCheckout, {}), _jsx("div", { className: "payment-form__methods", children: _jsx("div", { className: "payment-form__method payment-form__method--selected", children: _jsxs("div", { className: "payment-form__card-panel", children: [_jsx("h3", { className: "payment-form__card-heading font-weight-bold text-center text-primary-500 mb-3", children: formatMessage(messages.payWithCard) }), _jsx(PaymentFields, { numberMountRef: numberMountRef, expiryMountRef: expiryMountRef, cvcMountRef: cvcMountRef, cardError: cardError }), _jsxs(Form.Group, { controlId: "country", className: "mt-3 mb-0 payment__field--country", children: [_jsx(Form.Label, { className: "payment--field__label text-gray-900", children: formatMessage(messages.country) }), _jsxs(Form.Control, { as: "select", value: billing.country, onChange: (e) => {
+                                            setField('country', e.target.value);
+                                        }, children: [_jsx("option", { value: "", disabled: true, hidden: true, children: formatMessage(messages.countryPlaceholder) }), BILLING_COUNTRIES.map((country) => {
+                                                return (_jsx("option", { value: country[0], children: country[1] }, country[0]));
+                                            })] })] })] }) }) }), _jsxs("div", { className: "payment-form__total", children: [_jsx("p", { className: "payment-form__total-disclaimer text-gray-700 mb-3", children: formatMessage(messages.orderDisclaimer) }), _jsxs("div", { className: "payment-form__total-row", children: [_jsxs("p", { className: "mb-0 text-gray-900", children: [_jsx("strong", { className: "payment-form__total-label", children: formatMessage(messages.total) }), ' ', _jsx("span", { className: "payment-form__total-value", children: formatMessage(messages.totalAmount, {
+                                            amount: totalAmount,
+                                            currency: totalCurrency,
+                                        }) })] }), _jsx(Button, { variant: "brand", className: "payment-form__submit", children: formatMessage(messages.payNow) })] })] })] }));
 };
 export default PaymentForm;
 //# sourceMappingURL=PaymentForm.js.map

package/dist/components/PaymentForm/PaymentForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentForm.js","sourceRoot":"","sources":["../../../src/components/PaymentForm/PaymentForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport type { Ref } from 'react';\nimport { Button, Form, Spinner } from '@openedx/paragon';\nimport { useIntl, getAppConfig } from '@openedx/frontend-base';\nimport PaymentFields from '../PaymentFields/PaymentFields';\nimport type { BillingInfo, CheckoutConsent, PaymentMethod, SupportedPaymentMethod } from '../../types';\nimport type { PlanPrice } from '../../utils/billingDetails';\nimport {\n  appId,\n  COUNTRIES_REQUIRING_EXTRA_CONFIRM,\n  BILLING_COUNTRIES,\n} from '../../constants';\nimport { fetchIpGeolocation, fetchPublicIp } from '../../utils/provision';\nimport messages from './Messages';\n\nexport interface PaymentFormProps {\n  billing: BillingInfo,\n  setField: (field: keyof BillingInfo, value: string) => void,\n  numberMountRef: Ref<HTMLDivElement>,\n  expiryMountRef: Ref<HTMLDivElement>,\n  cvcMountRef: Ref<HTMLDivElement>,\n  cardError: string,\n  stripeReady: boolean,\n  sessionReady: boolean,\n  submitting: boolean,\n  onPlaceOrder: (consent: CheckoutConsent, paymentMethod: SupportedPaymentMethod) => void,\n  priceToShow: PlanPrice | null,\n  cycleToShow: string,\n  trialEnd?: string,\n  userCountry?: string | null,\n  /** Promotional monthly price e.g. \"39\" — monthly plans only. */\n  promoAmount?: string,\n  /** Length of the promotional period in months. */\n  promoMonths?: number,\n  /** Regular monthly price after the promo period e.g. \"59\". */\n  monthlyRegularAmount?: string,\n  geolocationUrl?: string,\n}\n\nconst PaymentForm = ({\n  billing,\n  setField,\n  numberMountRef,\n  expiryMountRef,\n  cvcMountRef,\n  cardError,\n  stripeReady,\n  sessionReady,\n  submitting,\n  onPlaceOrder,\n  priceToShow,\n  cycleToShow,\n  trialEnd,\n  promoAmount = '39',\n  promoMonths = 3,\n  monthlyRegularAmount = '59',\n  geolocationUrl,\n}: PaymentFormProps) => {\n  const { formatMessage } = useIntl();\n  const config = getAppConfig(appId);\n  const tosUrl = config.TOS_URL as string;\n  const refundPolicyUrl = config.REFUND_POLICY_URL as string;\n  const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>('card');\n  const [confirmed, setConfirmed] = useState(false);\n  const [extraConfirmed, setExtraConfirmed] = useState(false);\n\n  const showExtraConfirm = COUNTRIES_REQUIRING_EXTRA_CONFIRM.includes(billing.country);\n  const extraConfirmMessage = billing.country === 'CA'\n    ? messages.canadaQuebecConfirm\n    : messages.ukWithdrawalConfirm;\n  const extraConfirmId = billing.country === 'CA'\n    ? 'canadaQuebecConfirm'\n    : 'ukWithdrawalConfirm';\n\n  useEffect(() => {\n    if (!geolocationUrl) return;\n\n    void fetchPublicIp()\n      .then((ipAddress) => fetchIpGeolocation(geolocationUrl, ipAddress))\n      .then((geolocation) => {\n        const countryCode = geolocation.country_code?.toUpperCase();\n        if (countryCode && BILLING_COUNTRIES.some(([code]) => code === countryCode)) {\n          setField('country', countryCode);\n        }\n      })\n      .catch(() => undefined);\n  }, [geolocationUrl, setField]);\n\n  const needsStripe = paymentMethod !== 'paypal';\n  const busy = submitting || (needsStripe && !stripeReady) || !sessionReady;\n\n  let buttonLabel = paymentMethod === 'paypal'\n    ? formatMessage(messages.continueWithPaypal)\n    : formatMessage(messages.confirmSubscription);\n  if (submitting) buttonLabel = formatMessage(messages.processing);\n  else if (!sessionReady || (needsStripe && !stripeReady)) buttonLabel = formatMessage(messages.loadingPayment);\n\n  const isMonthly = cycleToShow === 'monthly';\n  const frequency = cycleToShow === 'annual' ? 'year' : 'month';\n  const trialDays = 7;\n  const pricing = isMonthly\n    ? formatMessage(messages.termsPricingMonthly, {\n        promoAmount,\n        promoMonths,\n        regularAmount: monthlyRegularAmount,\n      })\n    : formatMessage(messages.termsPricingAnnual, {\n        amount: priceToShow?.amount ?? '',\n        frequency,\n      });\n  const recurringConfirmText = isMonthly\n    ? formatMessage(messages.recurringConfirmMonthly, {\n        promoAmount,\n        promoMonths,\n        regularAmount: monthlyRegularAmount,\n      })\n    : formatMessage(messages.recurringConfirmAnnual, {\n        amount: priceToShow?.amount ?? '',\n      });\n\n  const termsNoticeValues = {\n    pricing,\n    termsLink: formatMessage(messages.termsOfUse),\n    refundLink: formatMessage(messages.refundPolicy),\n  };\n\n  const termsText = isMonthly\n    ? formatMessage(messages.termsNotice, {\n        ...termsNoticeValues,\n        trialDays,\n        date: trialEnd ?? '{date}',\n      })\n    : formatMessage(messages.termsNoticeAnnual, termsNoticeValues);\n\n  const buildConsent = (): CheckoutConsent => {\n    const consentParts = [termsText, recurringConfirmText];\n    if (showExtraConfirm) {\n      consentParts.push(formatMessage(extraConfirmMessage));\n    }\n    return {\n      tConsentRecurring: confirmed,\n      tConsentUkCa: showExtraConfirm ? extraConfirmed : null,\n      tConsentAt: new Date().toISOString(),\n      tConsentText: consentParts.join('\\n\\n'),\n    };\n  };\n\n  return (\n    <div className=\"payment-form bg-white\">\n      <h2 className=\"payment-form__heading font-weight-bold mb-3 text-primary-500\">\n        {formatMessage(messages.selectPaymentMethod)}\n      </h2>\n\n      <p className=\"payment-form__help small mb-4\">\n        <strong className=\"d-block text-primary-500\">\n          {formatMessage(messages.needAssistance)}\n        </strong>{' '}\n        <span className=\"text-gray-700\">\n          {formatMessage(messages.needAssistanceBody, {\n            link: (\n              <a\n                href=\"https://support.edx.org\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                className=\"text-gray-700\"\n              >\n                {formatMessage(messages.learnerHelpCenter)}\n              </a>\n            ),\n          })}\n        </span>\n      </p>\n\n      {/* ── Payment method accordion ── */}\n      <div className=\"payment-form__methods mb-4\">\n        {/* ── Card ── */}\n        <div\n          className={`payment-form__method${paymentMethod === 'card' ? ' payment-form__method--selected' : ''}`}\n        >\n          {/* Header row — always visible */}\n          <label\n            htmlFor=\"paymentMethod-card\"\n            className=\"payment-form__method-header\"\n          >\n            <input\n              id=\"paymentMethod-card\"\n              type=\"radio\"\n              name=\"paymentMethod\"\n              value=\"card\"\n              checked={paymentMethod === 'card'}\n              onChange={() => setPaymentMethod('card')}\n              className=\"payment-form__radio\"\n            />\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M0 4C0 3.46957 0.210714 2.96086 0.585786 2.58579C0.960859 2.21071 1.46957 2 2 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4H0ZM0 6V12C0 12.5304 0.210714 13.0391 0.585786 13.4142C0.960859 13.7893 1.46957 14 2 14H14C14.5304 14 15.0391 13.7893 15.4142 13.4142C15.7893 13.0391 16 12.5304 16 12V6H0ZM3 11C3 10.7348 3.10536 10.4804 3.29289 10.2929C3.48043 10.1054 3.73478 10 4 10H5C5.26522 10 5.51957 10.1054 5.70711 10.2929C5.89464 10.4804 6 10.7348 6 11C6 11.2652 5.89464 11.5196 5.70711 11.7071C5.51957 11.8946 5.26522 12 5 12H4C3.73478 12 3.48043 11.8946 3.29289 11.7071C3.10536 11.5196 3 11.2652 3 11Z\"\n                fill=\"#0270DE\"\n              />\n            </svg>\n            <span className=\"payment-form__method-name text-info-500\">\n              {formatMessage(messages.card)}\n            </span>\n          </label>\n\n          {/* Keep Stripe host nodes mounted so Elements stay interactive after toggling methods. */}\n          <div\n            className={`payment-form__card-panel${paymentMethod === 'card' ? '' : ' payment-form__card-panel--collapsed'}`}\n            aria-hidden={paymentMethod !== 'card'}\n          >\n            <PaymentFields\n              numberMountRef={numberMountRef}\n              expiryMountRef={expiryMountRef}\n              cvcMountRef={cvcMountRef}\n              cardError={cardError}\n            />\n            <Form.Group\n              controlId=\"country\"\n              className=\"mt-3 mb-0 payment__field--country\"\n            >\n              <Form.Label className=\"small m-0 x-small\">\n                {formatMessage(messages.country)}\n              </Form.Label>\n              <Form.Control\n                as=\"select\"\n                value={billing.country}\n                onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {\n                  const selectedCountry = e.target.value;\n                  setField('country', selectedCountry);\n                  setExtraConfirmed(false);\n                }}\n              >\n                {BILLING_COUNTRIES.map((country) => {\n                  return (\n                    <option key={country[0]} value={country[0]}>\n                      {country[1]}\n                    </option>\n                  );\n                })}\n              </Form.Control>\n            </Form.Group>\n          </div>\n        </div>\n\n        {/* ── Google Pay (hidden for now) ── */}\n        <div\n          className={`my-3 payment-form__method payment-form__method--hidden${paymentMethod === 'googlepay' ? ' payment-form__method--selected' : ''}`}\n        >\n          <label\n            htmlFor=\"paymentMethod-googlepay\"\n            className=\"payment-form__method-header\"\n          >\n            <input\n              id=\"paymentMethod-googlepay\"\n              type=\"radio\"\n              name=\"paymentMethod\"\n              value=\"googlepay\"\n              checked={paymentMethod === 'googlepay'}\n              onChange={() => setPaymentMethod('googlepay')}\n              className=\"payment-form__radio\"\n            />\n            <span\n              className=\"payment-form__method-icon payment-form__method-icon--gpay\"\n              aria-hidden=\"true\"\n            >\n              G\n            </span>\n            <span className=\"payment-form__method-name\">\n              {formatMessage(messages.googlePay)}\n            </span>\n          </label>\n        </div>\n\n        {/* ── PayPal ── */}\n        <div\n          className={`my-3 payment-form__method${paymentMethod === 'paypal' ? ' payment-form__method--selected' : ''}`}\n        >\n          <label\n            htmlFor=\"paymentMethod-paypal\"\n            className=\"payment-form__method-header\"\n          >\n            <input\n              id=\"paymentMethod-paypal\"\n              type=\"radio\"\n              name=\"paymentMethod\"\n              value=\"paypal\"\n              checked={paymentMethod === 'paypal'}\n              onChange={() => setPaymentMethod('paypal')}\n              className=\"payment-form__radio\"\n            />\n            <span\n              className=\"payment-form__method-icon payment-form__method-icon--paypal\"\n              aria-hidden=\"true\"\n            >\n              P\n            </span>\n            <span className=\"payment-form__method-name\">\n              {formatMessage(messages.paypal)}\n            </span>\n          </label>\n        </div>\n      </div>\n\n      {/* ── Terms ── */}\n      <p className=\"payment-form__terms text-gray-700 mb-3\">\n        {isMonthly\n          ? formatMessage(messages.termsNotice, {\n              trialDays,\n              date: trialEnd ?? '{date}',\n              pricing,\n              termsLink: (\n                <a\n                  className=\"text-gray-700\"\n                  href={tosUrl}\n                >\n                  {formatMessage(messages.termsOfUse)}\n                </a>\n              ),\n              refundLink: (\n                <a\n                  className=\"text-gray-700\"\n                  href={refundPolicyUrl}\n                >\n                  {formatMessage(messages.refundPolicy)}\n                </a>\n              ),\n            })\n          : formatMessage(messages.termsNoticeAnnual, {\n              pricing,\n              termsLink: (\n                <a\n                  className=\"text-gray-700\"\n                  href={tosUrl}\n                >\n                  {formatMessage(messages.termsOfUse)}\n                </a>\n              ),\n              refundLink: (\n                <a\n                  className=\"text-gray-700\"\n                  href={refundPolicyUrl}\n                >\n                  {formatMessage(messages.refundPolicy)}\n                </a>\n              ),\n            })}\n      </p>\n\n      {/* ── Checkboxes ── */}\n      <Form.Group controlId=\"recurringConfirm\" className=\"mb-3 payment-form__confirm\">\n        <Form.Checkbox\n          id=\"recurringConfirm\"\n          checked={confirmed}\n          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n            setConfirmed(e.target.checked)}\n        >\n          <span className=\"text-gray-700 payment-form__confirm-label\">\n            {recurringConfirmText}\n          </span>\n        </Form.Checkbox>\n      </Form.Group>\n\n      {showExtraConfirm && (\n        <Form.Group controlId={extraConfirmId} className=\"mb-4 payment-form__confirm\">\n          <Form.Checkbox\n            id={extraConfirmId}\n            checked={extraConfirmed}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n              setExtraConfirmed(e.target.checked)}\n          >\n            <span className=\"text-gray-700 payment-form__confirm-label\">\n              {formatMessage(extraConfirmMessage)}\n            </span>\n          </Form.Checkbox>\n        </Form.Group>\n      )}\n\n      {/* ── Submit ── */}\n      <Button\n        variant=\"brand\"\n        className=\"payment-form__submit\"\n        onClick={() => {\n          if (paymentMethod !== 'googlepay') {\n            onPlaceOrder(buildConsent(), paymentMethod);\n          }\n        }}\n        disabled={\n          (needsStripe && !stripeReady)\n          || submitting\n          || !confirmed\n          || paymentMethod === 'googlepay'\n          || (showExtraConfirm && !extraConfirmed)\n        }\n      >\n        {busy && (\n          <Spinner\n            animation=\"border\"\n            size=\"sm\"\n            className=\"mr-2\"\n            screenReaderText={formatMessage(messages.spinnerScreenReaderText)}\n          />\n        )}\n        {buttonLabel}\n      </Button>\n    </div>\n  );\n};\n\nexport default PaymentForm;\n"]}
+{"version":3,"file":"PaymentForm.js","sourceRoot":"","sources":["../../../src/components/PaymentForm/PaymentForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { Ref } from 'react';\nimport { Button, Form } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport PaymentFields from '../PaymentFields/PaymentFields';\nimport ExpressCheckout from '../ExpressCheckout/ExpressCheckout';\nimport type { BillingInfo, CheckoutConsent, SupportedPaymentMethod } from '../../types';\nimport type { PlanPrice } from '../../utils/billingDetails';\nimport { BILLING_COUNTRIES } from '../../constants';\nimport messages from './Messages';\n\nexport interface PaymentFormProps {\n  billing: BillingInfo,\n  setField: (field: keyof BillingInfo, value: string) => void,\n  numberMountRef: Ref<HTMLDivElement>,\n  expiryMountRef: Ref<HTMLDivElement>,\n  cvcMountRef: Ref<HTMLDivElement>,\n  cardError: string,\n  stripeReady: boolean,\n  sessionReady: boolean,\n  submitting: boolean,\n  onPlaceOrder: (consent: CheckoutConsent, paymentMethod: SupportedPaymentMethod) => void,\n  priceToShow: PlanPrice | null,\n  cycleToShow: string,\n  trialEnd?: string,\n  userCountry?: string | null,\n  /** Promotional monthly price e.g. \"39\" — monthly plans only. */\n  promoAmount?: string,\n  /** Length of the promotional period in months. */\n  promoMonths?: number,\n  /** Regular monthly price after the promo period e.g. \"59\". */\n  monthlyRegularAmount?: string,\n  geolocationUrl?: string,\n}\n\nconst PaymentForm = ({\n  billing,\n  setField,\n  numberMountRef,\n  expiryMountRef,\n  cvcMountRef,\n  cardError,\n}: PaymentFormProps) => {\n  const { formatMessage } = useIntl();\n\n  // TODO: replace with the real order total and currency once wired to checkout state.\n  const totalAmount = '219.00';\n  const totalCurrency = 'USD';\n\n  return (\n    <div className=\"payment-form bg-white\">\n      <div>\n        <h2 className=\"payment-form__heading font-weight-bold mb-3 text-primary-500\">\n          {formatMessage(messages.selectPaymentMethod)}\n        </h2>\n\n        <p className=\"payment-form__help small mb-0\">\n          <strong className=\"d-block text-primary-500\">\n            {formatMessage(messages.needAssistance)}\n          </strong>{' '}\n          <span className=\"text-gray-700 gap-y-2\">\n            {formatMessage(messages.needAssistanceBody, {\n              link: (\n                <a\n                  href=\"https://support.edx.org\"\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  className=\"text-gray-700\"\n                >\n                  {formatMessage(messages.learnerHelpCenter)}\n                </a>\n              ),\n            })}\n          </span>\n        </p>\n      </div>\n\n      <ExpressCheckout />\n\n      {/* ── Payment method ── */}\n      <div className=\"payment-form__methods\">\n        <div className=\"payment-form__method payment-form__method--selected\">\n          <div className=\"payment-form__card-panel\">\n            <h3 className=\"payment-form__card-heading font-weight-bold text-center text-primary-500 mb-3\">\n              {formatMessage(messages.payWithCard)}\n            </h3>\n            <PaymentFields\n              numberMountRef={numberMountRef}\n              expiryMountRef={expiryMountRef}\n              cvcMountRef={cvcMountRef}\n              cardError={cardError}\n            />\n            <Form.Group\n              controlId=\"country\"\n              className=\"mt-3 mb-0 payment__field--country\"\n            >\n              <Form.Label className=\"payment--field__label text-gray-900\">\n                {formatMessage(messages.country)}\n              </Form.Label>\n              <Form.Control\n                as=\"select\"\n                value={billing.country}\n                onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {\n                  setField('country', e.target.value);\n                }}\n              >\n                <option value=\"\" disabled hidden>\n                  {formatMessage(messages.countryPlaceholder)}\n                </option>\n                {BILLING_COUNTRIES.map((country) => {\n                  return (\n                    <option key={country[0]} value={country[0]}>\n                      {country[1]}\n                    </option>\n                  );\n                })}\n              </Form.Control>\n            </Form.Group>\n          </div>\n        </div>\n      </div>\n\n      {/* ── Order total ── */}\n      <div className=\"payment-form__total\">\n        <p className=\"payment-form__total-disclaimer text-gray-700 mb-3\">\n          {formatMessage(messages.orderDisclaimer)}\n        </p>\n        <div className=\"payment-form__total-row\">\n          <p className=\"mb-0 text-gray-900\">\n            <strong className=\"payment-form__total-label\">{formatMessage(messages.total)}</strong>{' '}\n            <span className=\"payment-form__total-value\">\n              {formatMessage(messages.totalAmount, {\n                amount: totalAmount,\n                currency: totalCurrency,\n              })}\n            </span>\n          </p>\n          <Button\n            variant=\"brand\"\n            className=\"payment-form__submit\"\n          >\n            {formatMessage(messages.payNow)}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default PaymentForm;\n"]}

package/dist/components/PromoCode/Messages.d.ts

@@ -0,0 +1,28 @@
+declare const messages: {
+    banner: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    bannerInfo: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    placeholder: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    inputLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    apply: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;