tf-checkout-react 1.7.30 → 2.0.0-beta.0

package/src/components/paymentContainer/style.css

@@ -1,196 +0,0 @@
-.payment_page {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Icons16, sans-serif;
-}
-.payment_page .order_info_section {
-  padding: 15px 0;
-}
-.payment_page .order_info_section .order_info_block {
-  padding-bottom: 15px;
-  padding-top: 15px;
-}
-.payment_page .order_info_section .order_info_block .field-underline {
-  border-bottom: 1px solid #000;
-  padding-bottom: 15px;
-}
-.payment_page .order_info_section .order_info_block .order_info_title {
-  font-size: 14px;
-  font-weight: 700;
-  padding-bottom: 3px;
-}
-.payment_page .order_info_section .order_info_block .order_info_text {
-  font-size: 16px;
-  line-height: 1.15;
-  outline: none;
-}
-.payment_page .MuiBox-root {
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 20px;
-}
-.payment_page .payment_info_label {
-  padding: 20px 0;
-  text-align: center;
-}
-.payment_page .payment_form {
-  padding: 20px;
-  color: #fff;
-}
-.payment_page .payment_form input,
-.payment_page .payment_form label {
-  color: #fff;
-}
-.payment_page .payment_button {
-  padding-top: 20px;
-  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

@@ -1,150 +0,0 @@
-import { Field, FormikValues } from 'formik'
-import _map from 'lodash/map'
-import React, { FC } from 'react'
-
-import { replaceVarInString } from '../../utils'
-import {
-  CheckboxField,
-  CustomField,
-  NativeSelectField,
-  PhoneNumberField,
-} 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'
-
-export interface IFieldsSectionProps {
-  formFields?: IFormFieldsSection[];
-  values: FormikValues;
-  setFieldValue: (
-    field: string,
-    value: FormikValues,
-    shouldValidate?: boolean | undefined
-  ) => void;
-
-  countries?: { [key: string]: string | number }[];
-  theme?: 'dark' | 'light';
-  themeOptions?: ThemeOptions & {
-    input?: CSSProperties;
-    checkbox?: CSSProperties;
-  };
-  containerClass?: string;
-}
-
-const SectionContainer: FC<{ className: string }> = ({
-  children,
-  className,
-}) => <div className={className}>{children}</div>
-
-const insertHTML = (elementId: string, text = '') => {
-  if (isDocumentDefined) {
-    const elem = document && document.getElementById(elementId)
-
-    if (!elem?.childNodes.length) {
-      elem?.insertAdjacentHTML('afterbegin', text)
-    }
-  }
-
-  return null
-}
-
-const getFieldClassNames = (id: string, existingClassNames: string) => {
-  if (isDocumentDefined) {
-    const elem = document && document.getElementById(id)
-
-    if ((elem?.parentElement?.clientWidth || 0) < 375) {
-      return existingClassNames + ' full-width'
-    }
-  }
-
-  return existingClassNames
-}
-
-export const FieldsSection = ({
-  formFields = [],
-
-  countries = [],
-
-  values,
-  setFieldValue,
-  theme,
-  containerClass = '',
-  themeOptions,
-}: IFieldsSectionProps) => (
-  <>
-    {_map(formFields, (item, index) => {
-      const {
-        name,
-        groupLabel,
-        groupLabelVars = [],
-        groupLabelClassName,
-        groupClassName = '',
-        fields,
-      } = item
-      return (
-        <SectionContainer key={name} className={groupClassName}>
-          <span id={`group_label_${index}`} className={groupLabelClassName}>
-            {typeof groupLabel === 'string'
-              ? insertHTML(
-                  `group_label_${index}`,
-                  replaceVarInString(groupLabel, groupLabelVars)
-                )
-              : groupLabel}
-          </span>
-          <div className={`fields-container ${groupClassName}`}>
-            {_map(fields, (fieldData, fieldIndex) => {
-              const {
-                name,
-                label,
-                className = 'full-width',
-                type,
-                component,
-                options = [],
-              } = fieldData
-              const id = `${name}-${fieldIndex}`
-              const classNames = `${containerClass}-container__field ${className}`
-
-              return (
-                component || (
-                  <div
-                    key={name}
-                    id={id}
-                    className={getFieldClassNames(id, classNames)}
-                  >
-                    <Field
-                      name={name}
-                      label={label}
-                      type={type}
-                      validate={getValidateFunctions({
-                        element: fieldData,
-                        values,
-                      })}
-                      setFieldValue={setFieldValue}
-                      component={
-                        type === 'checkbox'
-                          ? CheckboxField
-                          : type === 'select'
-                          ? NativeSelectField
-                          : type === 'phone'
-                          ? PhoneNumberField
-                          : type === 'date'
-                          ? DatePickerField
-                          : CustomField
-                      }
-                      selectOptions={name === 'country' ? countries : options}
-                      theme={theme}
-                      themeOptions={themeOptions}
-                    />
-                  </div>
-                )
-              )
-            })}
-          </div>
-        </SectionContainer>
-      )
-    })}
-  </>
-)

package/src/components/preRegistration/Influancers.tsx

@@ -1,34 +0,0 @@
-import _isEmpty from 'lodash/isEmpty'
-import _map from 'lodash/map'
-import React from 'react'
-
-export const Influancers = (props: IInfluancersProps) => {
-  const {
-    data,
-    classNamePrefix,
-    headerNode = (
-      <>
-        TOP
-        <span>&nbsp;INFLUANCERS</span>
-      </>
-    ),
-  } = props
-  return (
-    <div className={`${classNamePrefix}_influencers_container`}>
-      {!_isEmpty(data) && (
-        <div className={`${classNamePrefix}_influencers_header`}>{headerNode}</div>
-      )}
-      <div className={`${classNamePrefix}_influencers`}>
-        {_map(data, (influencer, index) => (
-          <div key={influencer.prereg_id} className={`${classNamePrefix}_influencer`}>
-            <span className={`${classNamePrefix}_influencer_index`}>{index + 1}</span>
-            <span className={`${classNamePrefix}_influencer_title`}>INFLUENCER</span>
-            <span className={`${classNamePrefix}_influencer_name`}>
-              {influencer.name}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}

package/src/components/preRegistration/PreRegistrationComplete.tsx

@@ -1,186 +0,0 @@
-import "./style.css"
-
-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 {
-  getPreRegistrationInfluencers,
-  getPreRegistrationShareOptions,
-} from '../../api/preRegistrationComplete'
-import { X_TF_ECOMMERCE } from '../../constants'
-import { useCookieListener } from '../../hooks'
-import { getCookieByName, getQueryVariable } from '../../utils'
-import { CopyMessageModal } from '../common'
-import ConfirmModal from '../confirmModal'
-import { LoginModal } from '../loginModal'
-import { Prewards } from './Prewards'
-import { ShareOptions } from './ShareOptions'
-
-const isWindowDefined = typeof window !== 'undefined'
-
-export const PreRegistrationComplete: FC<
-  IPreRegistrationCompleteProps & {
-    onGetConfirmationDataError?: (error: AxiosError) => void;
-    skipInitialValidation?: boolean;
-    themeOptions?: ThemeOptions & {
-      input?: CSSProperties;
-      checkbox?: CSSProperties;
-    };
-  }
-> = ({
-  eventId: pEventId,
-  classNamePrefix = '',
-  onLinkCopied = _identity,
-  hasCopyIcon = false,
-  pageHeader = 'Pre-Registration Confirmation',
-  onGetConfirmationDataError = _identity,
-  onGetConfirmationDataSuccess = _identity,
-  pageMessage = 'Pre registration was successful!',
-  onLoginSuccess = _identity,
-  logo,
-  themeOptions,
-  skipInitialValidation = false,
-}) => {
-    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
-        }
-
-        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,
-      skipInitialValidation,
-    ])
-
-    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,
-        })
-      }
-    }
-    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}
-                />
-              )}
-            </div>
-          </div>
-        ) : (
-          showModalLogin && (
-            <LoginModal
-              logo={logo}
-              onClose={() => {
-                setShowModalLogin(false)
-              }}
-              onLogin={res => {
-                setShowModalLogin(false)
-                onLoginSuccess(res)
-              }}
-              showForgotPasswordButton
-            />
-          )
-        )}
-        {!_isEmpaty(error) && (
-          <ConfirmModal
-            hideCancelBtn
-            message={error.message}
-            onConfirm={() => onGetConfirmationDataError(error)}
-          />
-        )}
-      </ThemeProvider>
-    )
-  }

