tf-checkout-react 1.0.106 → 1.2.1

package/src/components/signupModal/index.tsx

@@ -0,0 +1,195 @@
+import React, { FC, useState } from 'react'
+import axios, { AxiosError } from 'axios'
+import { Field, Form, Formik } from 'formik'
+import { Modal, Box, CircularProgress } from '@mui/material'
+import { CustomField } from '../common/CustomField'
+import * as Yup from 'yup'
+import _get from 'lodash/get'
+import { register, handleSetAccessToken } from '../../api'
+import './style.css'
+import { CONFIGS } from '../../utils'
+
+interface ISignupProps {
+  onClose: () => void
+  onLogin: () => void
+  onRegisterSuccess: (value: {
+    accessToken: string;
+    refreshToken: string;
+  }) => void
+  onRegisterError: (e: AxiosError, email: string) => void
+}
+
+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(6, 'Password must have 5+ characters')
+    .required('Required'),
+  confirmPassword: Yup.string()
+    .required('Required')
+    .oneOf([Yup.ref('password'), null], 'Passwords must match'),
+})
+
+export const SignupModal: FC<ISignupProps> = ({
+  onClose = () => {},
+  onLogin = () => {},
+  onRegisterSuccess = () => {},
+  onRegisterError = () => {},
+}) => {
+  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)
+
+      const access_token_register = _get(
+        res,
+        'data.data.attributes.access_token'
+      )
+      const refreshToken = _get(
+        res,
+        'data.data.attributes.refresh_token'
+      )
+      handleSetAccessToken(access_token_register)
+      
+      const tokens = {
+        accessToken: access_token_register,
+        refreshToken,
+      }
+      onRegisterSuccess(tokens)
+      onClose()
+    } catch (e) {
+      if (axios.isAxiosError(e)) {
+        onRegisterError(e, values.email)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const _onClose = loading ? () => {} : 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>
+              </Form>
+            )}
+          </Formik>
+        </div>
+      </Box>
+    </Modal>
+  )
+}

package/src/components/signupModal/style.css

@@ -0,0 +1,58 @@
+.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/stripePayment/index.tsx

@@ -189,7 +189,7 @@ const CheckoutForm = ({
       )}
       <form onSubmit={handleSubmit}>
         <div className="card_form_inner">
-          <label className="card_number_element">
+          <div className="card_number_element">
             <span className="card_label_text">Card number</span>
             <CardNumberElement
               options={{ ...options, ...stripeCardOptions, }}
