tf-checkout-react 1.2.10 → 1.2.13

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.10",
+  "version": "1.2.13",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -87,13 +87,13 @@
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
-    "material-ui-phone-number": "^3.0.0",
     "moment-timezone": "^0.5.34",
     "nanoid": "^3.1.30",
     "prop-types": "^15.7.2",
     "react-bootstrap": "^2.0.2",
     "react-countdown": "^2.3.2",
     "react-inlinesvg": "^2.3.0",
+    "react-phone-input-2": "^2.15.1",
     "react-share": "^4.4.0",
     "yup": "^0.32.11"
   }

package/src/components/billing-info-container/index.tsx

@@ -108,9 +108,11 @@ export interface IBillingInfoPage {
   logo?: string;
   showForgotPasswordButton?: boolean;
   showSignUpButton?: boolean;
+  brandOptIn?: boolean;
 }
 
 const LogicRunner: FC<{
+  brandOptIn?: boolean;
   values: any;
   setStates: React.Dispatch<any>;
   setFieldValue: any;
@@ -128,6 +130,7 @@ const LogicRunner: FC<{
   onGetStatesSuccess,
   onGetStatesError,
   shouldFetchCountries,
+  brandOptIn
 }) => {
   const prevCountry = useRef(values.country)
   useEffect(() => {
@@ -173,7 +176,7 @@ const LogicRunner: FC<{
               street_address: parsedData?.street_address || '',
               country: parsedData?.country || '1',
               zip: parsedData?.zip || '',
-              brand_opt_in: parsedData?.brand_opt_in || false,
+              brand_opt_in: brandOptIn ? brandOptIn : (parsedData?.brand_opt_in || false),
               city: parsedData?.city || '',
               confirmPassword: '',
               password: '',
@@ -236,6 +239,7 @@ export const BillingInfoContainer = ({
   logo,
   showForgotPasswordButton = false,
   showSignUpButton = false,
+  brandOptIn = false,
 }: IBillingInfoPage) => {
   const themeMui = createTheme(themeOptions)
   const isWindowDefined = typeof window !== 'undefined'
@@ -287,7 +291,8 @@ export const BillingInfoContainer = ({
   const showDOB = getQueryVariable('age_required') === 'true'
   const showTicketHolders = getQueryVariable('names_required') === 'true'
   const eventId = getQueryVariable('event_id')
-  const optedInFieldValue: boolean = _get(cartInfoData, 'optedIn', false)
+  const optedInFieldValue: boolean = brandOptIn
+  ? brandOptIn : _get(cartInfoData, 'optedIn', false)
   const ttfOptIn = Boolean(_get(cartInfoData, 'ttfOptIn', false))
   const hideTtfOptIn: boolean = _get(cartInfoData, 'hide_ttf_opt_in', true)
   const expirationTime = _get(cartInfoData, 'expiresAt')
@@ -616,6 +621,7 @@ export const BillingInfoContainer = ({
           <Form onSubmit={props.handleSubmit}>
             <ErrorFocus />
             <LogicRunner
+              brandOptIn={brandOptIn}
               values={props.values}
               setStates={setStates}
               setFieldValue={props.setFieldValue}
@@ -781,7 +787,6 @@ export const BillingInfoContainer = ({
                                     name={`${element.name}-${index}`}
                                     label={element.label}
                                     type={element.type}
-                                    required={true}
                                     component={
                                       element.type === 'checkbox'
                                         ? CheckboxField

package/src/components/common/PhoneNumberField.tsx

@@ -1,8 +1,10 @@
+import 'react-phone-input-2/lib/material.css'
+
 import { FieldInputProps, FormikProps } from 'formik'
 import _debounce from 'lodash/debounce'
 import _get from 'lodash/get'
-import MuiPhoneNumber from 'material-ui-phone-number'
 import React, { useCallback, useEffect } from 'react'
+import PhoneInput, { CountryData } from 'react-phone-input-2'
 
 import { validatePhoneNumber } from '../../api'
 
@@ -14,7 +16,7 @@ export interface IPhoneNumberField {
   // optional
   type: string;
   disableDropdown: boolean;
-  fill: boolean
+  fill: boolean;
 }
 
 export const PhoneNumberField = ({
@@ -28,9 +30,10 @@ export const PhoneNumberField = ({
     values,
     initialValues,
     setFieldValue,
+    setFieldTouched,
   },
   disableDropdown = true,
-  fill = false
+  fill = false,
 }: IPhoneNumberField) => {
   const error = _get(errors, field.name)
   const isTouched = Boolean(_get(touched, field.name))
@@ -42,6 +45,12 @@ export const PhoneNumberField = ({
   )
 
   useEffect(() => {
+    if (field.value === '+') {
+      setFieldError(field.name, '')
+      setFieldTouched(field.name, false)
+      return
+    }
+
     if (field.value) {
       setStatus({ [field.name]: true })
     }
@@ -66,19 +75,44 @@ export const PhoneNumberField = ({
   }, [field.value])
 
   return (
-    <MuiPhoneNumber
-      name={field.name}
-      value={fill ? values.phone : initialValues.phone}
-      onChange={(e: any) => setFieldValue(field.name, e)}
-      variant="outlined"
-      defaultCountry="us"
-      disableDropdown={disableDropdown}
-      label={label}
-      error={!!error && isTouched}
-      helperText={isTouched && error}
-      fullWidth
-      autoFormat={false}
-      disableAreaCodes={true}
-    />
+    <>
+      <PhoneInput
+        key={field.name}
+        value={fill ? values.phone : initialValues.phone}
+        onChange={(value, data: CountryData) => {
+          if (data.dialCode !== value) {
+            setFieldTouched(field.name, true)
+            setFieldValue(field.name, value)
+          } else {
+            setFieldValue(field.name, '')
+            setFieldError(field.name, '')
+          }
+        }}
+        country="us"
+        disableDropdown={disableDropdown}
+        specialLabel={label}
+        autoFormat={false}
+        inputStyle={{ width: '100%' }}
+      />
+      {!!error && isTouched && (
+        <p
+          style={{
+            fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+            fontWeight: '400',
+            fontSize: '0.75rem',
+            lineHeight: '1.66',
+            letterSpacing: '0.03333em',
+            textAlign: 'left',
+            marginTop: '3px',
+            marginRight: '14px',
+            marginBottom: '0',
+            marginLeft: '14px',
+            color: '#d32f2f',
+          }}
+        >
+          {error}
+        </p>
+      )}
+    </>
   )
 }

package/src/components/orderDetailsContainer/index.tsx

@@ -18,6 +18,7 @@ import TicketsTable, { ITicketTypes } from './ticketsTable'
 import { TicketResaleModal, InitialValuesTypes } from '../ticketResaleModal'
 import ConfirmModal from '../confirmModal'
 import { resaleTicket, removeFromResale } from '../../api'
+import moment from 'moment-timezone'
 
 interface TicketTypes {
   currency: string;
@@ -166,8 +167,9 @@ export const OrderDetailsContainer = ({
   }
 
   let orderSummery = `ID ${data.id}, placed`
-  if (data.date) {
-    orderSummery += ` ${data.date}`
+  if (data.date && data.timezone) {
+    const date = moment.tz(data.date, data.timezone).format("dddd, DD MMMM YYYY")
+    orderSummery += ` ${date}`
   }
 
   return (

package/src/components/paymentContainer/index.tsx

@@ -191,10 +191,9 @@ export const PaymentContainer = ({
       const {
         order_details: { order_hash },
       } = reviewData
-      const paymentSuccessResponse =
-        total === '0.00'
-          ? await handleFreeSuccess(order_hash)
-          : await handlePaymentSuccess(order_hash)
+      const paymentSuccessResponse = isFreeTickets
+        ? await handleFreeSuccess(order_hash)
+        : await handlePaymentSuccess(order_hash)
       if (paymentSuccessResponse.status === 200) {
         handlePayment(paymentSuccessResponse)
         setPaymentIsLoading(false)