tf-checkout-react 1.4.26 → 1.5.1

package/src/components/loginForm/index.tsx

@@ -7,6 +7,7 @@ import React, { FC, useState } from 'react'
 import { authorize, getProfileData } from '../../api'
 import { combineValidators, emailValidator, requiredValidator } from '../../validators'
 import { CustomField } from '../common'
+import { PoweredBy } from '../common/PoweredBy'
 
 export interface ILoginFormProps {
   alreadyHasUser?: boolean;
@@ -24,6 +25,7 @@ export interface ILoginFormProps {
   logo?: string;
   showForgotPasswordButton?: boolean;
   showSignUpButton?: boolean;
+  showPoweredByImage?: boolean;
 }
 
 // interface IUserData {
@@ -72,6 +74,7 @@ export const LoginForm: FC<ILoginFormProps> = ({
   logo,
   showForgotPasswordButton = false,
   showSignUpButton = false,
+  showPoweredByImage = false,
 }) => {
   const [error, setError] = useState('')
   return (
@@ -173,6 +176,7 @@ export const LoginForm: FC<ILoginFormProps> = ({
                   </span>
                 </div>
               )}
+              {showPoweredByImage ? <PoweredBy /> : null}
             </div>
           </Form>
         )}

package/src/components/loginModal/index.tsx

@@ -5,6 +5,7 @@ import Box from '@mui/material/Box'
 import Modal from '@mui/material/Modal'
 import axios, { AxiosError } from 'axios'
 import { Field, Form, Formik } from 'formik'
+import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 import React, { FC, useState } from 'react'
 
@@ -13,9 +14,9 @@ import { isBrowser, setLoggedUserData } from '../../utils'
 import { requiredValidator } from '../../validators'
 import { PoweredBy } from '../common/PoweredBy'
 
-interface Props {
+export interface Props {
   onClose: () => void;
-  onLogin: () => void;
+  onLogin: (res: IProfileData) => void;
   alreadyHasUser?: boolean;
   userExpired?: boolean;
   onAuthorizeSuccess?: (res: any) => void;
@@ -73,7 +74,7 @@ export const LoginModal: FC<Props> = ({
             onSubmit={async ({ email, password }) => {
               try {
                 const body = { email, password }
-                await authorize(body)
+                const authRes = await authorize(body)
                 let profileResponse = null
                 try {
                   profileResponse = await getProfileData()
@@ -92,7 +93,7 @@ export const LoginModal: FC<Props> = ({
                   const event = new window.CustomEvent('tf-login')
                   window.document.dispatchEvent(event)
                 }
-                onLogin()
+                onLogin(_get(authRes, 'data.data'))
               } catch (e) {
                 if (axios.isAxiosError(e)) {
                   const error = e?.response?.data?.message || 'Error'

package/src/components/myTicketsContainer/index.tsx

@@ -67,10 +67,10 @@ export const MyTicketsContainer = ({
     fetchData(1, limit, filter)
   }, [isLogged])
 
-  const fetchData = async (page: number, limit: number, filter: string) => {
+  const fetchData = async (page: number, limit: number, eventSlug: string) => {
     try {
       setLoading(true)
-      const response = await getOrders(page, limit, filter)
+      const response = await getOrders(page, limit, eventSlug)
       onGetOrdersSuccess(response)
 
       const data = _get(response, 'data.attributes')

package/src/components/preRegistration/FieldsSection.tsx

@@ -0,0 +1,142 @@
+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'
+
+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';
+  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 = '',
+}: 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}
+                    />
+                  </div>
+                )
+              )
+            })}
+          </div>
+        </SectionContainer>
+      )
+    })}
+  </>
+)

package/src/components/preRegistration/Influancers.tsx

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,164 @@
+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 {
+  getPreRegistrationInfluancers,
+  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;
+  }
+> = ({
+  eventId: pEventId,
+  classNamePrefix = '',
+  onLinkCopied = _identity,
+  hasCopyIcon = false,
+  pageHeader = 'Pre-Registration Confirmation',
+  onGetConfirmationDataError = _identity,
+  onGetConfirmationDataSuccess = _identity,
+  pageMessage = 'Pre registration was successful!',
+  onLoginSuccess = _identity,
+  logo,
+}) => {
+  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)
+          }
+          onGetConfirmationDataSuccess()
+        }
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          setError(error.response?.data)
+        }
+      }
+    }
+    fetchConfirmationData()
+  }, [
+    pEventId,
+    hash,
+    onGetConfirmationDataError,
+    onGetConfirmationDataSuccess,
+    isLoggedIn,
+  ])
+
+  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 (
+    <>
+      {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} />
+            )}
+
+            {!_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)
+            }}
+          />
+        )
+      )}
+      {!_isEmpaty(error) && (
+        <ConfirmModal
+          hideCancelBtn
+          message={error.message}
+          onConfirm={() => onGetConfirmationDataError(error)}
+        />
+      )}
+    </>
+  )
+}