@@ -198,17 +198,19 @@ const CheckoutForm = ({
               onBlur={_identity}
               onFocus={_identity}
             />
-          </label>
-          <label className="expiration_element">
-            <span className="card_label_text">Expiration date</span>
-            <CardExpiryElement options={{ ...options, ...stripeCardOptions }} />
-          </label>
-          <label className="cvc_element">
-            <span className="card_label_text">CVC</span>
-            <CardCvcElement options={{ ...options, ...stripeCardOptions }} />
-          </label>
+          </div>
+          <div className="elements">
+            <div className="expiration_element">
+              <span className="card_label_text">Expiration date</span>
+              <CardExpiryElement options={{ ...options, ...stripeCardOptions }} />
+            </div>
+            <div className="cvc_element">
+              <span className="card_label_text">CVC</span>
+              <CardCvcElement options={{ ...options, ...stripeCardOptions }} />
+            </div>
+          </div>
           {!disableZipSection && (
-            <label className="zip_element">
+            <div className="zip_element">
               <p className="card_label_text">ZIP</p>
               <input
                 type="text"
@@ -216,7 +218,7 @@ const CheckoutForm = ({
                 onChange={onChangePostalCode}
                 placeholder="ZIP"
               />
-            </label>
+            </div>
           )}
         </div>
         {checkboxes?.map((checkbox: any) => (

package/src/components/stripePayment/style.css

@@ -34,9 +34,9 @@
   opacity: 0.7;
 }
 
-.disabled-payment-button button{
+.disabled-payment-button button {
   user-select: none;
-  pointer-events:none;
+  pointer-events: none;
   opacity: 0.3;
 }
 
@@ -57,4 +57,4 @@
   margin-top: 5px;
   color: #ffffff;
   width: 100%;
-}
+}

package/src/components/ticketResaleModal/index.tsx

@@ -177,24 +177,22 @@ export const TicketResaleModal = ({
                     </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>
-                  )
-                }
+                {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 + resale_fee_amount}</strong>, and that any existing refunds due to me for referring sales for this event are no longer valid.</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 || ''} ${resale_fee_amount || ''}`}</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'

package/src/components/ticketsContainer/PromoCodeSection.tsx

@@ -9,7 +9,8 @@ export interface IPromoCodeSectionProps {
   showPromoInput: boolean;
   setCode: (value: string) => void;
   setShowPromoInput: (value: boolean) => void;
-  updateTickets: (value: boolean) => void;
+  updateTickets: (value: boolean, type: string) => void;
+  setCodeIsApplied: (value: boolean) => void;
 }
 
 export const PromoCodeSection = ({
@@ -18,7 +19,8 @@ export const PromoCodeSection = ({
   showPromoInput,
   setCode,
   setShowPromoInput,
-  updateTickets
+  updateTickets,
+  setCodeIsApplied
 }: IPromoCodeSectionProps) => {
   const isPromoCodeHasValue = !!code.trim()
 
@@ -26,9 +28,7 @@ export const PromoCodeSection = ({
     return (
       <div className="promo-code-block">
         <div className="promo-code-block">
-          <p className="promo-code-text">
-            Promo code
-          </p>
+          <p className="promo-code-text">Promo code</p>
         </div>
         <input
           className="promo-code-input"
@@ -39,7 +39,7 @@ export const PromoCodeSection = ({
           onKeyPress={event => {
             if (event.key === 'Enter' && isPromoCodeHasValue) {
               setShowPromoInput(false)
-              updateTickets(true)
+              updateTickets(true, 'promo')
             }
           }}
         />
@@ -48,7 +48,7 @@ export const PromoCodeSection = ({
           onClick={() => {
             if (isPromoCodeHasValue) {
               setShowPromoInput(false)
-              updateTickets(true)
+              updateTickets(true, 'promo')
             }
           }}
         >
@@ -76,6 +76,7 @@ export const PromoCodeSection = ({
           className="promo-code-button"
           placeholder="Promo Codes"
           onClick={() => {
+            setCodeIsApplied(false)
             setShowPromoInput(true)
           }}
         >

package/src/components/ticketsContainer/TicketRow.tsx

@@ -33,7 +33,7 @@ export const TicketRow = ({
   )
   const ticketsClosedMessage = !ticketTier.salesStarted ?  'Sales not started' : 'Sales Ended'
 
-  const onSaleContent = isSalesClosed ? ticketsClosedMessage : (
+  const onSaleContent = (
     <div className="get-tickets">
       <Box className="get-tickets__selectbox">
         <FormControl fullWidth>
@@ -68,14 +68,20 @@ export const TicketRow = ({
   )
 
   let returnValue: any = ''
+  // ticketTier.soldOut === false --> means that ticket is in the stock
+  const isSoldOut =
+    ticketTier.sold_out ||
+    !ticketTier.displayTicket ||
+    ticketTier.soldOut ||
+    ticketTier.soldOut === false
 
-  if (ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut) {
+  if (isSoldOut) {
     returnValue = soldOutMessage
-  }
-  if (ticketTier.displayTicket) {
+  } else if (isSalesClosed) {
+    returnValue = ticketsClosedMessage
+  } else if (ticketTier.displayTicket && ticketTier.maxQuantity) {
     returnValue = onSaleContent
-  }
-  if (_get(prevTicketTier, 'in_stock')) {
+  } else if (_get(prevTicketTier, 'in_stock')) {
     returnValue = 'SOON'
   }
 

package/src/components/ticketsContainer/TicketsSection.tsx

@@ -8,7 +8,6 @@ interface ITicketsSectionProps {
   ticketsList: any;
   selectedTickets: any;
   handleTicketSelect: any;
-  codeIsApplied: boolean;
   sortBySoldOut: boolean;
   ticketsHeaderComponent?: ReactNode,
   hideTicketsHeader: boolean,
@@ -18,7 +17,6 @@ export const TicketsSection = ({
   ticketsList,
   selectedTickets,
   handleTicketSelect,
-  codeIsApplied,
   sortBySoldOut,
   ticketsHeaderComponent,
   hideTicketsHeader
@@ -40,7 +38,6 @@ export const TicketsSection = ({
         let ticketIsDiscounted = false
         if (
           ticket.oldPrice &&
-          codeIsApplied &&
           !isSoldOut &&
           ticket.oldPrice !== ticket.price
         ) {