package/src/components/preRegistration/PreRegistrationInformations.tsx

@@ -1,60 +0,0 @@
-import { createTheme, ThemeProvider } from '@mui/material/styles'
-import _identity from 'lodash/identity'
-import _slice from 'lodash/slice'
-import React, { useEffect, useState } from 'react'
-
-import { getPreRegistrationInfluencers } from '../../api/preRegistrationComplete'
-import { Influancers } from './Influancers'
-import { Prewards } from './Prewards'
-
-export const PreRegistrationInformations = (props: IPreRegistrationInformationProps) => {
-  const {
-    classNamePrefix,
-    eventId,
-    onGetPreregistrationDataSuccess = _identity,
-    onGetPreregistrationDataError = _identity,
-    influancersHeaderNode,
-    prewardsHeaderNode,
-    themeOptions,
-  } = props
-
-  const themeMui = createTheme(themeOptions)
-
-  const [prizes, setPrizes] = useState([] as Array<IPrizeData>)
-  const [influencers, setInfluencers] = useState([] as Array<IInfluencerData>)
-  const topInfluancers = _slice(influencers, 0, 10)
-  useEffect(() => {
-    const fetchPreregistrationData = async () => {
-      try {
-        const preregistrationData = await getPreRegistrationInfluencers({
-          eventId,
-        })
-        setPrizes(preregistrationData.data.attributes.prizes)
-        setInfluencers(preregistrationData.data.attributes.influencers)
-        onGetPreregistrationDataSuccess()
-      } catch (error) {
-        if (error) {
-          onGetPreregistrationDataError()
-        }
-      }
-    }
-    fetchPreregistrationData()
-  }, [eventId, onGetPreregistrationDataError, onGetPreregistrationDataSuccess])
-
-  return (
-    <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/Prewards.tsx

@@ -1,41 +0,0 @@
-import _isEmpty from 'lodash/isEmpty'
-import _map from 'lodash/map'
-import React from 'react'
-
-export const Prewards = (props: IPrewardsProps) => {
-  const {
-    data,
-    classNamePrefix = '',
-    headerNode = (
-      <>
-        PRE
-        <span>WARDS™</span>
-      </>
-    ),
-  } = props
-  return (
-    <div className={`${classNamePrefix}_prewards`}>
-      {!_isEmpty(data) && (
-        <div className={`${classNamePrefix}_prewards_heder`}>{headerNode}</div>
-      )}
-      <div className={`${classNamePrefix}_prizes`}>
-        {_map(data, prize => {
-          const { description, name, image, id } = prize
-          return (
-            <div className={`${classNamePrefix}_prize`} key={id}>
-              {image && <img className={`${classNamePrefix}_image`} alt="" src={image} />}
-              <div className={`${classNamePrefix}_info`}>
-                <h4 className={`${classNamePrefix}_name`}>{name}</h4>
-                {description && (
-                  <article className={`${classNamePrefix}_description`}>
-                    {description}
-                  </article>
-                )}
-              </div>
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}