tf-checkout-react 1.7.7-beta.9 → 1.7.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.7-beta.9",
+  "version": "1.7.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -61,7 +61,6 @@
     "@types/react-dom": "^17.0.11",
     "@typescript-eslint/eslint-plugin": "^5.48.1",
     "@typescript-eslint/parser": "^5.52.0",
-    "buffer": "^5.7.1",
     "eslint": "^8.34.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
@@ -89,7 +88,6 @@
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@mercadopago/sdk-react": "^1.0.7",
     "@mui/icons-material": "^5.18.0",
     "@mui/material": "^5.2.2",
     "@mui/private-theming": "^5.11.1",
@@ -100,14 +98,12 @@
     "axios": "^1.9.0",
     "clsx": "^1.1.1",
     "formik": "^2.2.9",
-    "install": "^0.13.0",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "material-ui-phone-number": "^3.0.0",
     "moment-timezone": "^0.5.34",
     "nanoid": "^3.1.30",
-    "npm": "^11.9.0",
     "prop-types": "^15.7.2",
     "react-app-polyfill": "^1.0.0",
     "react-bootstrap": "^2.0.2",
@@ -119,8 +115,5 @@
     "rollup-plugin-svg": "^2.0.0",
     "tf-seat-map-view": "9.4.7-beta.33",
     "yup": "^0.32.11"
-  },
-  "optionalDependencies": {
-    "lightningcss-darwin-x64": "^1.18.0"
   }
 }

package/src/api/payment.ts

@@ -4,16 +4,8 @@ import { nanoid } from 'nanoid'
 
 import { isBrowser } from '../utils'
 import { publicRequest } from './publicRequest'
-import {
-  ICheckoutCompleteDataResponse,
-  ICheckoutProcessPaymentData,
-  ICheckoutProcessPaymentResponse, IConditionsAdaptedData, IConditionsAdaptedDataResponse, IConditionsDataResponse,
-  IFreeRegistrationDataResponse,
-  IPaymentDataResponse,
-  IPaymentSuccessDataResponse,
-} from '../types/api/payment'
 
