tf-checkout-react 1.6.6-beta.33 → 1.6.6-beta.34

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.6-beta.33",
+  "version": "1.6.6-beta.34",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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

@@ -387,6 +387,7 @@ const BillingInfoContainer = React.memo(
     const hideInstagramField = !collectMandatoryInstagram && !collectOptionalInstagram
     const collectMandatoryBusinessCategory = configs?.collect_mandatory_business_category
     const collectOptionalBusinessCategory = configs?.collect_optional_business_category
+    const eventHasAddons = configs?.has_add_on
     const hideBusinessCategoryField =
       !collectMandatoryBusinessCategory && !collectOptionalBusinessCategory
 
@@ -674,6 +675,10 @@ const BillingInfoContainer = React.memo(
       localStorage.removeItem('checkoutAdditionalConfigs')
     }, [])
 
+    useEffect(() => {
+      onCheckoutUpdateSuccess({ expires_at: expirationTime, ...checkoutData })
+    }, [checkoutData, cartInfoData])
+
     const updateCheckoutWithAddOns = useCallback(
       async (addOns: { [key: string]: number } = {}) => {
         if (!isSinglePageCheckout) return
@@ -708,7 +713,6 @@ const BillingInfoContainer = React.memo(
               {}
             )
             setCheckoutData(checkoutDataObj)
-            onCheckoutUpdateSuccess(checkoutResponse.data.attributes)
             setSingleCheckoutAddOns(mergedAddOns)
           }
         } catch (error) {
@@ -1160,7 +1164,7 @@ const BillingInfoContainer = React.memo(
                       </div>
                     </div>
                   )}
