ordering-ui-external 14.2.11 → 14.2.13

package/src/components/StripePaymentElementForm/index.js

@@ -0,0 +1,174 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import {
+  PaymentElement,
+  useElements,
+  useStripe
+} from '@stripe/react-stripe-js'
+import { CardForm as CardFormController, useConfig, useLanguage } from 'ordering-components-external'
+import { Button } from '../../styles/Buttons'
+import {
+  Container,
+  ErrorMessage,
+  FormActions,
+  InfoNote,
+  PaymentElementWrapper
+} from './styles'
+
+const googlePayMethods = ['google_pay', 'global_google_pay']
+const applePayMethods = ['apple_pay', 'global_apple_pay']
+
+const getPaymentAmount = (cart, cartGroup) => {
+  const total = cartGroup?.balance ?? cartGroup?.total ?? cart?.balance ?? cart?.total ?? 0
+  const amountInCents = Math.floor(Number(total) * 100)
+  return amountInCents > 0 ? amountInCents : 100
+}
+
+const buildPaymethodPayload = (paymentMethod) => {
+  const card = paymentMethod?.card
+  return {
+    ...(card || {}),
+    id: paymentMethod.id,
+    type: paymentMethod.type,
+    source_id: paymentMethod.id,
+    card: card
+      ? {
+        brand: card.brand,
+        last4: card.last4
+      }
+      : undefined
+  }
+}
+
+export const StripePaymentElementFormUI = (props) => {
+  const {
+    cart,
+    handleSource,
+    handleCancel,
+    paymethod,
+    cartGroup
+  } = props
+
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const stripe = useStripe()
+  const elements = useElements()
+  const [error, setError] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [isReady, setIsReady] = useState(false)
+  const [isGooglePayUnavailable, setIsGooglePayUnavailable] = useState(false)
+
+  const isGooglePayMethod = googlePayMethods.includes(paymethod)
+
+  useEffect(() => {
+    if (!stripe || !isGooglePayMethod) {
+      setIsGooglePayUnavailable(false)
+      return
+    }
+
+    let cartNames = ''
+    if (cartGroup) {
+      cartGroup?.carts?.forEach((groupCart, i) => {
+        cartNames = `${groupCart?.business?.name}${i < cartGroup.carts.length - 1 ? ', ' : ''}`
+      })
+    }
+
+    const paymentRequest = stripe.paymentRequest({
+      country: 'US',
+      currency: configs?.stripe_currency?.value?.toLowerCase?.() || 'usd',
+      total: {
+        label: cartNames || cart?.business?.name || 'Total',
+        amount: getPaymentAmount(cart, cartGroup)
+      },
+      requestPayerName: true,
+      requestPayerEmail: true
+    })
+
+    paymentRequest.canMakePayment().then((result) => {
+      setIsGooglePayUnavailable(!result?.googlePay)
+    })
+  }, [stripe, isGooglePayMethod, cart, cartGroup, configs?.stripe_currency?.value])
+
+  const paymentElementOptions = useMemo(() => {
+    const isGooglePay = googlePayMethods.includes(paymethod)
+    const isApplePay = applePayMethods.includes(paymethod)
+
+    return {
+      layout: 'tabs',
+      wallets: {
+        googlePay: isGooglePay ? 'auto' : 'never',
+        applePay: isApplePay ? 'auto' : 'never'
+      }
+    }
+  }, [paymethod])
+
+  const handleSubmit = async (event) => {
+    event.preventDefault()
+    if (!stripe || !elements) {
+      setError(t('STRIPE_LOAD_ERROR', 'Failed to load Stripe properly'))
+      return
+    }
+
+    setLoading(true)
+    setError(null)
+
+    const { error: submitError } = await elements.submit()
+    if (submitError) {
+      setError(submitError.message)
+      setLoading(false)
+      return
+    }
+
+    const { error: createError, paymentMethod } = await stripe.createPaymentMethod({
+      elements
+    })
+
+    if (createError) {
+      setError(createError.message)
+      setLoading(false)
+      return
+    }
+
+    const data = buildPaymethodPayload(paymentMethod)
+    handleCancel?.()
+    handleSource(cartGroup ? JSON.stringify(data) : data)
+    setLoading(false)
+  }
+
+  return (
+    <Container onSubmit={handleSubmit}>
+      <PaymentElementWrapper>
+        <PaymentElement
+          options={paymentElementOptions}
+          onReady={() => setIsReady(true)}
+          onLoadError={(event) => setError(event?.error?.message)}
+        />
+      </PaymentElementWrapper>
+      {isGooglePayUnavailable && (
+        <InfoNote role='note'>
+          {t(
+            'GOOGLE_PAY_NOT_CONFIGURED_NOTE',
+            'Google Pay is not configured on this device. Add a card to complete your payment normally.'
+          )}
+        </InfoNote>
+      )}
+      {error && <ErrorMessage role='alert'>{error}</ErrorMessage>}
+      <FormActions>
+        <Button
+          color='primary'
+          type='submit'
+          disabled={loading || !isReady || !stripe || !elements}
+        >
+          {loading ? t('LOADING', 'Loading...') : t('PLACE_ORDER', 'Place order')}
+        </Button>
+      </FormActions>
+    </Container>
+  )
+}
+
+export const StripePaymentElementForm = (props) => {
+  const propsController = {
+    ...props,
+    UIComponent: StripePaymentElementFormUI
+  }
+  return <CardFormController {...propsController} />
+}