-export const getPaymentData = async (hash: string): Promise<IPaymentDataResponse|any> => {
+export const getPaymentData = async (hash: string): Promise<IPaymentDataResponse> => {
   const response: AxiosResponse<IPaymentDataResponse, AxiosRequestConfig> =
     await publicRequest.get(`v1/order/${hash}/review`, {
       headers: { 'Referer-Url': isBrowser ? document.referrer : '' },
@@ -83,11 +75,3 @@ export const getConditions = async (
 
   return returnData.data
 }
-
-export const processPayment = async (orderHash: string, params: any): Promise<ICheckoutProcessPaymentData> => {
-  const queryParams = new URLSearchParams(params)
-  const response: AxiosResponse<ICheckoutProcessPaymentResponse, AxiosRequestConfig> =
-    await publicRequest.post(`v1/order/${orderHash}/process_payment?${queryParams.toString()}`)
-
-  return response.data.data.attributes;
-}

package/src/components/billing-info-container/index.tsx

@@ -6,9 +6,9 @@ import Backdrop from '@mui/material/Backdrop'
 import Button from '@mui/material/Button'
 import { createTheme, ThemeProvider } from '@mui/material/styles'
 import { CSSProperties } from '@mui/styles'
-import { Stripe } from '@stripe/stripe-js'
+import { Stripe, StripeElementsOptions } from '@stripe/stripe-js'
 import axios, { AxiosError } from 'axios'
-import { FastField, Form, Formik, FormikHelpers, FormikProps, FormikValues } from 'formik'
+import { Field, Form, Formik, FormikHelpers, FormikProps, FormikValues } from 'formik'
 import _find from 'lodash/find'
 import _forEach from 'lodash/forEach'
 import _get from 'lodash/get'
@@ -35,11 +35,7 @@ import { updateCheckout } from '../../api/checkout'
 import { withCustomFields } from '../../hoc'
 import { usePixel } from '../../hooks/usePixel'
 import { IBillingInfoData } from '../../types'
-import {
-  ICheckoutMercadoPagoAdditionalData,
-  ICheckoutResponseData,
-  ICheckoutStripeAdditionalData,
-} from '../../types/api/checkout'
+import { ICheckoutResponseData } from '../../types/api/checkout'
 import {
   createCheckoutDataBodyWithDefaultHolder,
   deleteCookieByName,
@@ -55,14 +51,7 @@ import SnackbarAlert from '../common/SnackbarAlert'
 import { ForgotPasswordModal } from '../forgotPasswordModal'
 import { VerificationPendingModal } from '../idVerificationContainer/VerificationPendingModal'
 import { LoginModal } from '../loginModal'
-import {
-  IMercadoPagoProTypeConfig,
-  IPaymentPage,
-  IPaymentTypeConfig,
-  IStripeIntendTypeConfig,
-  PaymentContainer,
-  PaymentType,
-} from '../paymentContainer'
+import { IPaymentPage, PaymentContainer } from '../paymentContainer'
 import { SignupModal } from '../signupModal'
 import TimerWidget from '../timerWidget'
 import { usePaymentRedirect, useStripePayment } from './hooks'
@@ -77,13 +66,6 @@ import {
   ICheckoutBody,
   renderComponentWithProps,
 } from './utils'
-import { initMercadoPago, Wallet } from '@mercadopago/sdk-react'
-import { IMercadoPagoProPaymentMethodData, IStripePaymentMethodData } from '../../types/api/payment'
-
-// Memoized Wallet component to prevent unnecessary re-renders
-const MemoizedWallet = React.memo<{
-  onSubmit: () => Promise<unknown>;
-}>(({ onSubmit }) => <Wallet onSubmit={onSubmit} />)
 
 export interface IBillingInfoPage {
   data?: IBillingInfoData[];
@@ -473,27 +455,6 @@ const BillingInfoContainer = React.memo(
       zip: '',
     })
     const [loading, setLoading] = useState(true)
-
-    // Ref to store Formik helpers for stable Wallet callback
-    const formikHelpersRef = useRef<{
-      setSubmitting: (isSubmitting: boolean) => void;
-      submitForm: () => Promise<any>;
-    } | null>(null)
-
-    // Stable callback for Wallet onSubmit to prevent re-renders
-    const handleWalletSubmit = useCallback(async () => {
-      if (formikHelpersRef.current) {
-        formikHelpersRef.current.setSubmitting(true)
-        const referenceId = await formikHelpersRef.current.submitForm()
-
-        if (referenceId) {
-          return referenceId
-        } else {
-          throw 'Invalid Form'
-        }
-      }
-    }, [])
-
     const [cardLoading, setCardLoading] = useState(false)
     const [isCountriesLoading, setIsCountriesLoading] = useState(true)
     const [error, setError] = useState<string | null>(null)
@@ -537,8 +498,6 @@ const BillingInfoContainer = React.memo(
     const hideBusinessCategoryField =
       !collectMandatoryBusinessCategory && !collectOptionalBusinessCategory
 
-    const [paymentTypeConfig, setPaymentTypeConfig] = useState<IPaymentTypeConfig | IMercadoPagoProTypeConfig | IStripeIntendTypeConfig>({type: PaymentType.STRIPE_INTENTS})
-    const [paymentType, setPaymentType] = useState<string | null>(null)
     const [pendingVerificationMessage, setPendingVerificationMessage] = useState<string>()
     const [reviewData, setReviewData] = useState<any>({})
     const [checkoutData, setCheckoutData] = useState<any>({})
@@ -894,60 +853,6 @@ const BillingInfoContainer = React.memo(
       onCheckoutUpdateSuccess({ expires_at: expirationTime, ...checkoutData })
     }, [checkoutData, cartInfoData])
 
-    useEffect(() => {
-      const total = checkoutUpdateData?.cart_price_breakdown?.total ?? 0;
-
-      if (total <= 0) {
-        setPaymentType(PaymentType.STRIPE_INTENTS)
-        setPaymentTypeConfig({
-          type: PaymentType.STRIPE_INTENTS,
-          elementsOptions: undefined,
-        })
-        return
-      }
-
-      setPaymentType(
-        checkoutUpdateData?.additional_payment_information?.type ??
-          PaymentType.STRIPE_INTENTS
-      )
-
-      if (
-        checkoutUpdateData?.additional_payment_information?.type ===
-        PaymentType.MERCADO_PAGO_PRO
-      ) {
-        const mercadoPagoAdditionalData =
-          checkoutUpdateData?.additional_payment_information as ICheckoutMercadoPagoAdditionalData
-        setPaymentTypeConfig({
-          type: PaymentType.MERCADO_PAGO_PRO,
-          publicKey: mercadoPagoAdditionalData?.public_key,
-        } as IMercadoPagoProTypeConfig)
-      } else {
-        const stripeAdditionalData = checkoutUpdateData?.additional_payment_information as ICheckoutStripeAdditionalData
-        setPaymentTypeConfig({
-          type: PaymentType.STRIPE_INTENTS,
-          publishableKey: stripeAdditionalData?.basic_config?.apiKey,
-          accountId: stripeAdditionalData?.basic_config?.accountId ?? null,
-          onReady: (stripe, elements) => {
-            stripeRef.current = stripe
-            elementsRef.current = elements
-          },
-          elementsOptions: stripeAdditionalData?.elements_config,
-          paymentElementOptions: {
-            wallets: {
-              applePay: stripeAdditionalData?.stripe_wallets?.applePay || 'never',
-              googlePay: stripeAdditionalData?.stripe_wallets?.googlePay || 'never',
-            },
-          },
-        } as IStripeIntendTypeConfig)
-      }
-    }, [checkoutUpdateData])
-
-    useEffect(() => {
-      if (paymentTypeConfig?.type === PaymentType.MERCADO_PAGO_PRO) {
-        initMercadoPago((paymentTypeConfig as IMercadoPagoProTypeConfig)?.publicKey)
-      }
-    }, [paymentTypeConfig?.type, (paymentTypeConfig as IMercadoPagoProTypeConfig)?.publicKey])
-
     // Initialize payment hooks
     usePaymentRedirect({
       stripeRef,
@@ -999,7 +904,6 @@ const BillingInfoContainer = React.memo(
               'data.attributes.cart_price_breakdown',
               {}
             )
-            setCheckoutUpdateData(checkoutResponse.data.attributes)
             setCheckoutData(checkoutDataObj)
             setSingleCheckoutAddOns(mergedAddOns)
           }
@@ -1069,7 +973,7 @@ const BillingInfoContainer = React.memo(
 
     const selectedCountry =
       _find(countries, item => item.code.toLowerCase() === defaultCountry) || {}
-    const initialCountry = selectedCountry.id || _get(userData, 'countryId', '') || countries?.[0]?.id
+    const initialCountry = selectedCountry.id || _get(userData, 'countryId', '') || '1'
 
     const pageUrl = isBrowser ? window.location.href.split('?')[0] : ''
     usePixel(eventId || cartInfoData?.eventId, { page: 'billing', pageUrl })
@@ -1077,9 +981,19 @@ const BillingInfoContainer = React.memo(
       dataWithUniqueIds[0].label = 'Get Your Tables'
     }
 
+    const stripePublishableKey =
+      reviewData?.payment_method?.stripe_publishable_key ||
+      checkoutUpdateData?.additional_payment_information?.basic_config?.apiKey
+    const stripeAccountId =
+      reviewData?.payment_method?.stripe_connected_account ||
+      checkoutUpdateData?.additional_payment_information?.basic_config?.accountId
     const addOnsIncludedOnInvitation =
       additionalConfigs.resale && additionalConfigs.resaleWithAddons
 
+    const elementsOptions: StripeElementsOptions = {
+      ...checkoutUpdateData?.additional_payment_information?.elements_config,
+    }
+
     if (loading || cardLoading || isCountriesLoading || isConfigLoading || !eventId) {
       return (
         <Backdrop
@@ -1091,9 +1005,6 @@ const BillingInfoContainer = React.memo(
       )
     }
 
-    const isMercadoPagoPayment =
-      paymentType === PaymentType.MERCADO_PAGO_PRO && isSinglePageCheckout && !orderIsFree
-
     return (
       <ThemeProvider theme={themeMui}>
         {!!expirationTime && enableTimer && (
@@ -1110,9 +1021,7 @@ const BillingInfoContainer = React.memo(
               {
                 country: initialCountry,
                 state:
-                  _get(userData, 'stateId', '') ||
-                  _get(userData, 'state', '') ||
-                  states?.[0]?.id,
+                  _get(userData, 'stateId', '') || _get(userData, 'state', '') || '1',
                 brand_opt_in: Boolean(optedInFieldValue),
                 ttf_opt_in: ttfOptIn,
                 data_capture: {
@@ -1128,7 +1037,7 @@ const BillingInfoContainer = React.memo(
               ticketsQuantity
             )}
             enableReinitialize={false}
-            onSubmit={async (values, formikHelpers): Promise<any> => {
+            onSubmit={async (values, formikHelpers) => {
               try {
                 // Validation: if phone is required for ticket holders, mark errors and stop submit
                 const flagRequirePhoneLocal = Boolean(configs?.phone_required)
@@ -1150,7 +1059,7 @@ const BillingInfoContainer = React.memo(
                   }
                 }
 
-                if ((!elementsRef.current || !stripeRef.current) && !orderIsFree && !isMercadoPagoPayment) {
+                if ((!elementsRef.current || !stripeRef.current) && !orderIsFree) {
                   setError('Fill in the payment details')
                   return
                 }
@@ -1284,13 +1193,8 @@ const BillingInfoContainer = React.memo(
                       (!Number(total) && !Number(updatedOrderData.total)) ||
                       !Number(updatedOrderData?.pay_now || 0)
                     const paymentMethod = attributes.payment_method || {}
-                    const paymentPlanAvailable = (paymentMethod as IStripePaymentMethodData)?.stripe_payment_plan_enabled ?? false
+                    const paymentPlanAvailable = paymentMethod.stripe_payment_plan_enabled
                     console.log({ paymentPlanAvailable })
-
-                    if (isMercadoPagoPayment) {
-                      return (paymentMethod as IMercadoPagoProPaymentMethodData)?.preference_id ?? null
-                    }
-
                     // Process payment using the hook
                     paymentResponse = await processPayment(
                       paymentDataResponse,
@@ -1331,7 +1235,7 @@ const BillingInfoContainer = React.memo(
                   'response.data.data.hasUnverifiedOrder'
                 )
                 const message = _get(e, 'response.data.message', {}) as
-                  | { password?: string | null; email?: string | null }
+                  | { password?: string | null, email?: string | null }
                   | string
 
                 if (hasUnverifiedOrder && typeof message === 'string') {
@@ -1366,14 +1270,7 @@ const BillingInfoContainer = React.memo(
               }
             }}
           >
-            {(props: FormikProps<any>) => {
-              // Update ref with latest Formik helpers for stable Wallet callback
-              formikHelpersRef.current = {
-                setSubmitting: props.setSubmitting,
-                submitForm: props.submitForm,
-              }
-
-              return (
+            {(props: FormikProps<any>) => (
               <Form onSubmit={props.handleSubmit}>
                 <ErrorFocus />
                 <LogicRunner
@@ -1464,12 +1361,12 @@ const BillingInfoContainer = React.memo(
                     />
                   ) : null}
                   {!cardLoading &&
-                    _map(dataWithUniqueIds, (item) => {
+                    _map(dataWithUniqueIds, item => {
                       const { label, labelClassName, fields } = item
                       return (
                         <div key={item.uniqueId} className="billing-info-fields">
                           <p className={labelClassName}>{label}</p>
-                          {_map(fields, (group) => {
+                          {_map(fields, group => {
                             const { groupClassname, groupItems } = group
                             const filteredGroupItems = filterBillingInfoFields(
                               groupItems,
@@ -1504,14 +1401,12 @@ const BillingInfoContainer = React.memo(
                             return (
                               <React.Fragment key={group.uniqueId}>
                                 <div className={groupClassname}>
-                                  {_map(filteredGroupItems, (element) => {
+                                  {_map(filteredGroupItems, element => {
                                     // Hide password fields in single-page checkout or when user is logged in
                                     const shouldHidePasswordFields =
-                                      [
-                                        'password',
-                                        'confirmPassword',
-                                        'password-info',
-                                      ].includes(element.name) &&
+                                      ['password', 'confirmPassword', 'password-info'].includes(
+                                        element.name
+                                      ) &&
                                       (isLoggedIn || isSinglePageCheckout)
 
                                     return shouldHidePasswordFields ? null : (
@@ -1533,7 +1428,7 @@ const BillingInfoContainer = React.memo(
                                               element.component
                                             )
                                           ) : (
-                                            <FastField
+                                            <Field
                                               {...element}
                                               type={
                                                 element.type === 'radio' ||
@@ -1546,11 +1441,7 @@ const BillingInfoContainer = React.memo(
                                                   ? setPhoneValidationIsLoading
                                                   : undefined
                                               }
-                                              fill={
-                                                element.type === 'phone'
-                                                  ? true
-                                                  : undefined
-                                              }
+                                              fill={element.type === 'phone' ? true : undefined}
                                               label={getFieldLabel(element, configs)}
                                               validate={getValidateFunctions(
                                                 element,
@@ -1563,7 +1454,7 @@ const BillingInfoContainer = React.memo(
                                               component={getFieldComponent(element)}
                                               selectOptions={
                                                 element.name === 'country'
-                                                  ? _map(countries, (item) => ({
+                                                  ? _map(countries, item => ({
                                                       value: item.id,
                                                       label: item.name,
                                                     }))
@@ -1594,9 +1485,7 @@ const BillingInfoContainer = React.memo(
                                   })}
                                 </div>
                                 {/* Show login suggestion if email is registered */}
-                                {group.groupItems.some(
-                                  (el) => el.name === 'confirmEmail'
-                                ) &&
+                                {group.groupItems.some(el => el.name === 'confirmEmail') &&
                                   emailExists &&
                                   !isLoggedIn && (
                                     <div className="email-registered-message">
@@ -1632,14 +1521,14 @@ const BillingInfoContainer = React.memo(
                       {_map(ticketsQuantity, (_item, index) => (
                         <div key={_item}>
                           <h5>Ticket {index + 1}</h5>
-                          {_map(ticketHoldersFields.fields, (group) => {
+                          {_map(ticketHoldersFields.fields, group => {
                             const { id, groupClassname, groupItems } = group
                             return (
                               <div key={id}>
                                 <div className={groupClassname}>
-                                  {_map(groupItems, (element) => (
+                                  {_map(groupItems, element => (
                                     <div className={element.className} key={element.name}>
-                                      <FastField
+                                      <Field
                                         {...element}
                                         type={
                                           element.type === 'radio' ||
@@ -1676,13 +1565,29 @@ const BillingInfoContainer = React.memo(
                     </div>
                   )}
                   <div className="payment-section">
-                    {isSinglePageCheckout && !orderIsFree && paymentTypeConfig?.type === PaymentType.STRIPE_INTENTS && (
+                    {isSinglePageCheckout && !orderIsFree && stripePublishableKey && (
                       <PaymentContainer
-                        paymentTypeConfigs={paymentTypeConfig}
+                        stripePublishableKey={stripePublishableKey}
+                        stripeAccountId={stripeAccountId}
                         formTitle="Payment Information"
                         orderInfoLabel=""
                         enableTimer={false}
                         checkoutData={checkoutData}
+                        elementsOptions={elementsOptions}
+                        paymentElementOptions={{
+                          wallets: {
+                            applePay:
+                              checkoutUpdateData?.additional_payment_information
+                                ?.stripe_wallets?.applePay || 'never',
+                            googlePay:
+                              checkoutUpdateData?.additional_payment_information
+                                ?.stripe_wallets?.googlePay || 'never',
+                          },
+                        }}
+                        onStripeReady={(stripe, elements) => {
+                          stripeRef.current = stripe
+                          elementsRef.current = elements
+                        }}
                         paymentFields={paymentProps.paymentFields || []}
                         onPaymentError={paymentProps.onPaymentError || _identity}
                         handlePayment={paymentProps.handlePayment || _identity}
@@ -1703,28 +1608,24 @@ const BillingInfoContainer = React.memo(
                     {paymentSectionAddon}
                   </div>
                   <div className="button-container">
-                    {isMercadoPagoPayment && <MemoizedWallet onSubmit={handleWalletSubmit} />}
-                    {!isMercadoPagoPayment && (
-                      <Button
-                        type="submit"
-                        variant="contained"
-                        className="login-register-button"
-                        disabled={props.isSubmitting || phoneValidationIsLoading}
-                      >
-                        {props.isSubmitting ? (
-                          <CircularProgress size={26} />
-                        ) : orderIsFree ? (
-                          freeOrderButtonName
-                        ) : (
-                          buttonName
-                        )}
-                      </Button>
-                    )}
+                    <Button
+                      type="submit"
+                      variant="contained"
+                      className="login-register-button"
+                      disabled={props.isSubmitting || phoneValidationIsLoading}
+                    >
+                      {props.isSubmitting ? (
+                        <CircularProgress size={26} />
+                      ) : orderIsFree ? (
+                        freeOrderButtonName
+                      ) : (
+                        buttonName
+                      )}
+                    </Button>
                   </div>
                 </div>
               </Form>
-              )
-            }}
+            )}
           </Formik>
         )}
         {showModalLogin && (

package/src/components/confirmationContainer/index.tsx

@@ -14,7 +14,6 @@ import { IReferralPromotion } from '../../types'
 import { createMarkup, getCookieByName, isBrowser } from '../../utils'
 import { CopyMessageModal } from '../common'
 import SocialButtons from './social-buttons'
-import { ICheckoutCompleteData } from '../../types/api/payment'
 
 export interface IShareButton {
   mainLabel: string;

package/src/components/index.ts

@@ -10,4 +10,3 @@ export { AddonsContainter } from './addonsContainer'
 export { DelegationsContainer } from './delegationsContainer'
 export { SeatMapContainer } from './seatMapContainer'
 export { IDVerification } from './idVerificationContainer'
-export { ProcessRedirectContainer } from './process-redirect-container'

package/src/components/paymentContainer/OrderDetails.tsx

@@ -98,6 +98,11 @@ export const OrderDetails = ({
             currencyNormalizerCreator(
               createFixedFloatNormalizer(2)(parseFloat(item.cost)),
               currency,
+            )}
+          {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
+            currencyNormalizerCreator(
+              createFixedFloatNormalizer(2)(parseFloat(item.price)),
+              currency,
             )}
                             </span>
         <span className="add-on-each">{' each'}</span>
@@ -112,6 +117,11 @@ export const OrderDetails = ({
           )} with fees)`}
         </p>
       )}
+      {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && parseFloat(item.price) - parseFloat(item.cost) > 0 && (
+        <p className="fees">
+          {`(${currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency)} + ${currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price) - parseFloat(item.cost)), currency)} fee)`}
+        </p>
+      )}
     </div>)
   }
 
@@ -136,6 +146,11 @@ export const OrderDetails = ({
               createFixedFloatNormalizer(2)(parseFloat(item.cost)),
               currency,
             )}
+          {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
+            currencyNormalizerCreator(
+              createFixedFloatNormalizer(2)(parseFloat(item.price)),
+              currency,
+            )}
         </span>
         <br/>
         {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && (
@@ -148,6 +163,11 @@ export const OrderDetails = ({
             )} with fees)`}
           </p>
         )}
+        {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && parseFloat(item.price) - parseFloat(item.cost) > 0 && (
+          <p className="fees">
+            {`(${currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency)} + ${currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price) - parseFloat(item.cost)), currency)} fee)`}
+          </p>
+        )}
       </div>
     </div>)
   }