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

package/src/components/delegationsContainer/index.tsx

@@ -1,83 +0,0 @@
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import React, { FC, useEffect, useState } from 'react'
-
-import { getCustomerExistsData } from '../../api/guestTicketDelegation'
-import { Loader } from '../../components/common'
-import { LoginForm } from '../../components/loginForm'
-import { RegistrationForm } from '../../components/registerForm'
-import { useCookieListener } from '../../hooks/useCookieListener'
-import { getCookieByName, getQueryVariable } from '../../utils'
-import IssueComponent from './IssueComponent'
-
-interface IRegistrationProps {
-  registerFormFields?: Array<IFormFieldsSection>;
-  classNamePrefix?: string;
-  logo?: string;
-  onCustomerExistsError?: (error: any) => void;
-  issuePageErrorText?: string;
-}
-
-const X_TF_ECOMMERCE = 'X-TF-ECOMMERCE'
-
-export const DelegationsContainer: FC<IRegistrationProps> = ({
-  registerFormFields,
-  classNamePrefix = 'guest-ticket-delegation',
-  issuePageErrorText = 'You do not have access to manage these tickets.',
-  onCustomerExistsError = _identity,
-  logo,
-}) => {
-  const [loading, setLoading] = useState(true)
-  const [isLoggedIn, setIsLoggedIn] = useState(Boolean(getCookieByName(X_TF_ECOMMERCE)))
-  const [isCustomerExsists, setIsCustomerExsists] = useState(false)
-  const [issuePageError, setIssuePageError] = useState(false)
-  const [customerEmail, setCustomerEmail] = useState('')
-  const accessHash = getQueryVariable('hash') || ''
-
-  useCookieListener(X_TF_ECOMMERCE, value => setIsLoggedIn(Boolean(value)))
-
-  const onGetIssuePageDataError = () => {
-    setIssuePageError(true)
-  }
-
-  useEffect(() => {
-    const getCustomerData = async () => {
-      try {
-        const response = await getCustomerExistsData(accessHash)
-        const isCustomerExsists = _get(response, 'data.attributes.customerExists', false)
-        setIsCustomerExsists(isCustomerExsists)
-        setCustomerEmail(_get(response, 'data.attributes.email', ''))
-        setLoading(false)
-      } catch (error) {
-        onCustomerExistsError(error)
-      }
-    }
-
-    getCustomerData()
-  }, [])
-
-  return (
-    <div className={`${classNamePrefix}__container`}>
-      {loading ? (
-        <Loader />
-      ) : issuePageError ? (
-        <div className="issue_page_error">{issuePageErrorText}</div>
-      ) : isLoggedIn ? (
-        <div>
-          <IssueComponent
-            classNamePrefix={classNamePrefix}
-            onGetIssuePageDataError={onGetIssuePageDataError}
-          />
-        </div>
-      ) : isCustomerExsists ? (
-        <LoginForm logo={logo} />
-      ) : (
-        <RegistrationForm
-          customerEmail={customerEmail}
-          formFields={registerFormFields}
-          registrationType="delegation"
-        />
-      )}
-    </div>
-  )
-}

package/src/components/forgotPasswordModal/index.tsx

