@edx/frontend-app-subscription-checkout 1.3.0 → 1.5.0

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, { useState } from 'react';\nimport type { Ref } from 'react';\nimport { Button, Form, Spinner } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport PaymentFields from '../PaymentFields/PaymentFields';\nimport type { BillingInfo, CheckoutConsent } from '../../types';\nimport type { PlanPrice } from '../../utils/billingDetails';\nimport { COUNTRIES_REQUIRING_EXTRA_CONFIRM, COUNTRIES } from '../../constants';\nimport messages from './Messages';\n\ntype PaymentMethod = 'card' | 'googlepay' | 'paypal';\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) => void,\n  priceToShow: PlanPrice | null,\n  cycleToShow: string,\n  trialEnd?: string,\n  userCountry?: string | null,\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  userCountry,\n}: PaymentFormProps) => {\n  const { formatMessage } = useIntl();\n  const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>('card');\n  const [confirmed, setConfirmed] = useState(false);\n  const [ukCaConfirmed, setUkCaConfirmed] = useState(false);\n\n  const showExtraConfirm\n    = !!userCountry && COUNTRIES_REQUIRING_EXTRA_CONFIRM.includes(userCountry);\n\n  const busy = submitting || !stripeReady || !sessionReady;\n\n  let buttonLabel = formatMessage(messages.confirmSubscription);\n  if (submitting) buttonLabel = formatMessage(messages.processing);\n  else if (!sessionReady) buttonLabel = formatMessage(messages.loadingPayment);\n  else if (!stripeReady) buttonLabel = formatMessage(messages.loadingPayment);\n\n  const amount = priceToShow?.amount ?? '';\n  const frequency = cycleToShow === 'annual' ? 'year' : 'month';\n\n  const buildConsent = (): CheckoutConsent => {\n    const termsText = formatMessage(messages.termsNotice, {\n      renewalDate: trialEnd ?? '{date}',\n      price: amount,\n      frequency,\n      termsLink: formatMessage(messages.termsOfUse),\n      refundLink: formatMessage(messages.refundPolicy),\n    });\n    const recurringText = formatMessage(messages.recurringConfirm, {\n      cycle: cycleToShow,\n      price: amount,\n      frequency,\n    });\n    const consentParts = [termsText, recurringText];\n    if (showExtraConfirm) {\n      consentParts.push(formatMessage(messages.ukCaResidentConfirm));\n    }\n    return {\n      tConsentRecurring: confirmed,\n      tConsentUkCa: showExtraConfirm ? ukCaConfirmed : 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          {/* Expanded panel — only when selected */}\n          {paymentMethod === 'card' && (\n            <div className=\"payment-form__card-panel\">\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                    setField('country', e.target.value)}\n                >\n                  {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          )}\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 (hidden for now) ── */}\n        <div\n          className={`payment-form__method payment-form__method--hidden${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        {formatMessage(messages.termsNotice, {\n          renewalDate: trialEnd ?? '{date}',\n          price: amount,\n          frequency,\n          termsLink: (\n            <a\n              className=\"text-gray-700\"\n              href=\"/terms\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              {formatMessage(messages.termsOfUse)}\n            </a>\n          ),\n          refundLink: (\n            <a\n              className=\"text-gray-700\"\n              href=\"/refund-policy\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              {formatMessage(messages.refundPolicy)}\n            </a>\n          ),\n        })}\n      </p>\n\n      {/* ── Checkboxes ── */}\n      <Form.Group controlId=\"recurringConfirm\" className=\"mb-2\">\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\">\n            {formatMessage(messages.recurringConfirm, {\n              cycle: cycleToShow,\n              price: amount,\n              frequency,\n            })}\n          </span>\n        </Form.Checkbox>\n      </Form.Group>\n\n      {showExtraConfirm && (\n        <Form.Group controlId=\"ukCaConfirm\" className=\"mb-4\">\n          <Form.Checkbox\n            id=\"ukCaConfirm\"\n            checked={ukCaConfirmed}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n              setUkCaConfirmed(e.target.checked)}\n          >\n            <span className=\"text-gray-700\">\n              {formatMessage(messages.ukCaResidentConfirm)}\n            </span>\n          </Form.Checkbox>\n        </Form.Group>\n      )}\n\n      {/* ── Submit ── */}\n      <Button\n        variant=\"brand\"\n        className=\"payment-form__submit\"\n        onClick={() => onPlaceOrder(buildConsent())}\n        disabled={\n          !stripeReady\n          || submitting\n          || !confirmed\n          || (showExtraConfirm && !ukCaConfirmed)\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, { useState } from 'react';\nimport type { Ref } from 'react';\nimport { Button, Form, Spinner } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport PaymentFields from '../PaymentFields/PaymentFields';\nimport type { BillingInfo, CheckoutConsent } from '../../types';\nimport type { PlanPrice } from '../../utils/billingDetails';\nimport { COUNTRIES_REQUIRING_EXTRA_CONFIRM, BILLING_COUNTRIES } from '../../constants';\nimport messages from './Messages';\n\ntype PaymentMethod = 'card' | 'googlepay' | 'paypal';\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) => void,\n  priceToShow: PlanPrice | null,\n  cycleToShow: string,\n  trialEnd?: string,\n  userCountry?: string | null,\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  userCountry,\n}: PaymentFormProps) => {\n  const { formatMessage } = useIntl();\n  const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>('card');\n  const [confirmed, setConfirmed] = useState(false);\n  const [ukCaConfirmed, setUkCaConfirmed] = useState(false);\n\n  const showExtraConfirm\n    = !!userCountry && COUNTRIES_REQUIRING_EXTRA_CONFIRM.includes(userCountry);\n\n  const busy = submitting || !stripeReady || !sessionReady;\n\n  let buttonLabel = formatMessage(messages.confirmSubscription);\n  if (submitting) buttonLabel = formatMessage(messages.processing);\n  else if (!sessionReady) buttonLabel = formatMessage(messages.loadingPayment);\n  else if (!stripeReady) buttonLabel = formatMessage(messages.loadingPayment);\n\n  const amount = priceToShow?.amount ?? '';\n  const frequency = cycleToShow === 'annual' ? 'year' : 'month';\n\n  const buildConsent = (): CheckoutConsent => {\n    const termsText = formatMessage(messages.termsNotice, {\n      renewalDate: trialEnd ?? '{date}',\n      price: amount,\n      frequency,\n      termsLink: formatMessage(messages.termsOfUse),\n      refundLink: formatMessage(messages.refundPolicy),\n    });\n    const recurringText = formatMessage(messages.recurringConfirm, {\n      cycle: cycleToShow,\n      price: amount,\n      frequency,\n    });\n    const consentParts = [termsText, recurringText];\n    if (showExtraConfirm) {\n      consentParts.push(formatMessage(messages.ukCaResidentConfirm));\n    }\n    return {\n      tConsentRecurring: confirmed,\n      tConsentUkCa: showExtraConfirm ? ukCaConfirmed : 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                  setField('country', e.target.value)}\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 (UI only; backend wiring pending) ── */}\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        {formatMessage(messages.termsNotice, {\n          renewalDate: trialEnd ?? '{date}',\n          price: amount,\n          frequency,\n          termsLink: (\n            <a\n              className=\"text-gray-700\"\n              href=\"/terms\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              {formatMessage(messages.termsOfUse)}\n            </a>\n          ),\n          refundLink: (\n            <a\n              className=\"text-gray-700\"\n              href=\"/refund-policy\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              {formatMessage(messages.refundPolicy)}\n            </a>\n          ),\n        })}\n      </p>\n\n      {/* ── Checkboxes ── */}\n      <Form.Group controlId=\"recurringConfirm\" className=\"mb-2\">\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\">\n            {formatMessage(messages.recurringConfirm, {\n              cycle: cycleToShow,\n              price: amount,\n              frequency,\n            })}\n          </span>\n        </Form.Checkbox>\n      </Form.Group>\n\n      {showExtraConfirm && (\n        <Form.Group controlId=\"ukCaConfirm\" className=\"mb-4\">\n          <Form.Checkbox\n            id=\"ukCaConfirm\"\n            checked={ukCaConfirmed}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n              setUkCaConfirmed(e.target.checked)}\n          >\n            <span className=\"text-gray-700\">\n              {formatMessage(messages.ukCaResidentConfirm)}\n            </span>\n          </Form.Checkbox>\n        </Form.Group>\n      )}\n\n      {/* ── Submit ── */}\n      <Button\n        variant=\"brand\"\n        className=\"payment-form__submit\"\n        onClick={() => onPlaceOrder(buildConsent())}\n        disabled={\n          !stripeReady\n          || submitting\n          || !confirmed\n          || paymentMethod === 'paypal'\n          || (showExtraConfirm && !ukCaConfirmed)\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"]}

package/dist/constants.d.ts

@@ -44,7 +44,8 @@ export declare const ALLOWED_CHECKOUT_COUNTRIES: readonly string[];
  * Add or remove codes here to control which residents see the second checkbox.
  */
 export declare const COUNTRIES_REQUIRING_EXTRA_CONFIRM: readonly string[];
-export declare const COUNTRIES: readonly (readonly [string, string])[];
+/** Billing country dropdown options. Swap back to COUNTRIES when expanding internationally. */
+export declare const BILLING_COUNTRIES: readonly (readonly [string, string])[];
 export declare const STRIPE_FIELD_STYLE: CSSProperties;
 export declare const STRIPE_ELEMENT_OPTS: {
     style: {

package/dist/constants.js

@@ -49,7 +49,8 @@ export const DEFAULTS = {
     confirmIntentUrl: '/api/stripe/confirm-pi',
     customerUid: '019d2bde-f769-743d-88f9-8bf0d1a7a002',
     salableUid: '019d2ce7-05bc-7dd6-b141-e32df9ac86c1',
-    billingPlanUid: '019d2ce7-05c0-7188-81b0-8eb747b41b0f',
+    // Monthly Subscription template uid (not Annual)
+    billingPlanUid: '019d2ce7-05bf-733c-ba56-0fcafafeb69b',
 };
 export const LS_KEYS = { biId: 'twou.cartBiId', uid: 'twou.cartUid' };
 // ─── Checkout gate feature flags (dev controls) ───────────────────────────────
@@ -68,202 +69,206 @@ export const ALLOWED_CHECKOUT_COUNTRIES = ['US', 'CA'];
  * Add or remove codes here to control which residents see the second checkbox.
  */
 export const COUNTRIES_REQUIRING_EXTRA_CONFIRM = ['GB', 'CA'];
-export const COUNTRIES = [
-    ['AF', 'Afghanistan'],
-    ['AL', 'Albania'],
-    ['DZ', 'Algeria'],
-    ['AD', 'Andorra'],
-    ['AO', 'Angola'],
-    ['AG', 'Antigua and Barbuda'],
-    ['AR', 'Argentina'],
-    ['AM', 'Armenia'],
-    ['AU', 'Australia'],
-    ['AT', 'Austria'],
-    ['AZ', 'Azerbaijan'],
-    ['BS', 'Bahamas'],
-    ['BH', 'Bahrain'],
-    ['BD', 'Bangladesh'],
-    ['BB', 'Barbados'],
-    ['BY', 'Belarus'],
-    ['BE', 'Belgium'],
-    ['BZ', 'Belize'],
-    ['BJ', 'Benin'],
-    ['BT', 'Bhutan'],
-    ['BO', 'Bolivia'],
-    ['BA', 'Bosnia and Herzegovina'],
-    ['BW', 'Botswana'],
-    ['BR', 'Brazil'],
-    ['BN', 'Brunei'],
-    ['BG', 'Bulgaria'],
-    ['BF', 'Burkina Faso'],
-    ['BI', 'Burundi'],
-    ['CV', 'Cabo Verde'],
-    ['KH', 'Cambodia'],
-    ['CM', 'Cameroon'],
-    ['CA', 'Canada'],
-    ['CF', 'Central African Republic'],
-    ['TD', 'Chad'],
-    ['CL', 'Chile'],
-    ['CN', 'China'],
-    ['CO', 'Colombia'],
-    ['KM', 'Comoros'],
-    ['CG', 'Congo (Congo-Brazzaville)'],
-    ['CR', 'Costa Rica'],
-    ['HR', 'Croatia'],
-    ['CU', 'Cuba'],
-    ['CY', 'Cyprus'],
-    ['CZ', 'Czechia (Czech Republic)'],
-    ['CD', 'Democratic Republic of the Congo'],
-    ['DK', 'Denmark'],
-    ['DJ', 'Djibouti'],
-    ['DM', 'Dominica'],
-    ['DO', 'Dominican Republic'],
-    ['EC', 'Ecuador'],
-    ['EG', 'Egypt'],
-    ['SV', 'El Salvador'],
-    ['GQ', 'Equatorial Guinea'],
-    ['ER', 'Eritrea'],
-    ['EE', 'Estonia'],
-    ['SZ', 'Eswatini'],
-    ['ET', 'Ethiopia'],
-    ['FJ', 'Fiji'],
-    ['FI', 'Finland'],
-    ['FR', 'France'],
-    ['GA', 'Gabon'],
-    ['GM', 'Gambia'],
-    ['GE', 'Georgia'],
-    ['DE', 'Germany'],
-    ['GH', 'Ghana'],
-    ['GR', 'Greece'],
-    ['GD', 'Grenada'],
-    ['GT', 'Guatemala'],
-    ['GN', 'Guinea'],
-    ['GW', 'Guinea-Bissau'],
-    ['GY', 'Guyana'],
-    ['HT', 'Haiti'],
-    ['VA', 'Holy See (Vatican City)'],
-    ['HN', 'Honduras'],
-    ['HU', 'Hungary'],
-    ['IS', 'Iceland'],
-    ['IN', 'India'],
-    ['ID', 'Indonesia'],
-    ['IR', 'Iran'],
-    ['IQ', 'Iraq'],
-    ['IE', 'Ireland'],
-    ['IL', 'Israel'],
-    ['IT', 'Italy'],
-    ['CI', "Ivory Coast (Côte d'Ivoire)"],
-    ['JM', 'Jamaica'],
-    ['JP', 'Japan'],
-    ['JO', 'Jordan'],
-    ['KZ', 'Kazakhstan'],
-    ['KE', 'Kenya'],
-    ['KI', 'Kiribati'],
-    ['KW', 'Kuwait'],
-    ['KG', 'Kyrgyzstan'],
-    ['LA', 'Laos'],
-    ['LV', 'Latvia'],
-    ['LB', 'Lebanon'],
-    ['LS', 'Lesotho'],
-    ['LR', 'Liberia'],
-    ['LY', 'Libya'],
-    ['LI', 'Liechtenstein'],
-    ['LT', 'Lithuania'],
-    ['LU', 'Luxembourg'],
-    ['MG', 'Madagascar'],
-    ['MW', 'Malawi'],
-    ['MY', 'Malaysia'],
-    ['MV', 'Maldives'],
-    ['ML', 'Mali'],
-    ['MT', 'Malta'],
-    ['MH', 'Marshall Islands'],
-    ['MR', 'Mauritania'],
-    ['MU', 'Mauritius'],
-    ['MX', 'Mexico'],
-    ['FM', 'Micronesia'],
-    ['MD', 'Moldova'],
-    ['MC', 'Monaco'],
-    ['MN', 'Mongolia'],
-    ['ME', 'Montenegro'],
-    ['MA', 'Morocco'],
-    ['MZ', 'Mozambique'],
-    ['MM', 'Myanmar (Burma)'],
-    ['NA', 'Namibia'],
-    ['NR', 'Nauru'],
-    ['NP', 'Nepal'],
-    ['NL', 'Netherlands'],
-    ['NZ', 'New Zealand'],
-    ['NI', 'Nicaragua'],
-    ['NE', 'Niger'],
-    ['NG', 'Nigeria'],
-    ['KP', 'North Korea'],
-    ['MK', 'North Macedonia'],
-    ['NO', 'Norway'],
-    ['OM', 'Oman'],
-    ['PK', 'Pakistan'],
-    ['PW', 'Palau'],
-    ['PS', 'Palestine State'],
-    ['PA', 'Panama'],
-    ['PG', 'Papua New Guinea'],
-    ['PY', 'Paraguay'],
-    ['PE', 'Peru'],
-    ['PH', 'Philippines'],
-    ['PL', 'Poland'],
-    ['PT', 'Portugal'],
-    ['QA', 'Qatar'],
-    ['RO', 'Romania'],
-    ['RU', 'Russia'],
-    ['RW', 'Rwanda'],
-    ['KN', 'Saint Kitts and Nevis'],
-    ['LC', 'Saint Lucia'],
-    ['VC', 'Saint Vincent and the Grenadines'],
-    ['WS', 'Samoa'],
-    ['SM', 'San Marino'],
-    ['ST', 'Sao Tome and Principe'],
-    ['SA', 'Saudi Arabia'],
-    ['SN', 'Senegal'],
-    ['RS', 'Serbia'],
-    ['SC', 'Seychelles'],
-    ['SL', 'Sierra Leone'],
-    ['SG', 'Singapore'],
-    ['SK', 'Slovakia'],
-    ['SI', 'Slovenia'],
-    ['SB', 'Solomon Islands'],
-    ['SO', 'Somalia'],
-    ['ZA', 'South Africa'],
-    ['KR', 'South Korea'],
-    ['SS', 'South Sudan'],
-    ['ES', 'Spain'],
-    ['LK', 'Sri Lanka'],
-    ['SD', 'Sudan'],
-    ['SR', 'Suriname'],
-    ['SE', 'Sweden'],
-    ['CH', 'Switzerland'],
-    ['SY', 'Syria'],
-    ['TJ', 'Tajikistan'],
-    ['TZ', 'Tanzania'],
-    ['TH', 'Thailand'],
-    ['TL', 'Timor-Leste'],
-    ['TG', 'Togo'],
-    ['TO', 'Tonga'],
-    ['TT', 'Trinidad and Tobago'],
-    ['TN', 'Tunisia'],
-    ['TR', 'Turkey'],
-    ['TM', 'Turkmenistan'],
-    ['TV', 'Tuvalu'],
-    ['UG', 'Uganda'],
-    ['UA', 'Ukraine'],
-    ['AE', 'United Arab Emirates'],
-    ['GB', 'United Kingdom'],
+// export const COUNTRIES: readonly (readonly [string, string])[] = [
+//   ['AF', 'Afghanistan'],
+//   ['AL', 'Albania'],
+//   ['DZ', 'Algeria'],
+//   ['AD', 'Andorra'],
+//   ['AO', 'Angola'],
+//   ['AG', 'Antigua and Barbuda'],
+//   ['AR', 'Argentina'],
+//   ['AM', 'Armenia'],
+//   ['AU', 'Australia'],
+//   ['AT', 'Austria'],
+//   ['AZ', 'Azerbaijan'],
+//   ['BS', 'Bahamas'],
+//   ['BH', 'Bahrain'],
+//   ['BD', 'Bangladesh'],
+//   ['BB', 'Barbados'],
+//   ['BY', 'Belarus'],
+//   ['BE', 'Belgium'],
+//   ['BZ', 'Belize'],
+//   ['BJ', 'Benin'],
+//   ['BT', 'Bhutan'],
+//   ['BO', 'Bolivia'],
+//   ['BA', 'Bosnia and Herzegovina'],
+//   ['BW', 'Botswana'],
+//   ['BR', 'Brazil'],
+//   ['BN', 'Brunei'],
+//   ['BG', 'Bulgaria'],
+//   ['BF', 'Burkina Faso'],
+//   ['BI', 'Burundi'],
+//   ['CV', 'Cabo Verde'],
+//   ['KH', 'Cambodia'],
+//   ['CM', 'Cameroon'],
+//   ['CA', 'Canada'],
+//   ['CF', 'Central African Republic'],
+//   ['TD', 'Chad'],
+//   ['CL', 'Chile'],
+//   ['CN', 'China'],
+//   ['CO', 'Colombia'],
+//   ['KM', 'Comoros'],
+//   ['CG', 'Congo (Congo-Brazzaville)'],
+//   ['CR', 'Costa Rica'],
+//   ['HR', 'Croatia'],
+//   ['CU', 'Cuba'],
+//   ['CY', 'Cyprus'],
+//   ['CZ', 'Czechia (Czech Republic)'],
+//   ['CD', 'Democratic Republic of the Congo'],
+//   ['DK', 'Denmark'],
+//   ['DJ', 'Djibouti'],
+//   ['DM', 'Dominica'],
+//   ['DO', 'Dominican Republic'],
+//   ['EC', 'Ecuador'],
+//   ['EG', 'Egypt'],
+//   ['SV', 'El Salvador'],
+//   ['GQ', 'Equatorial Guinea'],
+//   ['ER', 'Eritrea'],
+//   ['EE', 'Estonia'],
+//   ['SZ', 'Eswatini'],
+//   ['ET', 'Ethiopia'],
+//   ['FJ', 'Fiji'],
+//   ['FI', 'Finland'],
+//   ['FR', 'France'],
+//   ['GA', 'Gabon'],
+//   ['GM', 'Gambia'],
+//   ['GE', 'Georgia'],
+//   ['DE', 'Germany'],
+//   ['GH', 'Ghana'],
+//   ['GR', 'Greece'],
+//   ['GD', 'Grenada'],
+//   ['GT', 'Guatemala'],
+//   ['GN', 'Guinea'],
+//   ['GW', 'Guinea-Bissau'],
+//   ['GY', 'Guyana'],
+//   ['HT', 'Haiti'],
+//   ['VA', 'Holy See (Vatican City)'],
+//   ['HN', 'Honduras'],
+//   ['HU', 'Hungary'],
+//   ['IS', 'Iceland'],
+//   ['IN', 'India'],
+//   ['ID', 'Indonesia'],
+//   ['IR', 'Iran'],
+//   ['IQ', 'Iraq'],
+//   ['IE', 'Ireland'],
+//   ['IL', 'Israel'],
+//   ['IT', 'Italy'],
+//   ['CI', "Ivory Coast (Côte d'Ivoire)"],
+//   ['JM', 'Jamaica'],
+//   ['JP', 'Japan'],
+//   ['JO', 'Jordan'],
+//   ['KZ', 'Kazakhstan'],
+//   ['KE', 'Kenya'],
+//   ['KI', 'Kiribati'],
+//   ['KW', 'Kuwait'],
+//   ['KG', 'Kyrgyzstan'],
+//   ['LA', 'Laos'],
+//   ['LV', 'Latvia'],
+//   ['LB', 'Lebanon'],
+//   ['LS', 'Lesotho'],
+//   ['LR', 'Liberia'],
+//   ['LY', 'Libya'],
+//   ['LI', 'Liechtenstein'],
+//   ['LT', 'Lithuania'],
+//   ['LU', 'Luxembourg'],
+//   ['MG', 'Madagascar'],
+//   ['MW', 'Malawi'],
+//   ['MY', 'Malaysia'],
+//   ['MV', 'Maldives'],
+//   ['ML', 'Mali'],
+//   ['MT', 'Malta'],
+//   ['MH', 'Marshall Islands'],
+//   ['MR', 'Mauritania'],
+//   ['MU', 'Mauritius'],
+//   ['MX', 'Mexico'],
+//   ['FM', 'Micronesia'],
+//   ['MD', 'Moldova'],
+//   ['MC', 'Monaco'],
+//   ['MN', 'Mongolia'],
+//   ['ME', 'Montenegro'],
+//   ['MA', 'Morocco'],
+//   ['MZ', 'Mozambique'],
+//   ['MM', 'Myanmar (Burma)'],
+//   ['NA', 'Namibia'],
+//   ['NR', 'Nauru'],
+//   ['NP', 'Nepal'],
+//   ['NL', 'Netherlands'],
+//   ['NZ', 'New Zealand'],
+//   ['NI', 'Nicaragua'],
+//   ['NE', 'Niger'],
+//   ['NG', 'Nigeria'],
+//   ['KP', 'North Korea'],
+//   ['MK', 'North Macedonia'],
+//   ['NO', 'Norway'],
+//   ['OM', 'Oman'],
+//   ['PK', 'Pakistan'],
+//   ['PW', 'Palau'],
+//   ['PS', 'Palestine State'],
+//   ['PA', 'Panama'],
+//   ['PG', 'Papua New Guinea'],
+//   ['PY', 'Paraguay'],
+//   ['PE', 'Peru'],
+//   ['PH', 'Philippines'],
+//   ['PL', 'Poland'],
+//   ['PT', 'Portugal'],
+//   ['QA', 'Qatar'],
+//   ['RO', 'Romania'],
+//   ['RU', 'Russia'],
+//   ['RW', 'Rwanda'],
+//   ['KN', 'Saint Kitts and Nevis'],
+//   ['LC', 'Saint Lucia'],
+//   ['VC', 'Saint Vincent and the Grenadines'],
+//   ['WS', 'Samoa'],
+//   ['SM', 'San Marino'],
+//   ['ST', 'Sao Tome and Principe'],
+//   ['SA', 'Saudi Arabia'],
+//   ['SN', 'Senegal'],
+//   ['RS', 'Serbia'],
+//   ['SC', 'Seychelles'],
+//   ['SL', 'Sierra Leone'],
+//   ['SG', 'Singapore'],
+//   ['SK', 'Slovakia'],
+//   ['SI', 'Slovenia'],
+//   ['SB', 'Solomon Islands'],
+//   ['SO', 'Somalia'],
+//   ['ZA', 'South Africa'],
+//   ['KR', 'South Korea'],
+//   ['SS', 'South Sudan'],
+//   ['ES', 'Spain'],
+//   ['LK', 'Sri Lanka'],
+//   ['SD', 'Sudan'],
+//   ['SR', 'Suriname'],
+//   ['SE', 'Sweden'],
+//   ['CH', 'Switzerland'],
+//   ['SY', 'Syria'],
+//   ['TJ', 'Tajikistan'],
+//   ['TZ', 'Tanzania'],
+//   ['TH', 'Thailand'],
+//   ['TL', 'Timor-Leste'],
+//   ['TG', 'Togo'],
+//   ['TO', 'Tonga'],
+//   ['TT', 'Trinidad and Tobago'],
+//   ['TN', 'Tunisia'],
+//   ['TR', 'Turkey'],
+//   ['TM', 'Turkmenistan'],
+//   ['TV', 'Tuvalu'],
+//   ['UG', 'Uganda'],
+//   ['UA', 'Ukraine'],
+//   ['AE', 'United Arab Emirates'],
+//   ['GB', 'United Kingdom'],
+//   ['US', 'United States'],
+//   ['UY', 'Uruguay'],
+//   ['UZ', 'Uzbekistan'],
+//   ['VU', 'Vanuatu'],
+//   ['VE', 'Venezuela'],
+//   ['VN', 'Vietnam'],
+//   ['YE', 'Yemen'],
+//   ['ZM', 'Zambia'],
+//   ['ZW', 'Zimbabwe'],
+// ];
+/** Billing country dropdown options. Swap back to COUNTRIES when expanding internationally. */
+export const BILLING_COUNTRIES = [
     ['US', 'United States'],
-    ['UY', 'Uruguay'],
-    ['UZ', 'Uzbekistan'],
-    ['VU', 'Vanuatu'],
-    ['VE', 'Venezuela'],
-    ['VN', 'Vietnam'],
-    ['YE', 'Yemen'],
-    ['ZM', 'Zambia'],
-    ['ZW', 'Zimbabwe'],
 ];
 // --- Stripe Element presentation ---------------------------------------------
 // A div that hosts a Stripe Element but reads like a Paragon input.