tf-checkout-react 1.7.7 → 1.7.13

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.7",
+  "version": "1.7.13",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/billing-info-container/hooks/useStripePayment.ts

@@ -36,20 +36,13 @@ export const useStripePayment = ({
     if (!isFreeTickets) {
       if (!stripeRef.current) {
         setError('Stripe is not ready')
-        console.log('Stripe is not ready in billing-info-container')
         return null
       }
 
-      console.log('Stripe confirmPayment in billing-info-container')
-
       // Step 1: Submit elements first
       const { error: submitError } = await elementsRef.current.submit()
       if (submitError) {
         setError('' + submitError?.message)
-        console.log(
-          'Stripe elements.submit() error in billing-info-container',
-          submitError
-        )
         return null
       }
 
@@ -68,28 +61,33 @@ export const useStripePayment = ({
       localStorage.setItem('stripe_payment_context', JSON.stringify(paymentContext))
 
       // Step 3: Confirm payment with current page return URL
+      const confirmParams: any = {
+        return_url:
+          window.location.href +
+          (window.location.href.includes('?') ? '&' : '?') +
+          'payment_return=true',
+      }
+      if (values?.phone) {
+        const rawPhone = String(values.phone).replace(/[\s\-().]/g, '')
+        const e164Phone = rawPhone.startsWith('+') ? rawPhone : `+${rawPhone}`
+        confirmParams.payment_method_data = {
+          billing_details: { phone: e164Phone },
+        }
+      }
       const { error: confirmError } = await stripeRef.current.confirmPayment({
         clientSecret:
           paymentDataResponse.data.attributes.payment_method.stripe_client_secret,
         elements: elementsRef.current,
-        confirmParams: {
-          return_url:
-            window.location.href +
-            (window.location.href.includes('?') ? '&' : '?') +
-            'payment_return=true',
-        },
+        confirmParams,
         redirect: 'if_required',
       })
 
       if (confirmError) {
         setError('' + confirmError?.message)
-        console.log('Stripe confirmPayment error in billing-info-container')
         return null
       }
     }
 
-    console.log('Stripe confirmPayment success in billing-info-container')
-
     // Handle payment middleware for non-redirect payments
     let paymentResponse = null
     await handlePaymentMiddleWare(

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

@@ -517,7 +517,7 @@ const BillingInfoContainer = React.memo(
     const orderIsFree = !Number(checkoutData?.total)
 
     useEffect(() => {
-      const hasUniqueId = _get(dataWithUniqueIds, '[0].uniqueId')
+      const hasUniqueId = _get(data, '[0].uniqueId')
       const isEqualData = _isEqual(prevData.current, data)
       if (!hasUniqueId || !isEqualData) {
         setDataWithUniqueIds(assingUniqueIds(data))
@@ -525,7 +525,7 @@ const BillingInfoContainer = React.memo(
           prevData.current = data
         }
       }
-    }, [dataWithUniqueIds, data])
+    }, [data])
 
     const getQuantity = useCallback((cart: any = []) => {
       let qty = 0
@@ -1575,6 +1575,7 @@ const BillingInfoContainer = React.memo(
                         checkoutData={checkoutData}
                         elementsOptions={elementsOptions}
                         paymentElementOptions={{
+                          fields: { billingDetails: { phone: 'never' } },
                           wallets: {
                             applePay:
                               checkoutUpdateData?.additional_payment_information

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>)
   }

package/src/components/paymentContainer/index.tsx

@@ -43,9 +43,11 @@ import { PaymentPlanSection } from './PaymentPlanSection'
 const StripeWrapper = ({
   options,
   onStripeReady,
+  onPaymentElementChange,
 }: {
   options?: StripePaymentElementOptions;
   onStripeReady: (stripe: any, elements: any) => void;
+  onPaymentElementChange?: (event: any) => void;
 }) => {
   const stripe = useStripe()
   const elements = useElements()
@@ -56,7 +58,7 @@ const StripeWrapper = ({
     }
   }, [stripe, elements, onStripeReady])
 
-  return <PaymentElement options={options} />
+  return <PaymentElement options={options} onChange={onPaymentElementChange} />
 }
 
 export interface IPaymentPage {
@@ -86,6 +88,7 @@ export interface IPaymentPage {
   stripePublishableKey?: string;
   stripeAccountId?: string;
   onStripeReady?: (stripe: any, elements: any) => void;
+  onPaymentElementChange?: (event: any) => void;
   enablePaymentPlan?: boolean;
 }
 
@@ -166,6 +169,7 @@ export const PaymentContainer = ({
   stripePublishableKey,
   stripeAccountId,
   onStripeReady = _identity,
+  onPaymentElementChange,
   enablePaymentPlan = true,
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
@@ -531,6 +535,13 @@ export const PaymentContainer = ({
                                           ),
                                           currency
                                         )}
+                                      {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
+                                        currencyNormalizerCreator(
+                                          createFixedFloatNormalizer(2)(
+                                            parseFloat(item.price)
+                                          ),
+                                          currency
+                                        )}
                                     </span>
                                     <span className="add-on-each">{' each'}</span>
                                   </div>
@@ -544,6 +555,11 @@ export const PaymentContainer = ({
                                       )} 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>
@@ -587,6 +603,7 @@ export const PaymentContainer = ({
                       <StripeWrapper
                         onStripeReady={onStripeReady}
                         options={paymentElementOptions}
+                        onPaymentElementChange={onPaymentElementChange}
                       />
                     </Elements>
                   )}

package/src/components/ticketsContainer/TicketsSection.tsx

@@ -71,6 +71,20 @@ export const TicketsSection = ({
         const ticketPriceWithFees = `${priceSymbol} ${(+ticket.basePrice).toFixed(2)}`
         const ticketOldPriceWithFees = `${priceSymbol} ${(+ticket.oldBasePrice).toFixed(2)}`
         const ticketOldPriceWithoutFees = `${priceSymbol} ${(+ticket.oldCost).toFixed(2)}`
+        const ticketFinalPrice = ticket.feeIncluded && !ticket.isForward
+          ? +(ticket.x_face_value || ticket.basePrice)
+          : ticket.feeIncluded ? +ticket.basePrice : +ticket.cost
+        const ticketFinalPriceFormatted = `${priceSymbol} ${Math.round(ticketFinalPrice)}`
+        const ticketOldFinalPrice = ticket.feeIncluded && !ticket.isForward
+          ? +(ticket.x_face_value || ticket.basePrice)
+          : ticket.feeIncluded ? +ticket.oldBasePrice : +ticket.oldCost
+        const ticketOldFinalPriceFormatted = `${priceSymbol} ${Math.round(ticketOldFinalPrice)}`
+        const ticketFeeAmount = (+ticket.basePrice - +ticket.cost).toFixed(2)
+        const ticketBreakdown = !ticket.feeIncluded
+          ? '(+ fees at checkout)'
+          : !ticket.isForward
+            ? null
+            : (parseFloat(ticketFeeAmount) > 0 ? `(${priceSymbol} ${(+ticket.cost).toFixed(2)} + ${priceSymbol} ${ticketFeeAmount} fee)` : null)
 
         const isSoldOut =
           ticket.sold_out ||
@@ -87,15 +101,20 @@ export const TicketsSection = ({
         }
 
         const ticketIsFree = +ticket.price === 0
-        const discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ?
-          ticketOldPriceWithoutFees : ticketOldPriceWithFees
+        const discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
+          ? ticketOldFinalPriceFormatted
+          : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
+            ? ticketOldPriceWithoutFees
+            : ticketOldPriceWithFees
         const ticketPriceElem = isSoldOut
           ? 'SOLD OUT'
           : ticketIsFree
             ? 'FREE'
-            : (CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded)
-              ? ticketPriceWithoutFees
-              : ticketPriceWithFees
+            : CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
+              ? ticketFinalPriceFormatted
+              : (CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded)
+                ? ticketPriceWithoutFees
+                : ticketPriceWithFees
         const isNewGroupTicket = ticket?.groupName !== arr[i - 1]?.groupName
 
         return (
@@ -158,6 +177,8 @@ export const TicketsSection = ({
                         (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')}
                       {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
                         `(${ticketPriceWithFees} with fees)`}
+                      {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
+                        ticketBreakdown}
                     </p>
                   )}
                 </div>
@@ -190,6 +211,20 @@ export const TicketsSection = ({
         const ticketPriceWithFees = `${priceSymbol} ${(+ticket.basePrice).toFixed(2)}`
         const ticketOldPriceWithFees = `${priceSymbol} ${(+ticket.oldBasePrice).toFixed(2)}`
         const ticketOldPriceWithoutFees = `${priceSymbol} ${(+ticket.oldCost).toFixed(2)}`
+        const ticketFinalPrice = ticket.feeIncluded && !ticket.isForward
+          ? +(ticket.x_face_value || ticket.basePrice)
+          : ticket.feeIncluded ? +ticket.basePrice : +ticket.cost
+        const ticketFinalPriceFormatted = `${priceSymbol} ${Math.round(ticketFinalPrice)}`
+        const ticketOldFinalPrice = ticket.feeIncluded && !ticket.isForward
+          ? +(ticket.x_face_value || ticket.basePrice)
+          : ticket.feeIncluded ? +ticket.oldBasePrice : +ticket.oldCost
+        const ticketOldFinalPriceFormatted = `${priceSymbol} ${Math.round(ticketOldFinalPrice)}`
+        const ticketFeeAmount = (+ticket.basePrice - +ticket.cost).toFixed(2)
+        const ticketBreakdown = !ticket.feeIncluded
+          ? '(+ fees at checkout)'
+          : !ticket.isForward
+            ? null
+            : (parseFloat(ticketFeeAmount) > 0 ? `(${priceSymbol} ${(+ticket.cost).toFixed(2)} + ${priceSymbol} ${ticketFeeAmount} fee)` : null)
 
         const isSoldOut =
           ticket.sold_out ||
@@ -206,15 +241,20 @@ export const TicketsSection = ({
         }
 
         const ticketIsFree = +ticket.price === 0
-        const discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded ?
-          ticketOldPriceWithoutFees : ticketOldPriceWithFees
+        const discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
+          ? ticketOldFinalPriceFormatted
+          : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
+            ? ticketOldPriceWithoutFees
+            : ticketOldPriceWithFees
         const ticketPriceElem = isSoldOut
           ? 'SOLD OUT'
           : ticketIsFree
             ? 'FREE'
-            : (CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded)
-              ? ticketPriceWithoutFees
-              : ticketPriceWithFees
+            : CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
+              ? ticketFinalPriceFormatted
+              : (CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded)
+                ? ticketPriceWithoutFees
+                : ticketPriceWithFees
         const isNewGroupTicket = ticket?.groupName !== arr[i - 1]?.groupName
 
         return (
@@ -272,6 +312,8 @@ export const TicketsSection = ({
                         (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')}
                       {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
                         `(${ticketPriceWithFees} with fees)`}
+                      {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
+                        ticketBreakdown}
                     </p>
                   )}
                   {ticket.depositPercent && (

package/src/components/ticketsContainer/TimeSlotTicketRow.tsx

@@ -63,6 +63,20 @@ export const TimeSlotTicketRow = ({
   const ticketPriceWithFees = `${priceSymbol} ${(+ticket.basePrice).toFixed(2)}`
   const ticketOldPriceWithFees = `${priceSymbol} ${(+ticket.oldBasePrice).toFixed(2)}`
   const ticketOldPriceWithoutFees = `${priceSymbol} ${(+ticket.oldCost).toFixed(2)}`
+  const ticketFinalPrice = ticket.feeIncluded && !ticket.isForward
+    ? +(ticket.x_face_value || ticket.basePrice)
+    : ticket.feeIncluded ? +ticket.basePrice : +ticket.cost
+  const ticketFinalPriceFormatted = `${priceSymbol} ${Math.round(ticketFinalPrice)}`
+  const ticketOldFinalPrice = ticket.feeIncluded && !ticket.isForward
+    ? +(ticket.x_face_value || ticket.basePrice)
+    : ticket.feeIncluded ? +ticket.oldBasePrice : +ticket.oldCost
+  const ticketOldFinalPriceFormatted = `${priceSymbol} ${Math.round(ticketOldFinalPrice)}`
+  const ticketFeeAmount = (+ticket.basePrice - +ticket.cost).toFixed(2)
+  const ticketBreakdown = !ticket.feeIncluded
+    ? '(+ fees at checkout)'
+    : !ticket.isForward
+      ? null
+      : (parseFloat(ticketFeeAmount) > 0 ? `(${priceSymbol} ${(+ticket.cost).toFixed(2)} + ${priceSymbol} ${ticketFeeAmount} fee)` : null)
 
   let ticketIsDiscounted = false
   if (ticket.oldPrice && !isSoldOut && ticket.oldPrice !== ticket.price) {
@@ -70,17 +84,20 @@ export const TimeSlotTicketRow = ({
   }
 
   const ticketIsFree = +ticket.price === 0
-  const discountTicketPriceElem =
-    CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
+  const discountTicketPriceElem = CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
+    ? ticketOldFinalPriceFormatted
+    : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
       ? ticketOldPriceWithoutFees
       : ticketOldPriceWithFees
   const ticketPriceElem = isSoldOut
     ? 'SOLD OUT'
     : ticketIsFree
       ? 'FREE'
-      : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
-        ? ticketPriceWithoutFees
-        : ticketPriceWithFees
+      : CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN
+        ? ticketFinalPriceFormatted
+        : CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH || !ticket.feeIncluded
+          ? ticketPriceWithoutFees
+          : ticketPriceWithFees
 
   const handleTimeChange = (event: any) => {
     const selectedTimeKey = event.target.value
@@ -143,6 +160,8 @@ export const TimeSlotTicketRow = ({
                   (ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')}
                 {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
                   `(${ticketPriceWithFees} with fees)`}
+                {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
+                  ticketBreakdown}
               </p>
             )}
           </div>

package/src/constants/index.ts

@@ -1,3 +1,3 @@
 export const X_TF_ECOMMERCE = 'X-TF-ECOMMERCE'
-export const FEES_STYLES = { TRADITIONAL: 'TRADITIONAL', DISPLAY_BOTH: 'DISPLAY_BOTH' }
+export const FEES_STYLES = { TRADITIONAL: 'TRADITIONAL', DISPLAY_BOTH: 'DISPLAY_BOTH', FINAL_WITH_BREAKDOWN: 'FINAL_WITH_BREAKDOWN' }
 export const DEFAULT_FEES_STYLE = FEES_STYLES.TRADITIONAL

package/src/types/api/common.d.ts

@@ -42,6 +42,7 @@ interface ITicketData {
   displayName: string;
   displayTicket: boolean;
   feeIncluded: boolean;
+  feeMode: string;
   feeText: string;
   id: string;
   maxQuantity: number;
@@ -55,6 +56,8 @@ interface ITicketData {
   salesEnded: boolean;
   salesStarted: boolean;
   soldOut: number;
+  x_face_value: number;
+  isForward: boolean;
   soldOutMessage: number | string;
   sortOrder: number;
   tags: Array<string>;