tf-checkout-react 1.6.6 → 1.7.2

package/src/components/paymentContainer/style.css

@@ -46,10 +46,151 @@
   text-align: center;
 }
 
+.payment_page .payment_method_selector {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+  justify-content: center;
+}
+
+.payment_page .payment_method_option {
+  padding: 12px 24px;
+  border: 2px solid #e0e0e0;
+  border-radius: 8px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.payment_page .payment_method_option:hover {
+  border-color: #999;
+}
+
+.payment_page .payment_method_option.selected {
+  border-color: #1976d2;
+  background-color: #e3f2fd;
+  color: #1976d2;
+}
+
 .payment_page .payment_plan .payment_plan_block .payment_plan_text {
   padding-bottom: 10px;
 }
 
 .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/components/preRegistration/FieldsSection.tsx

@@ -11,6 +11,8 @@ import {
 } from '../common'
 import { DatePickerField } from '../common/DatePickerField'
 import { getValidateFunctions } from './utils'
+import {ThemeOptions} from "@mui/material";
+import {CSSProperties} from "@mui/styles";
 
 const isDocumentDefined = typeof document !== 'undefined'
 
@@ -25,6 +27,10 @@ export interface IFieldsSectionProps {
 
   countries?: { [key: string]: string | number }[];
   theme?: 'dark' | 'light';
+  themeOptions?: ThemeOptions & {
+    input?: CSSProperties;
+    checkbox?: CSSProperties;
+  };
   containerClass?: string;
 }
 
@@ -66,6 +72,7 @@ export const FieldsSection = ({
   setFieldValue,
   theme,
   containerClass = '',
+  themeOptions,
 }: IFieldsSectionProps) => (
   <>
     {_map(formFields, (item, index) => {
@@ -129,6 +136,7 @@ export const FieldsSection = ({
                       }
                       selectOptions={name === 'country' ? countries : options}
                       theme={theme}
+                      themeOptions={themeOptions}
                     />
                   </div>
                 )

package/src/components/preRegistration/PreRegistrationComplete.tsx

@@ -1,11 +1,15 @@
+import { ThemeOptions } from '@mui/material'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
+import { CSSProperties } from '@mui/styles'
 import axios, { AxiosError } from 'axios'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 import _isEmpaty from 'lodash/isEmpty'
 import React, { FC, useEffect, useState } from 'react'
+import "./style.css"
 
 import {
-  getPreRegistrationInfluancers,
+  getPreRegistrationInfluencers,
   getPreRegistrationShareOptions,
 } from '../../api/preRegistrationComplete'
 import { X_TF_ECOMMERCE } from '../../constants'
@@ -22,6 +26,11 @@ const isWindowDefined = typeof window !== 'undefined'
 export const PreRegistrationComplete: FC<
   IPreRegistrationCompleteProps & {
     onGetConfirmationDataError?: (error: AxiosError) => void;
+    skipInitialValidation?: boolean;
+    themeOptions?: ThemeOptions & {
+      input?: CSSProperties;
+      checkbox?: CSSProperties;
+    };
   }
 > = ({
   eventId: pEventId,
@@ -34,131 +43,142 @@ export const PreRegistrationComplete: FC<
   pageMessage = 'Pre registration was successful!',
   onLoginSuccess = _identity,
   logo,
+  themeOptions,
+  skipInitialValidation = false,
 }) => {
-  const localStorageHash = isWindowDefined
-    ? localStorage.getItem('pre-registration-hash')
-    : ''
-  const queryHash = getQueryVariable('hash') || ''
-  queryHash &&
-    isWindowDefined &&
-    window.localStorage.setItem('pre-registration-hash', queryHash)
-  const hash = queryHash || localStorageHash
-  const [isLoggedIn, setIsLoggedIn] = useState(Boolean(getCookieByName(X_TF_ECOMMERCE)))
-  const [showModalLogin, setShowModalLogin] = useState(!isLoggedIn)
-  const [showCopyModal, setShowCopyModal] = useState(false)
-  const [prizes, setPrizes] = useState([] as Array<IPrizeData>)
-  const [shareOptions, setShareOptions] = useState({} as IShareOptionsData)
-  const [shareActionData, setShareActionData] = useState(
-    {} as ISubmitShareActionAttributes
-  )
-  const [error, setError] = useState({} as AxiosError)
-  useCookieListener(X_TF_ECOMMERCE, value => setIsLoggedIn(Boolean(value)))
-  useEffect(() => {
-    const fetchConfirmationData = async () => {
-      try {
-        if (hash && isLoggedIn) {
-          const shareOptionsData = await getPreRegistrationShareOptions({
-            hash,
-          })
-          const { attributes } = shareOptionsData.data
-          setShareOptions(shareOptionsData.data)
-          setShareActionData({
-            shareActionToken: attributes.shareActionToken,
-            tokenShuffleMethod: attributes.tokenShuffleMethod,
-          })
-          const eventId = _get(shareOptionsData, 'data.attributes.eventId')
-          if (eventId || pEventId) {
-            const influencersData = await getPreRegistrationInfluancers({
-              eventId: eventId || pEventId,
-            })
-            setPrizes(influencersData.data.attributes.prizes)
-          }
+    const themeMui = createTheme(themeOptions)
+
+    const localStorageHash = isWindowDefined
+      ? localStorage.getItem('pre-registration-hash')
+      : ''
+    const queryHash = getQueryVariable('hash') || ''
+    queryHash &&
+      isWindowDefined &&
+      window.localStorage.setItem('pre-registration-hash', queryHash)
+    const hash = queryHash || localStorageHash
+    const [isLoggedIn, setIsLoggedIn] = useState(Boolean(getCookieByName(X_TF_ECOMMERCE)))
+    const [showModalLogin, setShowModalLogin] = useState(!isLoggedIn)
+    const [showCopyModal, setShowCopyModal] = useState(false)
+    const [prizes, setPrizes] = useState([] as Array<IPrizeData>)
+    const [shareOptions, setShareOptions] = useState({} as IShareOptionsData)
+    const [shareActionData, setShareActionData] = useState(
+      {} as ISubmitShareActionAttributes
+    )
+    const [error, setError] = useState({} as AxiosError)
+    useCookieListener(X_TF_ECOMMERCE, value => setIsLoggedIn(Boolean(value)))
+    useEffect(() => {
+      const fetchConfirmationData = async () => {
+        // Skip validation if this is a freshly completed pre-registration
+        if (skipInitialValidation) {
           onGetConfirmationDataSuccess()
+          return
         }
-      } catch (error) {
-        if (axios.isAxiosError(error)) {
-          setError(error.response?.data)
+
+        try {
+          if (hash && isLoggedIn) {
+            const shareOptionsData = await getPreRegistrationShareOptions({
+              hash,
+            })
+            const { attributes } = shareOptionsData.data
+            setShareOptions(shareOptionsData.data)
+            setShareActionData({
+              shareActionToken: attributes.shareActionToken,
+              tokenShuffleMethod: attributes.tokenShuffleMethod,
+            })
+            const eventId = _get(shareOptionsData, 'data.attributes.eventId')
+            if (eventId || pEventId) {
+              const influencersData = await getPreRegistrationInfluencers({
+                eventId: eventId || pEventId,
+              })
+              setPrizes(influencersData.data.attributes.prizes)
+            }
+            onGetConfirmationDataSuccess()
+          }
+        } catch (error) {
+          if (axios.isAxiosError(error)) {
+            setError(error.response?.data as AxiosError)
+          }
         }
       }
-    }
-    fetchConfirmationData()
-  }, [
-    pEventId,
-    hash,
-    onGetConfirmationDataError,
-    onGetConfirmationDataSuccess,
-    isLoggedIn,
-  ])
+      fetchConfirmationData()
+    }, [
+      pEventId,
+      hash,
+      onGetConfirmationDataError,
+      onGetConfirmationDataSuccess,
+      isLoggedIn,
+      skipInitialValidation,
+    ])
 
-  const onClose = () => {
-    setShowCopyModal(false)
-  }
+    const onClose = () => {
+      setShowCopyModal(false)
+    }
 
-  const updateShareActionData = async () => {
-    if (hash) {
-      const shareOptionsData = await getPreRegistrationShareOptions({
-        hash,
-      })
-      setShareOptions(shareOptionsData.data)
-      setShareActionData({
-        shareActionToken: shareOptionsData.data.attributes.shareActionToken,
-        tokenShuffleMethod: shareOptionsData.data.attributes.tokenShuffleMethod,
-      })
+    const updateShareActionData = async () => {
+      if (hash) {
+        const shareOptionsData = await getPreRegistrationShareOptions({
+          hash,
+        })
+        setShareOptions(shareOptionsData.data)
+        setShareActionData({
+          shareActionToken: shareOptionsData.data.attributes.shareActionToken,
+          tokenShuffleMethod: shareOptionsData.data.attributes.tokenShuffleMethod,
+        })
+      }
     }
-  }
-  return (
-    <>
-      {isLoggedIn && _isEmpaty(error) ? (
-        <div className={`${classNamePrefix}_pre_registration_complete_container`}>
-          <CopyMessageModal showCopyModal={showCopyModal} onClose={onClose} />
-          <p className={`${classNamePrefix}_pre_registration_complete_header`}>
-            {pageHeader}
-          </p>
-          <div className={`${classNamePrefix}_pre_registration_complete_message`}>
-            {pageMessage}
-          </div>
-          <div className={`${classNamePrefix}_pre_registration_complete_body`}>
-            {!_isEmpaty(prizes) && (
-              <Prewards classNamePrefix={classNamePrefix} data={prizes} />
-            )}
+    return (
+      <ThemeProvider theme={themeMui}>
+        {isLoggedIn && _isEmpaty(error) ? (
+          <div className={`${classNamePrefix}_pre_registration_complete_container`}>
+            <CopyMessageModal showCopyModal={showCopyModal} onClose={onClose} />
+            <h2 className={`${classNamePrefix}_pre_registration_complete_header preregistration_confirmation_header`}>
+              {pageHeader}
+            </h2>
+            <div className={`${classNamePrefix}_pre_registration_complete_message`}>
+              {pageMessage}
+            </div>
+            <div className={`${classNamePrefix}_pre_registration_complete_body`}>
+              {!_isEmpaty(prizes) && (
+                <Prewards classNamePrefix={classNamePrefix} data={prizes} />
+              )}
 
-            {!_isEmpaty(shareOptions) && (
-              <ShareOptions
-                classNamePrefix={classNamePrefix}
-                data={shareOptions}
-                onLinkCopied={() => {
-                  setShowCopyModal(true)
-                  onLinkCopied()
-                }}
-                shareActionData={shareActionData}
-                updateShareActionData={updateShareActionData}
-                hasCopyIcon={hasCopyIcon}
-                hash={hash}
-              />
-            )}
+              {!_isEmpaty(shareOptions) && (
+                <ShareOptions
+                  classNamePrefix={classNamePrefix}
+                  data={shareOptions}
+                  onLinkCopied={() => {
+                    setShowCopyModal(true)
+                    onLinkCopied()
+                  }}
+                  shareActionData={shareActionData}
+                  updateShareActionData={updateShareActionData}
+                  hasCopyIcon={hasCopyIcon}
+                  hash={hash}
+                />
+              )}
+            </div>
           </div>
-        </div>
-      ) : (
-        showModalLogin && (
-          <LoginModal
-            logo={logo}
-            onClose={() => {
-              setShowModalLogin(false)
-            }}
-            onLogin={res => {
-              setShowModalLogin(false)
-              onLoginSuccess(res)
-            }}
+        ) : (
+          showModalLogin && (
+            <LoginModal
+              logo={logo}
+              onClose={() => {
+                setShowModalLogin(false)
+              }}
+              onLogin={res => {
+                setShowModalLogin(false)
+                onLoginSuccess(res)
+              }}
+            />
+          )
+        )}
+        {!_isEmpaty(error) && (
+          <ConfirmModal
+            hideCancelBtn
+            message={error.message}
+            onConfirm={() => onGetConfirmationDataError(error)}
           />
-        )
-      )}
-      {!_isEmpaty(error) && (
-        <ConfirmModal
-          hideCancelBtn
-          message={error.message}
-          onConfirm={() => onGetConfirmationDataError(error)}
-        />
-      )}
-    </>
-  )
-}
+        )}
+      </ThemeProvider>
+    )
+  }

package/src/components/preRegistration/PreRegistrationInformations.tsx

@@ -1,8 +1,9 @@
+import { createTheme, ThemeProvider } from '@mui/material/styles'
 import _identity from 'lodash/identity'
 import _slice from 'lodash/slice'
 import React, { useEffect, useState } from 'react'
 
-import { getPreRegistrationInfluancers } from '../../api/preRegistrationComplete'
+import { getPreRegistrationInfluencers } from '../../api/preRegistrationComplete'
 import { Influancers } from './Influancers'
 import { Prewards } from './Prewards'
 
@@ -14,15 +15,18 @@ export const PreRegistrationInformations = (props: IPreRegistrationInformationPr
     onGetPreregistrationDataError = _identity,
     influancersHeaderNode,
     prewardsHeaderNode,
+    themeOptions,
   } = props
 
+  const themeMui = createTheme(themeOptions)
+
   const [prizes, setPrizes] = useState([] as Array<IPrizeData>)
-  const [influencers, setInfluencers] = useState([] as Array<IInfluancerData>)
+  const [influencers, setInfluencers] = useState([] as Array<IInfluencerData>)
   const topInfluancers = _slice(influencers, 0, 10)
   useEffect(() => {
     const fetchPreregistrationData = async () => {
       try {
-        const preregistrationData = await getPreRegistrationInfluancers({
+        const preregistrationData = await getPreRegistrationInfluencers({
           eventId,
         })
         setPrizes(preregistrationData.data.attributes.prizes)
@@ -38,17 +42,19 @@ export const PreRegistrationInformations = (props: IPreRegistrationInformationPr
   }, [eventId, onGetPreregistrationDataError, onGetPreregistrationDataSuccess])
 
   return (
-    <div className={`${classNamePrefix}_pre_registration_info_container`}>
-      <Prewards
-        headerNode={prewardsHeaderNode}
-        data={prizes}
-        classNamePrefix={classNamePrefix}
-      />
-      <Influancers
-        headerNode={influancersHeaderNode}
-        data={topInfluancers}
-        classNamePrefix={classNamePrefix}
-      />
-    </div>
+    <ThemeProvider theme={themeMui}>
+      <div className={`${classNamePrefix}_pre_registration_info_container`}>
+        <Prewards
+          headerNode={prewardsHeaderNode}
+          data={prizes}
+          classNamePrefix={classNamePrefix}
+        />
+        <Influancers
+          headerNode={influancersHeaderNode}
+          data={topInfluancers}
+          classNamePrefix={classNamePrefix}
+        />
+      </div>
+    </ThemeProvider>
   )
 }

package/src/components/preRegistration/constants.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 
-export const formFieldsNotLoggedIn: IFormFieldsSection[] = [
+export const getFormFieldsNotLoggedIn = (
+  clientName?: string | number
+): IFormFieldsSection[] => [
   {
     name: 'basic-info',
     groupLabel: (
@@ -76,7 +78,7 @@ export const formFieldsNotLoggedIn: IFormFieldsSection[] = [
     groupLabel: (
       <div className="email-info-block">
         <span>Choose a password for your new</span>
-        <b> Mana Common </b>
+        <b> {clientName || 'Mana Common'} </b>
         <span>account</span>
       </div>
     ),
@@ -103,7 +105,9 @@ export const formFieldsNotLoggedIn: IFormFieldsSection[] = [
   },
 ]
 
-export const formFieldsLoggedIn: IFormFieldsSection[] = [
+export const getFormFieldsLoggedIn = (
+  clientName?: string | number
+): IFormFieldsSection[] => [
   {
     name: 'basic-info-logged-in',
     groupLabel:
@@ -153,7 +157,9 @@ export const formFieldsLoggedIn: IFormFieldsSection[] = [
       },
       {
         name: 'brandOptIn',
-        label: 'I would like to be updated on Mana Common news, events and offers.',
+        label: `I would like to be updated on ${
+          clientName || 'Mana Common'
+        } news, events and offers.`,
         type: 'checkbox',
       },
     ],