-                  {isSinglePageCheckout && !addOnsIncludedOnInvitation && eventId ? (
+                  {isSinglePageCheckout && !addOnsIncludedOnInvitation && eventHasAddons && eventId ? (
                     <SimpleAddonsContainer
                       {...(addonsProps ?? {})}
                       eventId={eventId}
@@ -1168,7 +1172,7 @@ const BillingInfoContainer = React.memo(
                       configs={configs}
                       onAddOnSelect={onAddOnSelect}
                     />
-                  ) : !addOnsIncludedOnInvitation && includeAddons ? (
+                  ) : !addOnsIncludedOnInvitation && includeAddons && !isSinglePageCheckout ? (
                     <AddonsContainter
                       {...(addonsProps ?? {})}
                       addOnDataWithCustomFields={addOnDataWithCustomFields}

package/src/components/paymentContainer/OrderDetails.tsx

@@ -2,23 +2,66 @@
 import _identity from 'lodash/identity'
 import _isEmpty from 'lodash/isEmpty'
 import _map from 'lodash/map'
-import React, { useState } from 'react'
+import React, { memo, useState } from 'react'
 
 import { FEES_STYLES } from '../../constants'
 import { createFixedFloatNormalizer, currencyNormalizerCreator } from '../../normalizers'
 import { IOrderData } from '../../types'
 import { CONFIGS } from '../../utils'
+import Countdown from 'react-countdown'
+import { showZero } from '../../utils/showZero'
+import { IRenderer } from '../timerWidget'
 
 interface OrderDetailsProps {
   orderData: any;
   paymentFieldsData: any[];
   customMobileText?: string;
+  handleCountdownFinish?: () => void;
 }
 
+interface CountdownI {
+  expiresAt: number;
+  handleCountdownFinish: () => void;
+}
+
+const SimpleCountdown = memo(({ expiresAt, handleCountdownFinish }: CountdownI) => {
+  const renderer = ({
+                      minutes,
+                      seconds,
+                      completed,
+                      handleCountdownFinish,
+                    }: IRenderer) => {
+    if (completed) {
+      handleCountdownFinish()
+      return null
+    }
+    return (
+      <span>
+        {showZero(minutes)}:{showZero(seconds)}
+      </span>
+    )
+  }
+
+  return (<div className="mobile-order-timer">
+    {expiresAt && (
+      <Countdown
+        date={Date.now() + expiresAt * 1000}
+        renderer={(props: any) =>
+          renderer({
+            ...props,
+            handleCountdownFinish,
+          })
+        }
+      />
+    )}
+  </div>)
+})
+
 export const OrderDetails = ({
   orderData = {},
   paymentFieldsData = [],
   customMobileText = 'Your order total',
+  handleCountdownFinish = _identity
 }: OrderDetailsProps) => {
   const { currency, guest_count } = orderData
   const hasTableTypes = Boolean(Number(guest_count))
@@ -37,6 +80,78 @@ export const OrderDetails = ({
     setIsExpanded(!isExpanded)
   }
 
+  const defaultItemRenderer = (item: any) => {
+    return (<div>
+      <div key={item.id} className="add-on-container">
+        <span>{item.quantity}</span>
+        <span className="add-on-x">{' x '}</span>
+        <span>{item.groupName ? item.groupName + ' - ' : ''}</span>
+        <span>{item.name}</span>
+        <span>{' - '}</span>
+        <span>
+          {CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL &&
+            currencyNormalizerCreator(
+              createFixedFloatNormalizer(2)(parseFloat(item.price)),
+              currency,
+            ) + ' (incl. fees)'}
+          {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
+            currencyNormalizerCreator(
+              createFixedFloatNormalizer(2)(parseFloat(item.cost)),
+              currency,
+            )}
+                            </span>
+        <span className="add-on-each">{' each'}</span>
+      </div>
+      {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && (
+        <p className="fees">
+          {`(${currencyNormalizerCreator(
+            createFixedFloatNormalizer(2)(
+              parseFloat(String(item.price)),
+            ),
+            currency,
+          )} with fees)`}
+        </p>
+      )}
+    </div>)
+  }
+
+  const defaultTableRenderer = (item: any) => {
+    return (<div>
+      <div key={item.id} className="table-type-container">
+        <span>{item.groupName ? item.groupName + ' - ' : ''}</span>
+        <span>{item.name}</span>
+        <span>{' - '}</span>
+        <span>Guest Count{': '}</span>
+        <span>{item.guestCount}</span>
+      </div>
+      <div>
+        <span>
+          {CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL &&
+            currencyNormalizerCreator(
+              createFixedFloatNormalizer(2)(parseFloat(item.price)),
+              currency,
+            ) + ' (incl. fees)'}
+          {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
+            currencyNormalizerCreator(
+              createFixedFloatNormalizer(2)(parseFloat(item.cost)),
+              currency,
+            )}
+        </span>
+        <br/>
+        {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && (
+          <p className="fees">
+            {`(${currencyNormalizerCreator(
+              createFixedFloatNormalizer(2)(
+                parseFloat(String(item.price)),
+              ),
+              currency,
+            )} with fees)`}
+          </p>
+        )}
+      </div>
+    </div>)
+  }
+
   return (
     <div className="payment_page payment_page_single">
       {/* Mobile view summary */}
@@ -50,11 +165,14 @@ export const OrderDetails = ({
             >
               <div className="mobile-order-text">{customMobileText}</div>
             </div>
-            {!isExpanded && (
-              <div className="mobile-order-info-container order-info-container-right">
+            <div className="mobile-order-info-container order-info-container-right">
+              {!isExpanded && (
                 <div className="mobile-order-total">{totalValue}</div>
-              </div>
-            )}
+              )}
+              {orderData?.expires_at && (
+                <SimpleCountdown expiresAt={orderData?.expires_at} handleCountdownFinish={handleCountdownFinish} />
+              )}
+            </div>
           </div>
         </div>
       </div>
@@ -126,39 +244,8 @@ export const OrderDetails = ({
                   {typeof value === 'string' || typeof value === 'number'
                     ? normalizer(value, currency, orderData)
                     : _map(value, item => (
-                        <div>
-                          <div key={item.id} className="add-on-container">
-                            <span>{item.quantity}</span>
-                            <span className="add-on-x">{' x '}</span>
-                            <span>{item.groupName ? item.groupName + ' - ' : ''}</span>
-                            <span>{item.name}</span>
-                            <span>{' - '}</span>
-                            <span>
-                              {CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL &&
-                                currencyNormalizerCreator(
-                                  createFixedFloatNormalizer(2)(parseFloat(item.price)),
-                                  currency
-                                ) + ' (incl. fees)'}
-                              {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
-                                currencyNormalizerCreator(
-                                  createFixedFloatNormalizer(2)(parseFloat(item.cost)),
-                                  currency
-                                )}
-                            </span>
-                            <span className="add-on-each">{' each'}</span>
-                          </div>
-                          {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && (
-                            <p className="fees">
-                              {`(${currencyNormalizerCreator(
-                                createFixedFloatNormalizer(2)(
-                                  parseFloat(String(item.price))
-                                ),
-                                currency
-                              )} with fees)`}
-                            </p>
-                          )}
-                        </div>
-                      ))}
+                      item.isTable ? defaultTableRenderer(item) : defaultItemRenderer(item)
+                    ))}
                 </div>
               </div>
             )

package/src/env.ts

@@ -1,13 +1,21 @@
 // preview
 export const ENV = {
-  EVENT_ID: 13119,
-  BASE_URL: 'https://test.ticketfairy.com',
-  CLIENT_ID: 'e9d8f8922797b4621e562255afe90dbf',
-  CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
+  // EVENT_ID: 13090,
+  // BASE_URL: 'https://test.ticketfairy.com',
+  // CLIENT_ID: 'e9d8f8922797b4621e562255afe90dbf',
+  // CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
+  // STRIPE_PUBLISHABLE_KEY:
+  //   'pk_test_51H4BkOGqveRD6EShliLrT9vd7mPOBPvQSuqmvc3wIinDqxWsCLeS2N7HonPPn6MhjU35ayYy5v4I6MLlD4jNWrd000NSgAF6UL',
+  // BRAND_SLUG: 'test-mana-brand',
+  // X_SOURCE_ORIGIN: 'manacommon.com'
+  EVENT_ID: 6607,
+  BASE_URL: 'https://ttf.localhost',
+  CLIENT_ID: '11b907373250ac4813129922b039a828',
+  CLIENT_SECRET: '48118a9b8ffd4b120dc63861e6d6c0202fef4a5dbc46b53b',
   STRIPE_PUBLISHABLE_KEY:
     'pk_test_51H4BkOGqveRD6EShliLrT9vd7mPOBPvQSuqmvc3wIinDqxWsCLeS2N7HonPPn6MhjU35ayYy5v4I6MLlD4jNWrd000NSgAF6UL',
-  BRAND_SLUG: 'mana-common',
-  X_SOURCE_ORIGIN: 'tickets-staging.manacommon.com',
+  BRAND_SLUG: 'nop',
+  X_SOURCE_ORIGIN: 'ttf.localhost'
 }
 
 // prod