package/src/components/preRegistration/PreRegistrationInformations.tsx

@@ -0,0 +1,54 @@
+import _identity from 'lodash/identity'
+import _slice from 'lodash/slice'
+import React, { useEffect, useState } from 'react'
+
+import { getPreRegistrationInfluancers } 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,
+  } = props
+
+  const [prizes, setPrizes] = useState([] as Array<IPrizeData>)
+  const [influencers, setInfluencers] = useState([] as Array<IInfluancerData>)
+  const topInfluancers = _slice(influencers, 0, 10)
+  useEffect(() => {
+    const fetchPreregistrationData = async () => {
+      try {
+        const preregistrationData = await getPreRegistrationInfluancers({
+          eventId,
+        })
+        setPrizes(preregistrationData.data.attributes.prizes)
+        setInfluencers(preregistrationData.data.attributes.influencers)
+        onGetPreregistrationDataSuccess()
+      } catch (error) {
+        if (error) {
+          onGetPreregistrationDataError()
+        }
+      }
+    }
+    fetchPreregistrationData()
+  }, [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>
+  )
+}

package/src/components/preRegistration/Prewards.tsx

@@ -0,0 +1,41 @@
+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>
+  )
+}

package/src/components/preRegistration/ShareOptions.tsx

@@ -0,0 +1,77 @@
+import _identity from 'lodash/identity'
+import _isEmpty from 'lodash/isEmpty'
+import _some from 'lodash/some'
+import React from 'react'
+
+import { submitShareAction } from '../../api/preRegistrationComplete'
+import { CopyField } from '../common/CopyField'
+import SocialButtons from '../confirmationContainer/social-buttons'
+import { getShuffleMethodByName, shareOptionsAdapter } from './utils'
+
+export const ShareOptions = (props: IShareOptionsProps) => {
+  const {
+    classNamePrefix,
+    data,
+    hasCopyIcon = true,
+    onLinkCopied = _identity,
+    headerText = 'Share with your friends here ...',
+    hash,
+    updateShareActionData,
+    shareActionData,
+  } = props
+
+  const {
+    attributes: { actions, shareUrl },
+  } = data
+
+  const shareButtons = shareOptionsAdapter(actions, shareUrl)
+  const isShareLinkEnabled = _some(
+    actions,
+    (item: IShareOptionsActionData) => item.action === 'shared_url'
+  )
+  const onAfterShare = async (eventActionId: string | undefined) => {
+    const { shareActionToken, tokenShuffleMethod } = shareActionData
+    const accessToken = getShuffleMethodByName(tokenShuffleMethod)(shareActionToken)
+    if (typeof eventActionId === 'string') {
+      await submitShareAction({
+        eventActionId,
+        accessToken,
+        hash,
+      })
+      updateShareActionData()
+    }
+  }
+
+  return (
+    <div className={`${classNamePrefix}_share_options`}>
+      {!_isEmpty(actions) && (
+        <>
+          <div className={`${classNamePrefix}_share_header`}>{headerText}</div>
+          <SocialButtons
+            shareLink={data.attributes.shareUrl}
+            name=""
+            appId=""
+            showDefaultShareButtons={false}
+            shareButtons={shareButtons}
+            titleText=""
+            footerText=""
+            onAfterShare={(eventActionId: string | undefined) =>
+              onAfterShare(eventActionId)
+            }
+          />
+          {isShareLinkEnabled && (
+            <div className={`${classNamePrefix}_share_btn_inner`}>
+              <CopyField
+                copyValue={shareUrl}
+                onLinkCopied={onLinkCopied}
+                hasCopyIcon={hasCopyIcon}
+                classNamePrefix={classNamePrefix}
+                messageText="Share your link"
+              />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}