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

package/src/components/signupModal/index.tsx

@@ -1,178 +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 { register } from '../../api'
-import { CONFIGS } from '../../utils'
-import { CustomField } from '../common/CustomField'
-import { PoweredBy } from '../common/PoweredBy'
-
-interface ISignupProps {
-  onClose: () => void;
-  onLogin: () => void;
-  onRegisterSuccess: (res: any) => void;
-  onRegisterError: (e: AxiosError, email: string) => void;
-  showPoweredByImage?: boolean;
-}
-
-interface ValuesTypes {
-  firstName: string;
-  lastName: string;
-  email: string;
-  password: string;
-  confirmPassword: 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 SignupSchema = Yup.object().shape({
-  firstName: Yup.string().required('Required'),
-  lastName: Yup.string().required('Required'),
-  email: Yup.string().email('Invalid email').required('Required'),
-  password: Yup.string()
-    .min(8, 'Password must have 8+ characters')
-    .required('Required')
-    .matches(
-      new RegExp('^(?=.*[@$!%*#?&])'),
-      'Password must contain at least one special character'
-    ),
-  confirmPassword: Yup.string()
-    .required('Required')
-    .oneOf([Yup.ref('password'), null], 'Passwords must match'),
-})
-
-export const SignupModal: FC<ISignupProps> = ({
-  onClose = _identity,
-  onLogin = _identity,
-  onRegisterSuccess = _identity,
-  onRegisterError = _identity,
-  showPoweredByImage = false,
-}) => {
-  const [loading, setLoading] = useState(false)
-
-  const onSignup = async (values: ValuesTypes) => {
-    try {
-      setLoading(true)
-      const formData = new FormData()
-      formData.set('first_name', values.firstName)
-      formData.set('last_name', values.lastName)
-      formData.set('email', values.email)
-      formData.set('password', values.password)
-      formData.set('password_confirmation', values.confirmPassword)
-      formData.append(
-        'client_id',
-        CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
-      )
-      formData.append(
-        'client_secret',
-        CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
-      )
-
-      const res = await register(formData)
-
-      onRegisterSuccess(res)
-      onClose()
-    } catch (e) {
-      if (axios.isAxiosError(e)) {
-        onRegisterError(e, values.email)
-      }
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const _onClose = loading ? _identity : onClose
-
-  return (
-    <Modal
-      open={true}
-      onClose={_onClose}
-      aria-labelledby="modal-modal-title"
-      aria-describedby="modal-modal-description"
-      className="signup-modal"
-    >
-      <Box style={style}>
-        <div>
-          <Formik
-            initialValues={{
-              firstName: '',
-              lastName: '',
-              email: '',
-              password: '',
-              confirmPassword: '',
-            }}
-            validationSchema={SignupSchema}
-            onSubmit={onSignup}
-          >
-            {({ isValid, dirty, handleSubmit }) => (
-              <Form onSubmit={handleSubmit}>
-                <div className="signup-container">
-                  <div className="title">Create an Account</div>
-                  <div className="signup-container__twoFields">
-                    <div className="is-half">
-                      <Field
-                        name="firstName"
-                        label="First Name"
-                        component={CustomField}
-                      />
-                    </div>
-                    <div className="is-half">
-                      <Field name="lastName" label="Last Name" component={CustomField} />
-                    </div>
-                  </div>
-                  <div className="signup-container__singleField">
-                    <div className="">
-                      <Field name="email" label="Email" component={CustomField} />
-                    </div>
-                  </div>
-                  <div className="signup-container__twoFields">
-                    <div className="is-half">
-                      <Field
-                        name="password"
-                        label="Password"
-                        type="password"
-                        component={CustomField}
-                      />
-                    </div>
-                    <div className="is-half">
-                      <Field
-                        name="confirmPassword"
-                        label="Confirm Password"
-                        type="password"
-                        component={CustomField}
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div className="signup-action-button">
-                  <button type="submit" disabled={!(isValid && dirty)}>
-                    {loading ? <CircularProgress size="22px" /> : 'Submit'}
-                  </button>
-                </div>
-                <div className="login">
-                  <span onClick={onLogin}>Login</span>
-                </div>
-                {showPoweredByImage ? <PoweredBy /> : null}
-              </Form>
-            )}
-          </Formik>
-        </div>
-      </Box>
-    </Modal>
-  )
-}

package/src/components/signupModal/style.css

@@ -1,58 +0,0 @@
-.signup-modal .signup-container {
-  max-width: 800px;
-  margin: 0 auto;
-}
-.signup-modal .title {
-  background-color: #fff;
-  font-family: Inter;
-  font-weight: 700;
-  font-size: 18px;
-}
-.signup-modal .signup-container .is-half {
-  width: 49%;
-}
-.signup-modal .signup-container__twoFields {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 15px;
-}
-.signup-modal .signup-container__singleField {
-  margin-top: 15px;
-}
-.signup-modal button {
-  margin-top: 10px;
-}
-.signup-modal .signup-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;
-}
-.signup-modal .signup-action-button button:hover:enabled {
-  background-color: #505050;
-  border-color: #505050;
-}
-.signup-modal .login {
-  text-align: center;
-  margin-top: 10px;
-}
-.signup-modal .login span {
-  cursor: pointer;
-}
-.signup-modal .login span:hover {
-  text-decoration: underline;
-}
-.signup-modal button[disabled] {
-  opacity: .7;
-  cursor: unset;
-}

package/src/components/ticketResale/index.tsx

@@ -1,86 +0,0 @@
-import { AxiosError } from 'axios'
-import _get from 'lodash/get'
-import React, { useEffect, useState } from 'react'
-
-import { declineInvitation, processTicket } from '../../api'
-
-export interface ITicketResaleContainer {
-  onProcessTicketSuccess: (res: any) => void;
-  onProcessTicketError: (e: AxiosError) => void;
-  onDeclineTicketPurchaseSuccess: (res: any) => void;
-  onDeclineTicketPurchaseError: (e: AxiosError) => void;
-  orderHash?: string;
-  billingPath?: string;
-  defaultRedirection?: boolean;
-}
-
-export const TicketResaleContainer = ({
-  onProcessTicketSuccess = () => {},
-  onProcessTicketError = () => {},
-  onDeclineTicketPurchaseSuccess = () => {},
-  onDeclineTicketPurchaseError = () => {},
-  orderHash,
-  billingPath,
-  defaultRedirection = true,
-}: ITicketResaleContainer) => {
-  const isWindowDefined = typeof window !== 'undefined'
-  const [error, setError] = useState('')
-  const [successMessage, setSuccessMessage] = useState('')
-
-  useEffect(() => {
-    (async () => {
-      if (isWindowDefined) {
-        const params: URLSearchParams = new URL(`${window.location}`).searchParams
-        const hash = params.get('invitation_hash') || orderHash || null
-        const isDeclined = params.get('decline') || false
-        window.localStorage.removeItem('checkoutAdditionalConfigs')
-
-        if (hash) {
-          // Process of declining ticket purchase invitation
-          if (isDeclined) {
-            try {
-              const response = await declineInvitation(hash)
-              onDeclineTicketPurchaseSuccess(response)
-              setSuccessMessage(
-                "Thanks for letting us know! We'll offer this ticket to someone else!"
-              )
-            } catch (error) {
-              setError(error?.response?.data?.message)
-              onDeclineTicketPurchaseError(error.response)
-            }
-            return
-          }
-
-          try {
-            const response = await processTicket(hash)
-            const event_id = _get(response.data.data.attributes, 'event_id')
-            const eventHasAddons = _get(response.data.data.attributes, 'has_add_on')
-            const invitationIncludesAddons = _get(response.data.data.attributes, 'include_add_on')
-            window.localStorage.setItem('checkoutAdditionalConfigs', JSON.stringify({
-              resale: true,
-              resaleWithAddons: eventHasAddons && invitationIncludesAddons,
-            }))
-
-            onProcessTicketSuccess(response.data)
-            if (defaultRedirection) {
-              window.location.href = `${billingPath ?? '/billing/billing-info'}?event_id=${event_id}`
-            }
-          } catch (error) {
-            setError(error?.response?.data?.message)
-            onProcessTicketError(error.response)
-          }
-        } else {
-          window.location.href = '/'
-        }
-      }
-    })()
-  }, [])
-
-  return (
-    <div className="ticket-resale-page">
-      <div className={`${successMessage ? 'success-block' : 'error-block'}`}>
-        <h3>{successMessage ? successMessage : error}</h3>
-      </div>
-    </div>
-  )
-}

package/src/components/ticketResaleModal/index.tsx

@@ -1,224 +0,0 @@
-import './style.css'
-
-import Box from '@mui/material/Box'
-import Button from '@mui/material/Button'
-import CircularProgress from '@mui/material/CircularProgress'
-import Modal from '@mui/material/Modal'
-import { Field, Form, Formik } from 'formik'
-import React from 'react'
-import SVG from 'react-inlinesvg'
-import * as yup from 'yup'
-
-import EmailSvg from '../../assets/images/email.svg'
-import UserSvg from '../../assets/images/user.svg'
-import { CheckboxField } from '../common/CheckboxField'
-import { CustomField } from '../common/CustomField'
-import { RadioField } from '../common/RadioField'
-import { ITicketTypes } from '../orderDetailsContainer/ticketsTable'
-
-interface Props {
-  ticket: ITicketTypes;
-  onClose: () => void;
-  onSubmit: (values: InitialValuesTypes) => void;
-  loading?: boolean;
-}
-
-export interface InitialValuesTypes {
-  to: string;
-  first_name: string;
-  last_name: string;
-  email: string;
-  confirm_email: string;
-  confirm: boolean;
-}
-
-const style: React.CSSProperties = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  minWidth: 480,
-  backgroundColor: '#e3e3e3',
-  border: '1px solid white',
-  outline: 'none',
-  padding: '14px',
-  maxHeight: '85vh',
-  overflow: 'auto'
-}
-
-const schema = yup.object().shape({
-  to: yup.string().required(),
-  first_name: yup.string().when('to', {
-    is: (to: string) => to === 'friend',
-    then: yup.string().required('First Name is required')
-  }),
-  last_name: yup.string().when('to', {
-    is: (to: string) => to === 'friend',
-    then: yup.string().required('Last Name is required')
-  }),
-  email: yup.string().when('to', {
-    is: (to: string) => to === 'friend',
-    then: yup.string().email('Invalid email').required('Email is required')
-  }),
-  confirm_email: yup.string().when('to', {
-    is: (to: string) => to === 'friend',
-    then: yup.string().email('Invalid email').oneOf([yup.ref('email'), null], 'Emails must match').required('Confirm Email is required')
-  }),
-  confirm: yup.boolean().oneOf([true])
-})
-
-const initialValues: InitialValuesTypes = {
-  to: 'friend',
-  first_name: '',
-  last_name: '',
-  email: '',
-  confirm_email: '',
-  confirm: false
-}
-
-export const TicketResaleModal = ({
-  ticket = {} as ITicketTypes,
-  onClose = () => { },
-  onSubmit = () => { },
-  loading = false
-}: Props) => {
-  const { hash, holder_name, event_name, currency, retain_amount_on_sale, ticket_type_is_active } = ticket
-
-  return (
-    <Modal
-      open={true}
-      onClose={onClose}
-      aria-labelledby="modal-modal-title"
-      aria-describedby="modal-modal-description"
-      className='resale-modal'
-    >
-      <Box style={style}>
-        <h3>Sell Ticket</h3>
-        <div>
-          <h3>Ticket Details</h3>
-          <div>
-            <h4>Event</h4>
-            <p>{event_name}</p>
-          </div>
-          <div>
-            <h4>Ticket Holder</h4>
-            <p>{holder_name}</p>
-          </div>
-          <div>
-            <h4>Ticket ID</h4>
-            <p>{hash}</p>
-          </div>
-        </div>
-        <div>
-          <h3>Sell to Whom</h3>
-          <Formik
-            initialValues={initialValues}
-            validationSchema={schema}
-            onSubmit={onSubmit}
-          >
-            {({ values, isValid, dirty }) => (
-              <Form>
-                <div>
-                  <Field
-                    name='to'
-                    label='I want to sell the ticket to someone I know'
-                    type='radio'
-                    value='friend'
-                    component={RadioField}
-                  />
-                  {values.to === 'friend' && (
-                    <div className='sell-to-friend'>
-                      <div className='user-info-box'>
-                        <div className='field-box'>
-                          <div className='icon'>
-                            <SVG
-                              src={UserSvg}
-                              width='24'
-                              height='24'
-                            />
-                          </div>
-                          <Field
-                            name='first_name'
-                            label='First Name'
-                            type='text'
-                            component={CustomField}
-                          />
-                        </div>
-                        <div className='field-box'>
-                          <div className='empty-box' />
-                          <Field
-                            name='last_name'
-                            label='Last Name'
-                            type='text'
-                            component={CustomField}
-                          />
-                        </div>
-                      </div>
-                      <div className='email-info-box'>
-                        <div className='field-box'>
-                          <div className='icon'>
-                            <SVG
-                              src={EmailSvg}
-                              width='24'
-                              height='24'
-                            />
-                          </div>
-                          <Field
-                            name='email'
-                            label='Email address'
-                            type='text'
-                            component={CustomField}
-                          />
-                        </div>
-                        <div className='field-box'>
-                          <div className='empty-box' />
-                          <Field
-                            name='confirm_email'
-                            label='Confirm Email address'
-                            type='text'
-                            component={CustomField}
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </div>
-                {ticket_type_is_active && (
-                  <div>
-                    <Field
-                      name="to"
-                      label="I will sell my ticket to anyone who wants to buy it"
-                      type="radio"
-                      value="anyone"
-                      component={RadioField}
-                    />
-                  </div>
-                )}
-                <div>
-                  <h4>Terms of Resale</h4>
-                  <p>I confirm that I want to sell this ticket and that, if someone chooses to buy it, I will no longer own it or have the right to ask for it back.</p>
-                  <p>I also understand that, if no one chooses to buy it, it remains my property, is valid for entry to <strong>{event_name}</strong> and I will not receive any refund.</p>
-                  <p>If my ticket is sold, the original card I used to buy my ticket will be refunded with the original amount paid, minus a small handling fee of <strong>{`${currency ?? ''} ${retain_amount_on_sale ?? '0'}`}</strong>, and that any existing refunds due to me for referring sales for this event are no longer valid.</p>
-                  <Field
-                    name='confirm'
-                    label='I agree'
-                    type='checkbox'
-                    component={CheckboxField}
-                  />
-                </div>
-                <div className="resale-action-button">
-                  <Button
-                    type="submit"
-                    disabled={!(isValid && dirty)}
-                  >
-                    {loading ? <CircularProgress size="22px" /> : 'Sell Ticket'}
-                  </Button>
-                </div>
-              </Form>
-            )}
-          </Formik>
-        </div>
-      </Box>
-    </Modal>
-  )
-}

package/src/components/ticketResaleModal/style.css

@@ -1,28 +0,0 @@
-.resale-modal .field-box {
-  margin-bottom: 10px;
-  display: flex;
-}
-.resale-modal .field-box .icon {
-  height: 56px;
-  min-width: 44px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.resale-modal .field-box .empty-box  {
-  min-width: 44px;
-}
-.resale-modal .resale-action-button button {
-  width: 100%;
-  color: white;
-  cursor: pointer;
-  background-color: #212529;
-}
-.resale-modal .resale-action-button button[disabled] {
-  opacity: .7;
-}
-.resale-modal .resale-action-button button:hover {
-  width: 100%;
-  background-color: #505050;
-  border-color: #505050;
-}

package/src/components/ticketsContainer/AccessCodeSection.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import Button from 'react-bootstrap/Button'
-
-export interface IAccessCodeSectionProps {
-  code: string;
-  setCode: (value: string) => void;
-  updateTickets: (value: boolean) => void;
-}
-
-// This section is seperate because additional changes layter may be applied to Access Code
-
-export const AccessCodeSection = ({
-  code,
-  setCode,
-  updateTickets
-}: IAccessCodeSectionProps) => {
-  const isAccessCodeHasValue = !!code.trim()
-
-  return (
-    <div className="access-code-block">
-      <div className="access-code-block">
-        <p className="access-code-text">
-          Access code required
-        </p>
-      </div>
-      <input
-        className="access-code-input"
-        placeholder=""
-        onChange={e => {
-          setCode(e.target.value)
-        }}
-        onKeyPress={event => {
-          if (event.key === 'Enter' && isAccessCodeHasValue) {
-            updateTickets(true)
-          }
-        }}
-      />
-      <Button
-        className="access-submit-button"
-        onClick={() => {
-          if (isAccessCodeHasValue) {
-            updateTickets(true)
-          }
-        }}
-      >
-        ENTER
-      </Button>
-    </div>
-  )
-}

package/src/components/ticketsContainer/InfoIcon.tsx

@@ -1,35 +0,0 @@
-import React from "react"
-
-const InfoIcon = ({ size = 17 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 17 17"
-    fill="none"
-  >
-    <circle
-      cx="8.5"
-      cy="8.5"
-      r="8"
-      stroke="black"
-      strokeWidth="1"
-    />
-    <rect
-      x="7.5"
-      y="4"
-      width="2"
-      height="2"
-      fill="black"
-    />
-    <rect
-      x="7.5"
-      y="7"
-      width="2"
-      height="5"
-      fill="black"
-    />
-  </svg>
-)
-
-export default InfoIcon