tf-checkout-react 1.0.106 → 1.2.1

package/src/components/orderDetailsContainer/ticketsTable.tsx

@@ -1,12 +1,15 @@
-import React, { Fragment } from 'react'
+import Paper from '@mui/material/Paper'
 import Table from '@mui/material/Table'
 import TableBody from '@mui/material/TableBody'
 import TableCell from '@mui/material/TableCell'
 import TableContainer from '@mui/material/TableContainer'
 import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
-import Paper from '@mui/material/Paper'
+import _identity from 'lodash/identity'
+import React, { Fragment, useState } from 'react'
+
 import { downloadPDF } from '../../utils'
+import SnackbarAlert from '../common/SnackbarAlert'
 
 interface IAddOnTypes {
   name: string;
@@ -32,99 +35,143 @@ interface TicketsTableTypes {
   tickets: ITicketTypes[];
   handleSellTicket: (ticket: ITicketTypes) => void;
   handleRemoveFromResale: (ticket: ITicketTypes) => void;
+
+  icon?: string;
 }
 
 const TicketsTable = ({
   tickets = [],
-  handleSellTicket = () => {},
-  handleRemoveFromResale = () => {}
-}: TicketsTableTypes) => (
-  <div className="tickets-box">
-    <h4 className="sub-title">Your Tickets</h4>
-    <TableContainer component={Paper}>
-      <Table aria-label="collapsible table">
-        <TableHead>
-          <TableRow>
-            <TableCell>Ticket ID</TableCell>
-            <TableCell>Ticket Type</TableCell>
-            <TableCell>Ticket Holder Name</TableCell>
-            <TableCell>Status</TableCell>
-            <TableCell>Download</TableCell>
-            <TableCell />
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {tickets.map((ticket: ITicketTypes, index: number) => (
-            <Fragment key={index}>
-              <TableRow>
-                <TableCell>{ticket.hash}</TableCell>
-                <TableCell>{ticket.ticket_type}</TableCell>
-                <TableCell>{ticket.holder_name}</TableCell>
-                <TableCell>{ticket.status}</TableCell>
+  handleSellTicket = _identity,
+  handleRemoveFromResale = _identity,
+  icon = '',
+}: TicketsTableTypes) => {
+  const [pdfError, setPdfError] = useState<string | null>(null)
+  return (
+    <div className="tickets-box">
+      <SnackbarAlert
+        type="error"
+        isOpen={!!pdfError}
+        message={pdfError || ''}
+        onClose={() => setPdfError(null)}
+      />
+      <h4 className="sub-title">Your Tickets</h4>
+      <TableContainer component={Paper}>
+        <Table aria-label="collapsible table">
+          <TableHead>
+            <TableRow>
+              <TableCell />
+              <TableCell />
+              <TableCell />
+              <TableCell />
+              <TableCell />
+              <TableCell />
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {tickets.map((ticket: ITicketTypes, index: number) => (
+              <Fragment key={index}>
+                <TableRow>
+                <TableCell>
+                    <div className="cell-block">
+                      <span>Ticket ID</span>
+                      <span>{ticket.hash}</span>
+                    </div>
+                  </TableCell>
                 <TableCell>
-                  {
-                    ticket.status !== "Sold" && (
+                  <div className="cell-block">
+                    <span>Ticket Type</span>
+                    <span>{ticket.ticket_type}</span>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <div className="cell-block">
+                    <span>Ticket Holder</span>
+                    <span>{ticket.holder_name}</span>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <div className="cell-block">
+                    <span>Status</span>
+                    <span>{ticket.status}</span>
+                  </div>
+                </TableCell>
+                  {ticket.pdf_link && ticket.status !== "Sold" ? (
+                    <TableCell>
+                      {Boolean(icon) && <img src={icon} alt="nodata" />}
                       <span
                         aria-hidden={true}
                         className="action-button"
-                        onClick={() => downloadPDF(ticket.pdf_link)}
+                        onClick={async () => {
+                          try {
+                            const pdfDownloadError = await downloadPDF(
+                              ticket.pdf_link
+                            )
+                            if (pdfDownloadError) {
+                              setPdfError(pdfDownloadError?.message)
+                            }
+                          } catch (err) {
+                            if (err && typeof err === 'string') {
+                              setPdfError(err)
+                            }
+                          }
+                        }}
                       >
                         Download
                       </span>
-                    )
-                  }
-                </TableCell>
-                <TableCell>
-                  {ticket.is_sellable && (
-                    <span
-                      aria-hidden={true}
-                      className="action-button"
-                      onClick={() => handleSellTicket(ticket)}
-                    >
-                      Sell Ticket
-                    </span>
-                  )}
-                  {ticket.is_on_sale && (
-                    <span
-                      aria-hidden={true}
-                      className="action-button"
-                      onClick={() => handleRemoveFromResale(ticket)}
-                    >
-                      Remove from Resale
-                    </span>
-                  )}
-                </TableCell>
-              </TableRow>
-              {!!ticket.add_ons?.length && (
-                <TableRow>
-                  <TableCell colSpan={6}>
-                    <Table className="ticket-add-on-table">
-                      <TableHead>
-                        <TableRow>
-                          <TableCell>Add-On</TableCell>
-                          <TableCell>Status</TableCell>
-                        </TableRow>
-                      </TableHead>
-                      <TableBody>
-                        {ticket.add_ons.map(
-                          (add_on: IAddOnTypes, index: number) => (
-                            <TableRow key={index}>
-                              <TableCell>{add_on.name}</TableCell>
-                              <TableCell>{add_on.status}</TableCell>
-                            </TableRow>
-                          )
-                        )}
-                      </TableBody>
-                    </Table>
+                  </TableCell>
+                  ) : null}
+                  <TableCell>
+                    {ticket.is_sellable && (
+                      <span
+                        aria-hidden={true}
+                        className="action-button"
+                        onClick={() => handleSellTicket(ticket)}
+                      >
+                        Sell Ticket
+                      </span>
+                    )}
+                    {ticket.is_on_sale && (
+                      <span
+                        aria-hidden={true}
+                        className="action-button"
+                        onClick={() => handleRemoveFromResale(ticket)}
+                      >
+                        Remove from Resale
+                      </span>
+                    )}
                   </TableCell>
                 </TableRow>
-              )}
-            </Fragment>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  </div>
-)
+                {!!ticket.add_ons?.length && (
+                  <TableRow>
+                    <TableCell colSpan={6}>
+                      <Table className="ticket-add-on-table">
+                        <TableHead>
+                          <TableRow>
+                            <TableCell>Add-On</TableCell>
+                            <TableCell>Status</TableCell>
+                          </TableRow>
+                        </TableHead>
+                        <TableBody>
+                          {ticket.add_ons.map(
+                            (add_on: IAddOnTypes, index: number) => (
+                              <TableRow key={index}>
+                                <TableCell>{add_on.name}</TableCell>
+                                <TableCell>{add_on.status}</TableCell>
+                              </TableRow>
+                            )
+                          )}
+                        </TableBody>
+                      </Table>
+                    </TableCell>
+                  </TableRow>
+                )}
+              </Fragment>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  )
+}
 
 export default TicketsTable

package/src/components/paymentContainer/index.tsx

@@ -20,7 +20,12 @@ import './style.css'
 import StripePayment from '../stripePayment'
 import { IOrderData, IPaymentField } from '../../types'
 
-import { getPaymentData, handlePaymentSuccess, getConditions, handleFreeSuccess } from '../../api'
+import {
+  getPaymentData,
+  handlePaymentSuccess,
+  getConditions,
+  handleFreeSuccess,
+} from '../../api'
 import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
 import { ThemeOptions } from '@mui/material'
@@ -65,6 +70,7 @@ export interface IPaymentPage {
   elementsOptions?: StripeElementsOptions;
   onCountdownFinish?: () => void;
   enableTimer?: boolean;
+  enablePaymentPlan?: boolean;
 }
 
 const initialOrderValues: IOrderData = {
@@ -101,10 +107,12 @@ export const PaymentContainer = ({
   elementsOptions,
   onCountdownFinish = () => {},
   enableTimer = false,
+  enablePaymentPlan = false,
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
   const [error, setError] = useState(null)
+  const [showPaymentPlanSection, setShowPaymentPlanSection] = useState(false)
   const [paymentIsLoading, setPaymentIsLoading] = useState(false)
   const [paymentDataIsLoading, setPaymentDataIsLoading] = useState(true)
   const [conditions, setConditions] = useState<{ id: string; text: string }[]>(
@@ -115,7 +123,7 @@ export const PaymentContainer = ({
   const showErrorText: boolean = Boolean(errorText)
 
   const eventId = getQueryVariable('event_id')
-  const { hash, total } = checkoutData;
+  const { hash, total } = checkoutData
 
   useEffect(() => {
     (async () => {
@@ -158,10 +166,10 @@ export const PaymentContainer = ({
         setConditions(
           conditionsInfo
             ? conditionsInfo.map((item: string) => ({
-              id: nanoid(),
-              text: item,
-              checked: false,
-            }))
+                id: nanoid(),
+                text: item,
+                checked: false,
+              }))
             : []
         )
       }
@@ -180,7 +188,10 @@ export const PaymentContainer = ({
       const {
         order_details: { order_hash },
       } = reviewData
-      const paymentSuccessResponse = total === "0.00" ? (await handleFreeSuccess(order_hash)) : (await handlePaymentSuccess(order_hash))
+      const paymentSuccessResponse =
+        total === '0.00'
+          ? await handleFreeSuccess(order_hash)
+          : await handlePaymentSuccess(order_hash)
       if (paymentSuccessResponse.status === 200) {
         handlePayment(paymentSuccessResponse)
         setPaymentIsLoading(false)
@@ -232,51 +243,105 @@ export const PaymentContainer = ({
                 )
               })}
             </div>
-            {total !== "0.00" ? <div className="payment_info">
-              <div className="payment_info_label">
-                Please provide your payment information
+            {enablePaymentPlan && <div className="payment_toggle">
+              <label htmlFor="togBtn" className="switch">
+                <input
+                  type="checkbox"
+                  id="togBtn"
+                  disabled={true}
+                  onChange={() =>
+                    setShowPaymentPlanSection(!showPaymentPlanSection)
+                  }
+                />
+                <div className="slider round"></div>
+                <span className="tog_text">
+                  Click to checkout using Payment Plan
+                </span>
+              </label>
+            </div>}
+            {showPaymentPlanSection && (
+              <div className="payment_plan">
+                <h2>PAYMENT PLAN</h2>
+                <div className="plan_block">
+                  <h3>Mbrand Payment Plan Terms</h3>
+                  <p>
+                    By clicking on the “Confirm Payment Plan” button, you are
+                    starting your payment plan of 2 payments of $115.00, which
+                    will be drawn from your account every 2 weeks, with the
+                    first payment taken later today.
+                  </p>
+                  <p>
+                    This includes a non-refundable admin fee of $3.00 per
+                    payment.
+                  </p>
+                  <p className="payment_note">
+                    NOTE: If today’s payment fails, your payment plan will not
+                    activate, and your tickets will not be issued until you
+                    complete your final payment.
+                  </p>
+                  <p>
+                    If you do not complete your payements, your order will be
+                    canceled. Your first payment of $115.00, plus the
+                    non-refundable admin fee of $3.00 will not be refunded.
+                  </p>
+                  <p>
+                    Your payment will proceed with the card ending in **** 4242.
+                  </p>
+                </div>
+              </div>
+            )}
+            {total !== '0.00' ? (
+              <div className="payment_info">
+                <div className="payment_info_label">ORDER CONFIRMATION</div>
+                {showErrorText && (
+                  <p className="payment_info__error">{errorText}</p>
+                )}
+                <div>
+                  <Elements
+                    stripe={getStripePromise(reviewData)}
+                    options={elementsOptions}
+                  >
+                    <StripePayment
+                      stripe_client_secret={_get(
+                        reviewData,
+                        'payment_method.stripe_client_secret'
+                      )}
+                      total={orderData.total}
+                      onSubmit={handlePaymentMiddleWare}
+                      error={error}
+                      currency={orderData.currency}
+                      billing_info={reviewData.billing_info}
+                      isLoading={paymentIsLoading}
+                      handleSetLoading={value => setPaymentIsLoading(value)}
+                      conditions={conditions}
+                      stripeCardOptions={stripeCardOptions}
+                      disableZipSection={disableZipSection}
+                    />
+                  </Elements>
+                </div>
               </div>
-              {showErrorText && (
-                <p className="payment_info__error">{errorText}</p>
-              )}
-              <div>
-                <Elements
-                  stripe={getStripePromise(reviewData)}
-                  options={elementsOptions}
+            ) : (
+              <div
+                className={`payment_button ${
+                  paymentIsLoading ? 'disabled-payment-button' : ''
+                }`}
+              >
+                <button
+                  disabled={paymentIsLoading}
+                  type="button"
+                  onClick={() => {
+                    setPaymentIsLoading(true)
+                    handlePaymentMiddleWare(null)
+                  }}
                 >
-                  <StripePayment
-                    stripe_client_secret={_get(
-                      reviewData,
-                      'payment_method.stripe_client_secret'
-                    )}
-                    total={orderData.total}
-                    onSubmit={handlePaymentMiddleWare}
-                    error={error}
-                    currency={orderData.currency}
-                    billing_info={reviewData.billing_info}
-                    isLoading={paymentIsLoading}
-                    handleSetLoading={value => setPaymentIsLoading(value)}
-                    conditions={conditions}
-                    stripeCardOptions={stripeCardOptions}
-                    disableZipSection={disableZipSection}
-                  />
-                </Elements>
+                  {paymentIsLoading ? (
+                    <CircularProgress size={26} />
+                  ) : (
+                    'Complete Registration'
+                  )}
+                </button>
               </div>
-            </div> : 
-            <div
-              className={`payment_button ${paymentIsLoading ? 'disabled-payment-button' : ''}`}
-            >
-              <button disabled={paymentIsLoading} type="button" onClick={() => {
-                setPaymentIsLoading(true)
-                handlePaymentMiddleWare(null)
-              }}>
-                {paymentIsLoading ? (
-                  <CircularProgress size={26} />
-                ) : (
-                  "Complete Registration"
-                )}
-              </button>
-            </div>}
+            )}
           </Container>
         )}
       </div>

package/src/components/registerModal/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { AxiosError } from 'axios'
 import './style.css'
-import { getProfileData, handleSetAccessToken, register } from '../../api'
+import { getProfileData, register } from '../../api'
 import { Field, Form, Formik } from 'formik'
 import { requiredValidator } from '../../validators'
 import { TextField } from '@mui/material'
@@ -64,17 +64,11 @@ export const RegisterModal: FC<Props> = ({
           CONFIGS.CLIENT_SECRET ||
             'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
         )
-        const resRegister = await register(bodyFormData)
-        const access_token = _get(
-          resRegister,
-          'data.data.attributes.access_token'
-        )
-        handleSetAccessToken(access_token)
-
+        await register(bodyFormData)
         let profileResponse = null
 
         try {
-          profileResponse = await getProfileData(access_token)
+          profileResponse = await getProfileData()
           onGetProfileDataSuccess(profileResponse.data)
         } catch (e) {
           onGetProfileDataError(e.response)
@@ -89,7 +83,6 @@ export const RegisterModal: FC<Props> = ({
           email: profileSpecifiedData.email,
         }
         if (typeof window !== 'undefined') {
-          window.localStorage.setItem('access_token', access_token)
           window.localStorage.setItem(
             'user_data',
             JSON.stringify(profileDataObj)

package/src/components/resetPasswordContainer/index.tsx

@@ -0,0 +1,96 @@
+import React, { FC, useState } from 'react'
+import { Field, Form, Formik } from 'formik'
+import { CircularProgress } from '@mui/material'
+import { CustomField } from '../common/CustomField'
+import axios, { AxiosError } from 'axios'
+import * as Yup from 'yup'
+import { resetPassword } from '../../api'
+import './style.css'
+
+interface IResetPasswordProps {
+  token?: string
+  onResetPasswordSuccess?: (res: any) => void
+  onResetPasswordError?: (e: AxiosError) => void
+}
+
+const Schema = Yup.object().shape({
+  password: Yup.string()
+    .min(6, 'Password must have 5+ characters')
+    .required('Required'),
+    password_confirmation: Yup.string()
+    .required('Required')
+    .oneOf([Yup.ref('password'), null], 'Passwords must match'),
+})
+
+export const ResetPasswordContainer: FC<IResetPasswordProps> = ({
+  token: tokenProps = '',
+  onResetPasswordSuccess = () => {},
+  onResetPasswordError = () => {},
+}) => {
+  const [loading, setLoading] = useState(false)
+  return (
+    <div className="reset-password">
+      <div className="title">Change Password</div>
+      <Formik
+        initialValues={{ password: '', password_confirmation: '' }}
+        validationSchema={Schema}
+        onSubmit={async (values: any) => {
+          try {
+            setLoading(true)
+            let token
+            if (tokenProps) {
+              token = tokenProps
+            } else {
+              if (typeof window !== 'undefined') {
+                const params: URLSearchParams = new URL(`${window.location}`)
+                  .searchParams
+                token = params.get('token')
+              }
+            }
+
+            const payload = {
+              token,
+              ...values,
+            }
+            const res = await resetPassword(payload)
+            onResetPasswordSuccess(res)
+          } catch (e) {
+            if (axios.isAxiosError(e)) {
+              onResetPasswordError(e)
+            }
+          } finally {
+            setLoading(false)
+          }
+        }}
+      >
+        {({ isValid, dirty }) => (
+          <Form>
+            <div className="body">
+              <div className="field-item">
+                <Field
+                  name="password"
+                  label="New Password"
+                  type="password"
+                  component={CustomField}
+                />
+              </div>
+              <div className="field-item">
+                <Field
+                  name="password_confirmation"
+                  label="Confirm Password"
+                  type="password"
+                  component={CustomField}
+                />
+              </div>
+            </div>
+            <div className="action-button">
+              <button type="submit" disabled={!(isValid && dirty)}>
+                {loading ? <CircularProgress size="22px" /> : 'Submit'}
+              </button>
+            </div>
+          </Form>
+        )}
+      </Formik>
+    </div>
+  )
+}

package/src/components/resetPasswordContainer/style.css

@@ -0,0 +1,36 @@
+.reset-password {
+  padding: 14px;
+  max-width: 300px;
+  margin: 0 auto;
+}
+.reset-password .title {
+  font-size: 20px;
+  font-weight: bold;
+}
+.reset-password .field-item {
+  margin-top: 14px;
+}
+.reset-password .action-button button {
+  padding: 10px;
+  width: 100%;
+  margin-top: 14px;
+  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;
+}
+.reset-password .action-button button:hover:enabled {
+  background-color: #505050;
+  border-color: #505050;
+}
+.reset-password .action-button button[disabled] {
+  opacity: .7;
+  cursor: unset;
+}