package/src/components/StripePaymentElementForm/styles.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+
+export const Container = styled.form`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`
+
+export const PaymentElementWrapper = styled.div`
+  width: 100%;
+  min-height: 44px;
+`
+
+export const ErrorMessage = styled.p`
+  color: #fa755a;
+  margin: 0;
+  font-size: 14px;
+`
+
+export const FormActions = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`
+
+export const InfoNote = styled.p`
+  color: #6b7280;
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+`

package/src/index.js

@@ -82,6 +82,7 @@ import { SingleProductCard } from './components/SingleProductCard'
 import { SmartAppBanner } from './components/SmartAppBanner'
 import { SpinnerLoader } from './components/SpinnerLoader'
 import { StripeElementsForm } from './components/StripeElementsForm'
+import { StripePaymentElementForm } from './components/StripePaymentElementForm'
 import { StripeRedirectForm } from './components/StripeRedirectForm'
 import { TaxInformation } from './components/TaxInformation'
 import { UpsellingPage } from './components/UpsellingPage'
@@ -224,6 +225,7 @@ export {
   SmartAppBanner,
   SpinnerLoader,
   StripeElementsForm,
+  StripePaymentElementForm,
   StripeRedirectForm,
   SidebarMenu,
   TaxInformation,

package/src/themes/five/src/components/StripeElementsForm/index.js

@@ -1,14 +1,20 @@
-import React from 'react'
-import { StripeElementsForm as StripeElementsFormController, useLanguage } from 'ordering-components-external'
+import React, { useMemo } from 'react'
+import { StripeElementsForm as StripeElementsFormController, useConfig, useLanguage } from 'ordering-components-external'
 import { loadStripe } from '@stripe/stripe-js/pure'
 import { Elements } from '@stripe/react-stripe-js'
 
+import { StripePaymentElementForm } from '../../../../../components/StripePaymentElementForm'
 import {
   ErrorMessage
 } from './styles'
 
 import { CardForm } from '../CardForm'
-import { StripeMethodForm } from '../../../../../components/StripeMethodForm'
+
+const getPaymentAmount = (cart, cartGroup) => {
+  const total = cartGroup?.balance ?? cartGroup?.total ?? cart?.balance ?? cart?.total ?? 0
+  const amountInCents = Math.floor(Number(total) * 100)
+  return amountInCents > 0 ? amountInCents : 100
+}
 
 const StripeElementsFormUI = (props) => {
   const {
@@ -26,6 +32,20 @@ const StripeElementsFormUI = (props) => {
     cartGroup
   } = props
   const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const isWalletPaymethod = methodsPay?.includes(paymethod)
+  const stripePromise = useMemo(() => (publicKey ? loadStripe(publicKey) : null), [publicKey])
+
+  const walletElementsOptions = useMemo(() => {
+    if (!isWalletPaymethod) return null
+    return {
+      mode: 'payment',
+      amount: getPaymentAmount(cart, cartGroup),
+      currency: configs?.stripe_currency?.value?.toLowerCase?.() || 'usd',
+      paymentMethodCreation: 'manual'
+    }
+  }, [isWalletPaymethod, cart, cartGroup, configs?.stripe_currency?.value])
+
   return (
     <>
       {props.beforeElements?.map((BeforeElement, i) => (
@@ -34,37 +54,43 @@ const StripeElementsFormUI = (props) => {
         </React.Fragment>))}
       {props.beforeComponents?.map((BeforeComponent, i) => (
         <BeforeComponent key={i} {...props} />))}
-      {publicKey ? (
-        <Elements stripe={loadStripe(publicKey)}>
-          {methodsPay?.includes(paymethod) ? (
-            <StripeMethodForm
-              cart={cart}
-              cartGroup={cartGroup}
-              handleSource={handleSource}
-              onNewCard={onNewCard}
-              toSave={toSave}
-              requirements={requirements}
-              businessId={businessId}
-              handleCancel={onCancel}
-              paymethod={paymethod}
-              handlePlaceOrder={handlePlaceOrder}
-            />
-          ) : (
-            <CardForm
-              handleSource={handleSource}
-              onNewCard={onNewCard}
-              toSave={toSave}
-              isSplitForm
-              requirements={requirements}
-              businessId={businessId}
-              handleCancel={onCancel}
-              businessIds={props.businessIds}
-            />
-          )}
-        </Elements>
-      ) : (
-        <ErrorMessage>{t('SOMETHING_WRONG', 'Something is wrong!')}</ErrorMessage>
-      )}
+      {publicKey
+        ? (
+          isWalletPaymethod
+            ? (
+              <Elements stripe={stripePromise} options={walletElementsOptions}>
+                <StripePaymentElementForm
+                  cart={cart}
+                  cartGroup={cartGroup}
+                  handleSource={handleSource}
+                  onNewCard={onNewCard}
+                  toSave={toSave}
+                  requirements={requirements}
+                  businessId={businessId}
+                  handleCancel={onCancel}
+                  paymethod={paymethod}
+                  handlePlaceOrder={handlePlaceOrder}
+                />
+              </Elements>
+            )
+            : (
+              <Elements stripe={stripePromise}>
+                <CardForm
+                  handleSource={handleSource}
+                  onNewCard={onNewCard}
+                  toSave={toSave}
+                  isSplitForm
+                  requirements={requirements}
+                  businessId={businessId}
+                  handleCancel={onCancel}
+                  businessIds={props.businessIds}
+                />
+              </Elements>
+            )
+        )
+        : (
+          <ErrorMessage>{t('SOMETHING_WRONG', 'Something is wrong!')}</ErrorMessage>
+        )}
       {props.afterComponents?.map((AfterComponent, i) => (
         <AfterComponent key={i} {...props} />))}
       {props.afterElements?.map((AfterElement, i) => (