@@ -1,138 +0,0 @@
-import './style.css'
-
-import { Box, CircularProgress, Modal } from '@mui/material'
-import axios, { AxiosError } from 'axios'
-import { Field, Form, Formik } from 'formik'
-import _identity from 'lodash/identity'
-import React, { FC, useState } from 'react'
-import * as Yup from 'yup'
-
-import { forgotPassword } from '../../api'
-import { CustomField } from '../common/CustomField'
-import { PoweredBy } from '../common/PoweredBy'
-
-export interface IForgotPasswordProps {
-  onClose: () => void;
-  onLoginButtonClick: () => void;
-  onForgotPasswordSuccess: (res: IAxiosResponseData) => void;
-  onForgotPasswordError: (e: AxiosError) => void;
-  showPoweredByImage?: boolean;
-  displaySuccessMessage?: boolean;
-}
-
-interface ValuesTypes {
-  email: string;
-}
-
-const style: React.CSSProperties = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  minWidth: 480,
-  backgroundColor: '#fff',
-  border: '1px solid white',
-  outline: 'none',
-  padding: '14px',
-}
-
-const Schema = Yup.object().shape({
-  email: Yup.string().email('Invalid email').required('Required'),
-})
-
-export const ForgotPasswordModal: FC<IForgotPasswordProps> = ({
-  onClose = _identity,
-  onLoginButtonClick = _identity,
-  onForgotPasswordSuccess = _identity,
-  onForgotPasswordError = _identity,
-  showPoweredByImage = false,
-  displaySuccessMessage = false,
-}) => {
-  const [loading, setLoading] = useState(false)
-  const [successMessage, setSuccessMessage] = useState<string | null>(null)
-  const showSuccess = displaySuccessMessage && successMessage
-
-  const onForgotPassword = async ({ email }: ValuesTypes) => {
-    if (showSuccess) {
-      setSuccessMessage(null)
-      onClose()
-      return
-    }
-
-    try {
-      setLoading(true)
-      const { data } = await forgotPassword(email)
-
-      onForgotPasswordSuccess(data)
-
-      if (displaySuccessMessage && data?.success) {
-        setSuccessMessage(data?.message)
-      }
-
-      if (!displaySuccessMessage) {
-        onClose()
-      }
-    } catch (e) {
-      if (axios.isAxiosError(e)) {
-        onForgotPasswordError(e)
-      }
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <Modal
-      open={true}
-      onClose={loading ? _identity : onClose}
-      aria-labelledby="modal-modal-title"
-      aria-describedby="modal-modal-description"
-      className="forgot-password-modal"
-    >
-      <Box style={style}>
-        <div>
-          <Formik
-            initialValues={{ email: '' }}
-            validationSchema={Schema}
-            onSubmit={onForgotPassword}
-          >
-            {({ isValid, dirty, handleSubmit }) => (
-              <Form onSubmit={handleSubmit}>
-                <div className="forgot-password-container">
-                  <div className="title">Password Reset</div>
-                  <div className="forgot-password-container__singleField">
-                    {showSuccess ? (
-                      <p id="forgot-password-success-message">{successMessage}</p>
-                    ) : (
-                      <Field name="email" label="Email" component={CustomField} />
-                    )}
-                  </div>
-                </div>
-                <div className="forgot-password-action-button">
-                  <button
-                    type="submit"
-                    disabled={showSuccess ? false : !(isValid && dirty)}
-                  >
-                    {loading ? (
-                      <CircularProgress size="22px" />
-                    ) : showSuccess ? (
-                      'Close'
-                    ) : (
-                      'Submit'
-                    )}
-                  </button>
-                </div>
-                <div className="login">
-                  <span aria-hidden onClick={onLoginButtonClick}>
-                    Back to Log In
-                  </span>
-                </div>
-                {showPoweredByImage ? <PoweredBy /> : null}
-              </Form>
-            )}
-          </Formik>
-        </div>
-      </Box>
-    </Modal>
-  )
-}

package/src/components/forgotPasswordModal/style.css

@@ -1,47 +0,0 @@
-.forgot-password-modal .forgot-password-container {
-  max-width: 800px;
-  margin: 0 auto;
-}
-.forgot-password-modal .title {
-  background-color: #fff;
-  font-family: Inter;
-  font-weight: 700;
-  font-size: 18px;
-}
-.forgot-password-modal .forgot-password-container__singleField {
-  margin-top: 15px;
-}
-.forgot-password-modal .forgot-password-action-button button {
-  padding: 10px;
-  width: 100%;
-  margin-top: 10px;
-  border: none;
-  border-radius: 0;
-  height: 45px;
-  font-weight: 600;
-  font-size: 26px;
-  line-height: 18px;
-  color: white;
-  cursor: pointer;
-  outline: none;
-  background-color: #212529;
-  text-transform: uppercase;
-}
-.forgot-password-modal .forgot-password-action-button button:hover:enabled {
-  background-color: #505050;
-  border-color: #505050;
-}
-.forgot-password-modal .login {
-  text-align: center;
-  margin-top: 10px;
-}
-.forgot-password-modal .login span {
-  cursor: pointer;
-}
-.forgot-password-modal .login span:hover {
-  text-decoration: underline;
-}
-.forgot-password-modal button[disabled] {
-  opacity: .7;
-  cursor: unset;
-}

package/src/components/idVerificationContainer/VerificationPendingModal.tsx

@@ -1,47 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-import Modal, { Action } from '../common/ModalComponent'
-
-interface IDVerificationProps {
-  message?: string | null;
-  displayModal?: boolean;
-  actions?: Action[];
-  onClose?: () => void;
-}
-
-export const VerificationPendingModal = (props: IDVerificationProps) => {
-  const { message, displayModal, actions, onClose } = props
-  const [showModal, setShowModal] = useState(false)
-
-  useEffect(() => {
-    if (displayModal === undefined) {
-      setShowModal(Boolean(message))
-    }
-  }, [message, displayModal])
-
-  return showModal || displayModal ? (
-    <div>
-      <Modal
-        modalClassName="id-verification-modal"
-        actions={
-          actions || [
-            {
-              id: 'okay',
-              label: 'OK',
-              variant: 'contained',
-              onClick: () => {
-                setShowModal(false)
-
-                if (onClose) {
-                  onClose()
-                }
-              },
-            },
-          ]
-        }
-      >
-        <div>{message}</div>
-      </Modal>
-    </div>
-  ) : null
-}

package/src/components/idVerificationContainer/constants.ts

@@ -1,27 +0,0 @@
-/* eslint-disable max-len */
-export const VERIFICATION_STATUSES = {
-  PENDING: 'PENDING',
-  APPROVED: 'APPROVED_VERIFIED',
-  FAILED: 'FAILED',
-  WRONG_CUSTOMER: 'WRONG_CUSTOMER',
-}
-
-export const VERIFICATION_PROVIDERS = {
-  JUMIO: 'jumio',
-  STRIPE: 'stripe'
-}
-
-export const TRANSACTION_STATUSES = {
-  ERROR: 'ERROR',
-  SUCCESS: 'SUCCESS',
-}
-
-export const VERIFICATION_MESSAGES = {
-  PENDING:
-    'Your ID verification is currently being processed. We will notify you as soon as it is completed. Thank you for your patience.',
-  APPROVED: 'Your ID verification is approved!',
-  FAILED: 'Unfortunately your ID verification has failed. Please try again.',
-  WRONG_CUSTOMER: 'The order does not belong to the customer.',
-}
-
-export const DELEGATION_ACCESS_ERROR = 'Delegation Access not found'

package/src/components/idVerificationContainer/index.tsx

@@ -1,323 +0,0 @@
-import Button from '@mui/material/Button'
-import { AxiosError } from 'axios'
-import _identity from 'lodash/identity'
-import _isEmpty from 'lodash/isEmpty'
-import React, { useEffect, useState } from 'react'
-
-import {
-  checkCustomerOrder,
-  checkVerificationStatus,
-  getNetverifyUrl,
-  updateVerificationStatus,
-} from '../../api'
-import {
-  GetNetverifyUrlResponseData,
-  VerificationStatusResponseData,
-} from '../../types/verification'
-import { getQueryVariable, isBrowser, isJson } from '../../utils'
-import Modal from '../common/ModalComponent'
-import {
-  VERIFICATION_MESSAGES,
-  VERIFICATION_PROVIDERS,
-  VERIFICATION_STATUSES,
-} from './constants'
-
-interface IDVerificationProps {
-  onGetVerifyUrlSuccess?: (response: GetNetverifyUrlResponseData) => void;
-  onGetVerifyUrlError?: (error: AxiosError) => void;
-
-  onGetVerificationStatusSuccess?: (response: {
-    data: VerificationStatusResponseData;
-  }) => void;
-  onGetVerificationStatusError?: (error: AxiosError) => void;
-
-  onVerificationMessageModalClose?: (status: string | null) => void;
-
-  onPassVerificationStepsSuccess?: () => void;
-  onPassVerificationStepsError?: (error: AxiosError | null) => void;
-}
-
-export const IDVerification = (props: IDVerificationProps) => {
-  const {
-    onGetVerifyUrlSuccess = _identity,
-    onGetVerifyUrlError = _identity,
-
-    onGetVerificationStatusSuccess = _identity,
-    onGetVerificationStatusError = _identity,
-
-    onVerificationMessageModalClose = _identity,
-
-    onPassVerificationStepsSuccess = _identity,
-    onPassVerificationStepsError = _identity,
-  } = props
-
-  const [loadingStatus, setLoadingStatus] = useState(true)
-  const [verificationStatus, setVerificationStatus] = useState<string | null>(null)
-  const [showModal, setShowModal] = useState(false)
-  const [netverifyUrl, setNetverifyUrl] = useState<string | null>(null)
-  const [provider, setProvider] = useState<string | null>(null)
-  const [hasError, setHasError] = useState<boolean>(false)
-  const [lastError, setLastError] = useState(null)
-  const [modalData, setModalData] = useState({
-    message: '',
-    hideCancelBtn: true,
-    displaModal: false,
-  })
-
-  const isAccountVerifiedOrPending =
-    (verificationStatus === VERIFICATION_STATUSES.APPROVED ||
-      verificationStatus === VERIFICATION_STATUSES.PENDING) &&
-    verificationStatus !== VERIFICATION_STATUSES.WRONG_CUSTOMER
-
-  const handleClose = () => {
-    setModalData({
-      message: '',
-      displaModal: false,
-      hideCancelBtn: true,
-    })
-
-    onVerificationMessageModalClose(verificationStatus)
-  }
-
-  useEffect(() => {
-    const callbackNetVerify = async (e: any) => {
-      // Stripe Events
-      if (e.data && e.origin === 'https://verify.stripe.com') {
-        const { data } = e
-        if (data.type === 'STRIPE_IDENTITY_CLOSE') {
-          await getUrl()
-          setShowModal(false)
-          if (hasError) {
-            setHasError(false)
-            onPassVerificationStepsError(lastError)
-          } else {
-            setHasError(false)
-            onPassVerificationStepsSuccess()
-          }
-        } else if (data.type === 'STRIPE_IDENTITY_ERROR') {
-          setHasError(true)
-          setLastError(data)
-        }
-      }
-
-      if (e.data && isJson(e.data)) {
-        try {
-          const result = JSON.parse(e.data)
-          if (
-            result.payload &&
-            (result.payload.value === 'success' ||
-              result.payload.transactionStatus === 'SUCCESS')
-          ) {
-            await updateVerificationStatus()
-            onPassVerificationStepsSuccess()
-          } else if (
-            result.payload &&
-            (result.payload.value === 'error' ||
-              result.payload.transactionStatus === 'ERROR')
-          ) {
-            setShowModal(false)
-            onPassVerificationStepsError(result.payload)
-          }
-        } catch (e) {
-          onPassVerificationStepsError(e)
-        }
-      }
-    }
-
-    window.addEventListener('message', callbackNetVerify)
-
-    return () => {
-      window.removeEventListener('message', callbackNetVerify)
-    }
-  }, [])
-
-  const getUrl = async () => {
-    try {
-      const urlResponse = await getNetverifyUrl()
-      setNetverifyUrl(urlResponse.netverifyUrl)
-      setProvider(urlResponse.provider)
-      onGetVerifyUrlSuccess(urlResponse)
-    } catch (error) {
-      onGetVerifyUrlError(error)
-    }
-  }
-
-  useEffect(() => {
-    let intervalId: any = null
-    const orderHash = getQueryVariable('order_hash') || ''
-
-    const getVerificationStatus = async () => {
-      try {
-        let verificationStatus = null
-        // Gets te current status of the variable without modifying it
-        setVerificationStatus(status => {
-          verificationStatus = status
-          return status
-        })
-        let provider = null
-        // Gets te current status of the variable without modifying it
-        setProvider(state => {
-          provider = state
-          return provider
-        })
-        let verifyUrl = null
-        // Gets te current status of the variable without modifying it
-        setNetverifyUrl(state => {
-          verifyUrl = state
-          return state
-        })
-        const statusResponse = await checkVerificationStatus()
-        const { status } = statusResponse.data.attributes
-        const isApproved = status === VERIFICATION_STATUSES.APPROVED
-
-        if (verificationStatus !== status) {
-          setVerificationStatus(status)
-          setModalData({
-            displaModal: isApproved || status === VERIFICATION_STATUSES.FAILED,
-            hideCancelBtn: true,
-            message: isApproved
-              ? VERIFICATION_MESSAGES.APPROVED
-              : status === VERIFICATION_STATUSES.FAILED
-              ? VERIFICATION_MESSAGES.FAILED
-              : status,
-          })
-        }
-        if (
-          provider === VERIFICATION_PROVIDERS.STRIPE &&
-          verifyUrl === null &&
-          !isApproved
-        ) {
-          getUrl()
-        }
-        onGetVerificationStatusSuccess(statusResponse)
-      } catch (error) {
-        onGetVerificationStatusError(error)
-      } finally {
-        setLoadingStatus(false)
-      }
-    }
-
-    const getCustomerOrderStatus = async () => {
-      const customerOrderResponse = await checkCustomerOrder(orderHash)
-      return customerOrderResponse
-    }
-
-    const makeRequests = async () => {
-      try {
-        if (orderHash) {
-          await getCustomerOrderStatus()
-        }
-        getUrl()
-        getVerificationStatus()
-
-        // Check the verification status every 30 seconds
-        intervalId = setInterval(() => {
-          getVerificationStatus()
-        }, 10000)
-      } catch (error) {
-        if (error.response?.data?.message === VERIFICATION_MESSAGES.WRONG_CUSTOMER) {
-          setVerificationStatus(VERIFICATION_STATUSES.WRONG_CUSTOMER)
-          setModalData({
-            displaModal: true,
-            hideCancelBtn: true,
-            message: VERIFICATION_MESSAGES.WRONG_CUSTOMER,
-          })
-        }
-      }
-    }
-
-    makeRequests()
-
-    // Clear the interval when the component unmounts
-    return () => clearInterval(intervalId)
-  }, [])
-
-  const iframe = (netverifyUrl: string) => {
-    // eslint-disable-next-line max-len
-    const iframe = `<iframe allowFullScreen id="verificationIframe" frameBorder="0" width="100%" height="570px" allow="camera;fullscreen;accelerometer;gyroscope;magnetometer" src="${netverifyUrl}"></iframe>`
-    return {
-      __html: iframe,
-    }
-  }
-
-  useEffect(() => {
-    const orderHash = getQueryVariable('order_hash')
-
-    if (isBrowser) {
-      const checkoutData = JSON.parse(window.localStorage.getItem('checkoutData') || '{}')
-      if (_isEmpty(checkoutData) && orderHash) {
-        window.localStorage.setItem('checkoutData', JSON.stringify({ hash: orderHash }))
-      }
-    }
-  }, [])
-
-  return (
-    <div>
-      <h2 className="page-header">Account Verification</h2>
-      {loadingStatus ? null : (
-        <>
-          {!isAccountVerifiedOrPending && (
-            <div className="verify-message">
-              To complete the purchase, please verify your identity.
-            </div>
-          )}
-          {verificationStatus === VERIFICATION_STATUSES.APPROVED && (
-            <div className="verify-message">{VERIFICATION_MESSAGES.APPROVED}</div>
-          )}
-          {(verificationStatus === VERIFICATION_STATUSES.PENDING ||
-            (provider === VERIFICATION_PROVIDERS.STRIPE &&
-              netverifyUrl === null &&
-              verificationStatus !== VERIFICATION_STATUSES.APPROVED)) && (
-            <div className="verify-message">{VERIFICATION_MESSAGES.PENDING}</div>
-          )}
-          {!isAccountVerifiedOrPending && netverifyUrl !== null && (
-            <Button
-              type="button"
-              variant="contained"
-              className="verify-button"
-              onClick={() => {
-                setShowModal(true)
-              }}
-            >
-              Verify
-            </Button>
-          )}
-        </>
-      )}
-
-      {modalData.displaModal && (
-        <Modal
-          modalClassName="verification-message-modal"
-          actions={[
-            {
-              id: 'ok',
-              label: 'Ok',
-              variant: 'contained',
-              onClick: handleClose,
-            },
-          ]}
-        >
-          <div className="verify-message">{modalData.message}</div>
-        </Modal>
-      )}
-
-      {showModal && (
-        <Modal
-          modalClassName="id-verification-modal"
-          actions={[
-            {
-              id: 'close',
-              label: 'Close',
-              variant: 'contained',
-              onClick: () => {
-                setShowModal(false)
-              },
-            },
-          ]}
-        >
-          <div dangerouslySetInnerHTML={iframe(netverifyUrl || '')} />
-        </Modal>
-      )}
-    </div>
-  )
-}

package/src/components/index.ts

@@ -1,12 +0,0 @@
-export { BillingInfoContainer } from './billing-info-container'
-export { ConfirmationContainer } from './confirmationContainer'
-export { PaymentContainer } from './paymentContainer'
-export { TicketsContainer } from './ticketsContainer'
-export { MyTicketsContainer } from './myTicketsContainer'
-export { OrderDetailsContainer } from './orderDetailsContainer'
-export { ResetPasswordContainer } from './resetPasswordContainer'
-export { TicketResaleContainer } from './ticketResale'
-export { AddonsContainter } from './addonsContainer'
-export { DelegationsContainer } from './delegationsContainer'
-export { SeatMapContainer } from './seatMapContainer'
-export { IDVerification } from './idVerificationContainer'