tf-checkout-react 1.6.6-beta.27 → 1.6.6-beta.29

package/src/components/paymentContainer/index.tsx

@@ -20,7 +20,7 @@ import _identity from 'lodash/identity'
 import _isEmpty from 'lodash/isEmpty'
 import _map from 'lodash/map'
 import { nanoid } from 'nanoid'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { getConditions, getPaymentData } from '../../api'
 import { FEES_STYLES } from '../../constants'
@@ -41,21 +41,6 @@ import { PaymentPlanSection } from './PaymentPlanSection'
 
 const publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || ''
 
-const getStripePromise = (reviewData: any) => {
-  const stripePublishableKey =
-    _get(reviewData, 'payment_method.stripe_publishable_key') ||
-    publishableKey ||
-    'pk_test_3Ov1P1oP33A1cxaSjxWE0VjT'
-  const stripeAccount = _get(reviewData, 'payment_method.stripe_connected_account')
-
-  const options: StripeConstructorOptions = {}
-  if (stripeAccount) {
-    options.stripeAccount = stripeAccount
-  }
-
-  return loadStripe(stripePublishableKey, options)
-}
-
 export interface IPaymentPage {
   paymentFields: IPaymentField[];
   handlePayment: any;
@@ -81,6 +66,7 @@ export interface IPaymentPage {
   hideFieldsBlock?: boolean;
   isSinglePageCheckout?: boolean;
   stripePaymentProps?: Partial<ICheckoutForm>;
+  stripePublishableKey?: string;
 }
 
 const initialPaymentPlanConfiguration: IPaymentPlanConfig = {
@@ -124,6 +110,7 @@ const initialReviewValues = {
     stripe_client_secret: '',
     stripe_payment_plan_enabled: false,
     stripe_payment_plan_configuration: {} as any,
+    stripe_publishable_key: '',
   },
   billing_info: {},
   event_details: {
@@ -154,6 +141,7 @@ export const PaymentContainer = ({
   hideFieldsBlock = false,
   isSinglePageCheckout = false,
   stripePaymentProps = {},
+  stripePublishableKey: stripePublishableKeyProps,
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
@@ -219,9 +207,11 @@ export const PaymentContainer = ({
   }, [showPaymentPlanSection, paymentPlanUseSavedCard, orderData?.id])
 
   useEffect(() => {
-    if (isSinglePageCheckout && !orderData?.total) {
-      setPaymentDataIsLoading(false)
-      setOrderData(current => ({ ...current, pay_now: 1, total: 1 }))
+    if (isSinglePageCheckout) {
+      if (!orderData?.total) {
+        setOrderData(current => ({ ...current, pay_now: 1, total: 1 }))
+        setPaymentDataIsLoading(false)
+      }
       return
     }
     (async () => {
@@ -320,6 +310,21 @@ export const PaymentContainer = ({
     return showPaymentForm
   }
 
+  const getStripePromise = useCallback(() => {
+    const stripePublishableKey =
+      stripePublishableKeyProps ||
+      _get(reviewData, 'payment_method.stripe_publishable_key') ||
+      publishableKey
+    const stripeAccount = _get(reviewData, 'payment_method.stripe_connected_account')
+
+    const options: StripeConstructorOptions = {}
+    if (stripeAccount) {
+      options.stripeAccount = stripeAccount
+    }
+
+    return loadStripe(stripePublishableKey, options)
+  }, [reviewData, stripePublishableKeyProps])
+
   const themeMui = createTheme(themeOptions)
   const hasTableTypes = Boolean(Number(orderData.guest_count))
   const paymentFieldsData = hasTableTypes
@@ -541,10 +546,7 @@ export const PaymentContainer = ({
                 <div className="payment_info_label">{paymentInfoLabel}</div>
                 {showErrorText && <p className="payment_info__error">{errorText}</p>}
                 <div>
-                  <Elements
-                    stripe={getStripePromise(reviewData)}
-                    options={elementsOptions}
-                  >
+                  <Elements stripe={getStripePromise()} options={elementsOptions}>
                     <StripePayment
                       stripe_client_secret={
                         paymentPlanIsAvailable && showPaymentPlanSection

package/src/components/paymentContainer/style.css

@@ -52,4 +52,117 @@
 
 .payment_page .payment_plan .payment_plan_highlight {
   font-weight: bold;
+}
+
+
+/* Default styles - mobile section is hidden on desktop */
+.mobile-order-summary {
+  display: none;
+}
+
+/* Mobile-specific styles */
+@media (max-width: 767px) {
+  /* Show mobile summary on mobile devices */
+  .mobile-order-summary {
+    display: block;
+    margin-bottom: 15px;
+    background-color: #f8f8f8;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .mobile-order-summary-content {
+    display: flex;
+    align-items: flex-start;
+    padding: 15px;
+    cursor: pointer;
+  }
+
+  .mobile-order-info-container:after {
+    display: inline-block;
+    content: "⌃";
+    font-weight: 900;
+    font-size: 15px;
+    top: -2px;
+    left: 6px;
+    float: right;
+    position: relative;
+    transform: rotate(180deg);
+    transition: transform 0.25s, top 0.25s;
+  }
+
+  .mobile-order-info-container.open:after {
+    top: 2px;
+    transform: rotate(0deg);
+  }
+
+  .mobile-order-info-container.order-info-container-left {
+    text-align: left;
+  }
+  .mobile-order-info-container.order-info-container-right {
+    text-align: right;
+  }
+
+
+  .mobile-order-icon {
+    margin-right: 15px;
+    color: #1976d2;
+    padding-top: 2px;
+  }
+
+  .mobile-order-info {
+    flex: 1;
+  }
+
+  .mobile-order-text {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 4px;
+  }
+
+  .mobile-order-total {
+    font-size: 18px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 8px;
+  }
+
+  .mobile-order-timer {
+    display: flex;
+    align-items: center;
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px dashed #ddd;
+  }
+
+  .mobile-timer-icon {
+    margin-right: 8px;
+    color: #f44336;
+  }
+
+  .mobile-timer-text {
+    font-size: 13px;
+    color: #666;
+  }
+
+  .mobile-timer-countdown {
+    font-weight: bold;
+    color: #f44336;
+  }
+
+  .mobile-order-expand {
+    color: #666;
+    padding-top: 2px;
+  }
+
+  /* Hide the original content when collapsed on mobile */
+  .order_info_section.collapsed {
+    display: none !important;
+  }
+
+  /* Show the original content when expanded on mobile */
+  .order_info_section.expanded {
+    display: grid !important;
+    margin-top: 10px;
+  }
 }

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

@@ -37,7 +37,7 @@ interface IPaymentMethodData {
   stripe_payment_plan_enabled: boolean;
   stripe_payment_plan_configuration: any;
   stripeConnectedAccount: string;
-  stripePublishableKey: string;
+  stripe_publishable_key: string;
 }
 
 interface IShippingBillingInfoData {
@@ -174,4 +174,4 @@ interface ICheckoutCompleteDataResponse extends IAxiosResponseData {
     relationships: Array<unknown>;
     type: string;
   };
-}
+}

package/src/utils/cookies.ts

@@ -1,4 +1,6 @@
-import { getDomain } from "./getDomain"
+import { getDomain } from './getDomain'
+
+let generalDomain: string
 
 export function setCustomCookie(name: string, value: string, days = 5) {
   let expires = ''
@@ -7,11 +9,25 @@ export function setCustomCookie(name: string, value: string, days = 5) {
     date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)
     expires = '; expires=' + date.toUTCString()
   }
-  if (typeof window !== 'undefined') {
-    const domain = getDomain(window.location.hostname)
-    document.cookie =
-      name + '=' + (value || '') + expires + `; path=/; domain=${domain}`
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  const { hostname } = window.location
+
+  if (generalDomain && generalDomain.endsWith(getDomain(hostname))) {
+    document.cookie = name + '=' + (value || '') + expires + `; path=/;domain=${generalDomain}`
+    return
   }
+
+  let previousDomain = undefined
+  let domain = undefined
+  do {
+    previousDomain = domain
+    domain = getDomain(hostname, undefined, previousDomain)
+    document.cookie = name + '=' + (value || '') + expires + `; path=/;domain=${domain}`
+  } while (getCookieByName(name) === '' && hostname !== domain)
+  generalDomain = domain
 }
 
 export function getCookieByName(cname: string) {
@@ -31,12 +47,27 @@ export function getCookieByName(cname: string) {
 }
 
 export function deleteCookieByName(name: string) {
-  if (typeof window !== 'undefined') {
-    const domain = getDomain(window.location.hostname)
-    document.cookie =
-      name +
-      '=; Path=/' +
-      `; domain=${domain}` +
-      '; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'
+  if (getCookieByName(name) === '') {
+    return
   }
+
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  const { hostname } = window.location
+
+  if (generalDomain && generalDomain.endsWith(getDomain(hostname))) {
+    document.cookie = name + `=; Path=/;domain=${generalDomain}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`
+    return
+  }
+
+  let previousDomain = undefined
+  let domain = undefined
+  do {
+    previousDomain = domain
+    domain = getDomain(hostname, undefined, previousDomain)
+    document.cookie = name + `=; Path=/;domain=${domain}; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`
+  } while (getCookieByName(name) !== '' && hostname !== domain)
+  generalDomain = domain
 }

package/src/utils/getDomain.ts

@@ -1,10 +1,16 @@
-export function getDomain(url: string, subdomain?: string): string {
+export function getDomain(url: string, subdomain?: string, publicSuffix?: string): string {
   let updatedUrl: any = url.replace(/(https?:\/\/)?(www.)?/i, '')
 
   if (!subdomain) {
-    updatedUrl = updatedUrl.split('.')
-
-    updatedUrl = updatedUrl.slice(updatedUrl.length - 2).join('.')
+    if (publicSuffix) {
+      const updatedPublicSuffix = publicSuffix.startsWith('.') ? publicSuffix : '.' + publicSuffix
+      updatedUrl = url.replace(updatedPublicSuffix, '').split('.')
+      updatedUrl = updatedUrl.length > 0 ? updatedUrl[updatedUrl.length - 1] : ''
+      updatedUrl += updatedPublicSuffix
+    } else {
+      updatedUrl = updatedUrl.split(".")
+      updatedUrl = updatedUrl.slice(updatedUrl.length - 2).join(".")
+    }
   }
 
   if (updatedUrl.indexOf('/') !== -1) {