{"version":3,"file":"billing-redirect-message-86779bcf.mjs","sources":["../../../common/resources/client/billing/checkout/stripe/use-stripe.ts","../../../common/resources/client/billing/checkout/stripe/stripe-elements-form.tsx","../../../common/resources/client/billing/billing-redirect-message.tsx"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\nimport {loadStripe, Stripe, StripeElements} from '@stripe/stripe-js';\nimport {apiClient} from '@common/http/query-client';\nimport {useSelectedLocale} from '@common/i18n/selected-locale';\nimport {useAuth} from '@common/auth/use-auth';\nimport {useIsDarkMode} from '@common/ui/themes/use-is-dark-mode';\nimport {useSettings} from '@common/core/settings/use-settings';\n\ninterface UseStripeProps {\n  type: 'setupIntent' | 'subscription';\n  productId?: string | number;\n  priceId?: string | number;\n}\nexport function useStripe({type, productId, priceId}: UseStripeProps) {\n  const {user} = useAuth();\n  const isDarkMode = useIsDarkMode();\n  const isInitiatedRef = useRef<boolean>(false);\n  const paymentElementRef = useRef<HTMLDivElement>(null);\n  const {localeCode} = useSelectedLocale();\n  const [stripe, setStripe] = useState<Stripe | null>(null);\n  const [elements, setElements] = useState<StripeElements | null>(null);\n  const {\n    branding: {site_name},\n    billing: {\n      stripe_public_key,\n      stripe: {enable},\n    },\n  } = useSettings();\n\n  useEffect(() => {\n    if (!enable || !stripe_public_key || isInitiatedRef.current) return;\n\n    Promise.all([\n      // load stripe js library\n      loadStripe(stripe_public_key, {\n        apiVersion: '2022-08-01',\n        locale: localeCode as any,\n      }),\n      // create partial subscription for clientSecret\n      type === 'setupIntent'\n        ? createSetupIntent()\n        : createSubscription(productId!, priceId),\n    ]).then(([stripe, {clientSecret}]) => {\n      if (stripe && paymentElementRef.current) {\n        const elements = stripe.elements({\n          clientSecret,\n          appearance: {\n            theme: isDarkMode ? 'night' : 'stripe',\n          },\n        });\n\n        // Create and mount the Payment Element\n        const paymentElement = elements.create('payment', {\n          business: {name: site_name},\n          terms: {card: 'never'},\n          fields: {\n            billingDetails: {\n              address: 'auto',\n            },\n          },\n          defaultValues: {\n            billingDetails: {\n              email: user?.email,\n            },\n          },\n        });\n        paymentElement.mount(paymentElementRef.current);\n\n        setStripe(stripe);\n        setElements(elements);\n      }\n    });\n\n    isInitiatedRef.current = true;\n  }, [\n    productId,\n    stripe_public_key,\n    enable,\n    isDarkMode,\n    localeCode,\n    site_name,\n    type,\n    user?.email,\n  ]);\n\n  return {\n    stripe,\n    elements,\n    paymentElementRef,\n    stripeIsEnabled: stripe_public_key != null && enable,\n  };\n}\n\nfunction createSetupIntent(): Promise<{clientSecret: string}> {\n  return apiClient.post('billing/stripe/create-setup-intent').then(r => r.data);\n}\n\nfunction createSubscription(\n  productId: number | string,\n  priceId?: number | string\n): Promise<{clientSecret: string}> {\n  return apiClient\n    .post('billing/stripe/create-partial-subscription', {\n      product_id: productId,\n      price_id: priceId,\n    })\n    .then(r => r.data);\n}\n","import clsx from 'clsx';\nimport {Button} from '@common/ui/buttons/button';\nimport {FormEventHandler, Fragment, ReactNode, useState} from 'react';\nimport {useStripe} from '@common/billing/checkout/stripe/use-stripe';\nimport {Skeleton} from '@common/ui/skeleton/skeleton';\n\ninterface StripeElementsFormProps {\n  productId?: string | number;\n  priceId?: string | number;\n  type: 'setupIntent' | 'subscription';\n  submitLabel: ReactNode;\n  returnUrl: string;\n}\nexport function StripeElementsForm({\n  productId,\n  priceId,\n  type = 'subscription',\n  submitLabel,\n  returnUrl,\n}: StripeElementsFormProps) {\n  const {stripe, elements, paymentElementRef, stripeIsEnabled} = useStripe({\n    type,\n    productId,\n    priceId,\n  });\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  // disable upgrade button if stripe is enabled, but not loaded yet\n  const stripeIsReady: boolean =\n    !stripeIsEnabled || (elements != null && stripe != null);\n\n  const handleSubmit: FormEventHandler = async e => {\n    e.preventDefault();\n\n    // stripe has not loaded yet\n    if (!stripe || !elements) return;\n\n    setIsSubmitting(true);\n\n    try {\n      const method =\n        type === 'subscription' ? 'confirmPayment' : 'confirmSetup';\n      const result = await stripe[method]({\n        elements,\n        confirmParams: {\n          return_url: returnUrl,\n        },\n      });\n\n      // don't show validation error as it will be shown already by stripe payment element\n      if (result.error?.type !== 'validation_error' && result.error?.message) {\n        setErrorMessage(result.error.message);\n      }\n    } catch {}\n\n    setIsSubmitting(false);\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <div\n        ref={paymentElementRef}\n        className={clsx('min-h-[303px]', !stripeIsEnabled && 'hidden')}\n      >\n        {stripeIsEnabled && <StripeSkeleton />}\n      </div>\n      {errorMessage && !isSubmitting && (\n        <div className=\"mt-20 text-danger\">{errorMessage}</div>\n      )}\n      <Button\n        variant=\"flat\"\n        color=\"primary\"\n        size=\"md\"\n        className=\"mt-40 w-full\"\n        type=\"submit\"\n        disabled={isSubmitting || !stripeIsReady}\n      >\n        {submitLabel}\n      </Button>\n    </form>\n  );\n}\n\nfunction StripeSkeleton() {\n  return (\n    <Fragment>\n      <Skeleton className=\"mb-20 h-30\" />\n      <Skeleton className=\"mb-20 h-30\" />\n      <Skeleton className=\"mb-20 h-30\" />\n      <Skeleton className=\"h-30\" />\n    </Fragment>\n  );\n}\n","import {MessageDescriptor} from '../i18n/message-descriptor';\nimport {Link, To} from 'react-router-dom';\nimport {AnimatePresence, m} from 'framer-motion';\nimport {TaskAltIcon} from '../icons/material/TaskAlt';\nimport {ErrorIcon} from '../icons/material/Error';\nimport {Trans} from '../i18n/trans';\nimport {Button} from '../ui/buttons/button';\nimport {Skeleton} from '../ui/skeleton/skeleton';\nimport {opacityAnimation} from '../ui/animation/opacity-animation';\n\nexport interface BillingRedirectMessageConfig {\n  message: MessageDescriptor;\n  status: 'success' | 'error';\n  link: To;\n  buttonLabel: MessageDescriptor;\n}\n\ninterface BillingRedirectMessageProps {\n  config?: BillingRedirectMessageConfig;\n}\nexport function BillingRedirectMessage({config}: BillingRedirectMessageProps) {\n  return (\n    <AnimatePresence initial={false} mode=\"wait\">\n      <div className=\"mt-80\">\n        {config ? (\n          <m.div\n            className=\"text-center\"\n            key=\"payment-status\"\n            {...opacityAnimation}\n          >\n            {config.status === 'success' ? (\n              <TaskAltIcon className=\"text-positive text-6xl\" />\n            ) : (\n              <ErrorIcon className=\"text-danger text-6xl\" />\n            )}\n            <div className=\"text-2xl font-semibold mt-30\">\n              <Trans {...config.message} />\n            </div>\n            <Button\n              variant=\"flat\"\n              color=\"primary\"\n              className=\"w-full mt-30\"\n              size=\"md\"\n              elementType={Link}\n              to={config.link}\n            >\n              <Trans {...config.buttonLabel} />\n            </Button>\n          </m.div>\n        ) : (\n          <LoadingSkeleton key=\"loading-skeleton\" />\n        )}\n      </div>\n    </AnimatePresence>\n  );\n}\n\nfunction LoadingSkeleton() {\n  return (\n    <m.div\n      className=\"text-center max-w-280\"\n      key=\"loading-skeleton\"\n      {...opacityAnimation}\n    >\n      <Skeleton size=\"w-50 h-50\" variant=\"rect\" />\n      <Skeleton className=\"text-2xl mt-30\" />\n      <Skeleton size=\"h-42\" className=\"mt-30\" />\n    </m.div>\n  );\n}\n"],"names":["stripe","elements"],"mappings":";;;;;;;;AAaO,SAAS,UAAU,EAAC,MAAM,WAAW,WAA0B;AAC9D,QAAA,EAAC,SAAQ;AACf,QAAM,aAAa;AACb,QAAA,iBAAiB,OAAgB,KAAK;AACtC,QAAA,oBAAoB,OAAuB,IAAI;AAC/C,QAAA,EAAC,eAAc;AACrB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAwB,IAAI;AACxD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAgC,IAAI;AAC9D,QAAA;AAAA,IACJ,UAAU,EAAC,UAAS;AAAA,IACpB,SAAS;AAAA,MACP;AAAA,MACA,QAAQ,EAAC,OAAM;AAAA,IACjB;AAAA,MACE,YAAY;AAEhB,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,CAAC,qBAAqB,eAAe;AAAS;AAE7D,YAAQ,IAAI;AAAA;AAAA,MAEV,WAAW,mBAAmB;AAAA,QAC5B,YAAY;AAAA,QACZ,QAAQ;AAAA,MAAA,CACT;AAAA;AAAA,MAED,SAAS,gBACL,kBAAA,IACA,mBAAmB,WAAY,OAAO;AAAA,IAAA,CAC3C,EAAE,KAAK,CAAC,CAACA,SAAQ,EAAC,aAAa,CAAA,MAAM;AAChCA,UAAAA,WAAU,kBAAkB,SAAS;AACjCC,cAAAA,YAAWD,QAAO,SAAS;AAAA,UAC/B;AAAA,UACA,YAAY;AAAA,YACV,OAAO,aAAa,UAAU;AAAA,UAChC;AAAA,QAAA,CACD;AAGK,cAAA,iBAAiBC,UAAS,OAAO,WAAW;AAAA,UAChD,UAAU,EAAC,MAAM,UAAS;AAAA,UAC1B,OAAO,EAAC,MAAM,QAAO;AAAA,UACrB,QAAQ;AAAA,YACN,gBAAgB;AAAA,cACd,SAAS;AAAA,YACX;AAAA,UACF;AAAA,UACA,eAAe;AAAA,YACb,gBAAgB;AAAA,cACd,OAAO,6BAAM;AAAA,YACf;AAAA,UACF;AAAA,QAAA,CACD;AACc,uBAAA,MAAM,kBAAkB,OAAO;AAE9C,kBAAUD,OAAM;AAChB,oBAAYC,SAAQ;AAAA,MACtB;AAAA,IAAA,CACD;AAED,mBAAe,UAAU;AAAA,EAAA,GACxB;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,6BAAM;AAAA,EAAA,CACP;AAEM,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB,qBAAqB,QAAQ;AAAA,EAAA;AAElD;AAEA,SAAS,oBAAqD;AAC5D,SAAO,UAAU,KAAK,oCAAoC,EAAE,KAAK,CAAA,MAAK,EAAE,IAAI;AAC9E;AAEA,SAAS,mBACP,WACA,SACiC;AAC1B,SAAA,UACJ,KAAK,8CAA8C;AAAA,IAClD,YAAY;AAAA,IACZ,UAAU;AAAA,EACX,CAAA,EACA,KAAK,CAAA,MAAK,EAAE,IAAI;AACrB;AC9FO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,EAAC,QAAQ,UAAU,mBAAmB,gBAAA,IAAmB,UAAU;AAAA,IACvE;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AACD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AACpE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAGtD,QAAM,gBACJ,CAAC,mBAAoB,YAAY,QAAQ,UAAU;AAE/C,QAAA,eAAiC,OAAM,MAAK;;AAChD,MAAE,eAAe;AAGb,QAAA,CAAC,UAAU,CAAC;AAAU;AAE1B,oBAAgB,IAAI;AAEhB,QAAA;AACI,YAAA,SACJ,SAAS,iBAAiB,mBAAmB;AAC/C,YAAM,SAAS,MAAM,OAAO,MAAM,EAAE;AAAA,QAClC;AAAA,QACA,eAAe;AAAA,UACb,YAAY;AAAA,QACd;AAAA,MAAA,CACD;AAGD,YAAI,YAAO,UAAP,mBAAc,UAAS,wBAAsB,YAAO,UAAP,mBAAc,UAAS;AACtD,wBAAA,OAAO,MAAM,OAAO;AAAA,MACtC;AAAA,IAAA,QACM;AAAA,IAAC;AAET,oBAAgB,KAAK;AAAA,EAAA;AAIrB,SAAA,qBAAC,QAAK,EAAA,UAAU,cACd,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,KAAK,iBAAiB,CAAC,mBAAmB,QAAQ;AAAA,QAE5D,UAAA,uCAAoB,gBAAe,CAAA,CAAA;AAAA,MAAA;AAAA,IACtC;AAAA,IACC,gBAAgB,CAAC,oCACf,OAAI,EAAA,WAAU,qBAAqB,UAAa,cAAA;AAAA,IAEnD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,MAAK;AAAA,QACL,WAAU;AAAA,QACV,MAAK;AAAA,QACL,UAAU,gBAAgB,CAAC;AAAA,QAE1B,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;AAEA,SAAS,iBAAiB;AACxB,8BACG,UACC,EAAA,UAAA;AAAA,IAAC,oBAAA,UAAA,EAAS,WAAU,aAAa,CAAA;AAAA,IACjC,oBAAC,UAAS,EAAA,WAAU,aAAa,CAAA;AAAA,IACjC,oBAAC,UAAS,EAAA,WAAU,aAAa,CAAA;AAAA,IACjC,oBAAC,UAAS,EAAA,WAAU,OAAO,CAAA;AAAA,EAC7B,EAAA,CAAA;AAEJ;ACzEgB,SAAA,uBAAuB,EAAC,UAAsC;AAE1E,SAAA,oBAAC,iBAAgB,EAAA,SAAS,OAAO,MAAK,QACpC,UAAC,oBAAA,OAAA,EAAI,WAAU,SACZ,UACC,SAAA;AAAA,IAAC,EAAE;AAAA,IAAF;AAAA,MACC,WAAU;AAAA,MAET,GAAG;AAAA,MAEH,UAAA;AAAA,QAAO,OAAA,WAAW,YACjB,oBAAC,aAAY,EAAA,WAAU,yBAAyB,CAAA,IAEhD,oBAAC,WAAU,EAAA,WAAU,uBAAuB,CAAA;AAAA,QAE9C,oBAAC,SAAI,WAAU,gCACb,8BAAC,OAAO,EAAA,GAAG,OAAO,QAAA,CAAS,EAC7B,CAAA;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,WAAU;AAAA,YACV,MAAK;AAAA,YACL,aAAa;AAAA,YACb,IAAI,OAAO;AAAA,YAEX,UAAC,oBAAA,OAAA,EAAO,GAAG,OAAO,YAAa,CAAA;AAAA,UAAA;AAAA,QACjC;AAAA,MAAA;AAAA,IAAA;AAAA,IApBI;AAAA,EAAA,IAuBN,oBAAC,iBAAoB,CAAA,GAAA,kBAAmB,GAE5C,EACF,CAAA;AAEJ;AAEA,SAAS,kBAAkB;AAEvB,SAAA;AAAA,IAAC,EAAE;AAAA,IAAF;AAAA,MACC,WAAU;AAAA,MAET,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,UAAS,EAAA,MAAK,aAAY,SAAQ,QAAO;AAAA,QAC1C,oBAAC,UAAS,EAAA,WAAU,iBAAiB,CAAA;AAAA,QACpC,oBAAA,UAAA,EAAS,MAAK,QAAO,WAAU,SAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,IALpC;AAAA,EAAA;AAQV;"}