tf-checkout-react 1.0.99 → 1.0.100-beta.2

package/src/components/ticketResale/index.tsx

@@ -1,56 +1,74 @@
-import React, { useEffect, useState } from 'react'
-import _get from 'lodash/get'
-import { checkTicketStatus } from '../../api'
-import { AxiosError } from 'axios'
-
-export interface ITicketResaleContainer {
-  onCheckTicketStatusSuccess: (res: any) => void
-  onCheckTicketStatusError: (e: AxiosError) => void
-  orderHash?: string
-}
-
-export const TicketResaleContainer = ({
-  onCheckTicketStatusSuccess = () => {},
-  onCheckTicketStatusError = () => {},
-  orderHash,
-}: ITicketResaleContainer) => {
-  const isWindowDefined = typeof window !== 'undefined'
-  const [error, setError] = useState(null)
-
-  useEffect(() => {
-    (async () => {
-      if (isWindowDefined) {
-        const params: URLSearchParams = new URL(`${window.location}`)
-          .searchParams
-        const hash = params.get('o') || orderHash || null
-
-        if (hash) {
-          try {
-            const response = await checkTicketStatus(hash)
-            const data = _get(response, 'data.data.attributes')
-            const age_required = _get(data, 'age_required', false)
-            const names_required = _get(data, 'names_required', false)
-            const event_id = _get(data, 'event_id')
-
-            onCheckTicketStatusSuccess(response.data)
-            window.location.href = `/billing/billing-info/?age_required=${age_required}&names_required=${names_required}&event_id=${event_id}`
-          } catch (error) {
-            console.log(error)
-            setError(error?.response?.data?.message)
-            onCheckTicketStatusError(error.response)
-          }
-        } else {
-          window.location.href = '/'
-        }
-      }
-    })()
-  }, [])
-
-  return (
-    <div className="ticket-resale-page">
-      <div className="error-block">
-        <h3>{error}</h3>
-      </div>
-    </div>
-  )
-}
+import React, { useEffect, useState } from 'react'
+import _get from 'lodash/get'
+import { processTicket, declineInvitation } from '../../api'
+import { AxiosError } from 'axios'
+
+export interface ITicketResaleContainer {
+  onProcessTicketSuccess: (res: any) => void
+  onProcessTicketError: (e: AxiosError) => void
+  onDeclineTicketPurchaseSuccess: (res: any) => void
+  onDeclineTicketPurchaseError: (e: AxiosError) => void
+  orderHash?: string
+}
+
+export const TicketResaleContainer = ({
+  onProcessTicketSuccess = () => {},
+  onProcessTicketError = () => {},
+  onDeclineTicketPurchaseSuccess = () => {},
+  onDeclineTicketPurchaseError = () => {},
+  orderHash,
+}: 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
+
+        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 data = _get(response, 'data.data.attributes')
+            const age_required = _get(data, 'age_required', false)
+            const names_required = _get(data, 'names_required', false)
+            const event_id = _get(data, 'event_id')
+
+            onProcessTicketSuccess(response.data)
+            window.location.href = `/billing/billing-info/?age_required=${age_required}&names_required=${names_required}&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,210 +1,213 @@
-import React from 'react'
-import { Field, Form, Formik } from 'formik'
-import * as yup from 'yup';
-import Modal from '@mui/material/Modal'
-import Box from '@mui/material/Box'
-import Button from '@mui/material/Button';
-import { RadioField } from '../common/RadioField'
-import { CheckboxField } from '../common/CheckboxField'
-import { CustomField } from '../common/CustomField'
-import SVG from 'react-inlinesvg'
-import { getImage } from '../../utils/getImage'
-import { ITicketTypes } from '../orderDetailsContainer/ticketsTable'
-import './style.css'
-
-interface Props {
-  ticket: ITicketTypes;
-  onClose: () => void;
-  onSubmit: (values: InitialValuesTypes) => void;
-}
-
-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 = () => {},
-}: Props) => {
-  const { hash, holder_name, event_name, currency, resale_fee_amount } = 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={getImage('user.svg')}
-                              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={getImage('email.svg')}
-                              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>
-                <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>
-                  <Field
-                    name='confirm'
-                    label='I agree'
-                    type='checkbox'
-                    component={CheckboxField}
-                  />
-                </div>
-                <div className="resale-action-button">
-                  <Button type="submit" disabled={!(isValid && dirty)}>Sell Ticket</Button>
-                </div>
-              </Form>
-            )}
-          </Formik>
-        </div>
-      </Box>
-    </Modal>
-  )
-}
+import React from 'react'
+import { Field, Form, Formik } from 'formik'
+import * as yup from 'yup';
+import Modal from '@mui/material/Modal'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button';
+import { RadioField } from '../common/RadioField'
+import { CheckboxField } from '../common/CheckboxField'
+import { CustomField } from '../common/CustomField'
+import SVG from 'react-inlinesvg'
+import { getImage } from '../../utils/getImage'
+import { ITicketTypes } from '../orderDetailsContainer/ticketsTable'
+import './style.css'
+
+interface Props {
+  ticket: ITicketTypes;
+  onClose: () => void;
+  onSubmit: (values: InitialValuesTypes) => void;
+}
+
+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 = () => {},
+}: Props) => {
+  const { hash, holder_name, event_name, currency, resale_fee_amount, 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={getImage('user.svg')}
+                              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={getImage('email.svg')}
+                              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 || ''} ${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'
+                    type='checkbox'
+                    component={CheckboxField}
+                  />
+                </div>
+                <div className="resale-action-button">
+                  <Button type="submit" disabled={!(isValid && dirty)}>Sell Ticket</Button>
+                </div>
+              </Form>
+            )}
+          </Formik>
+        </div>
+      </Box>
+    </Modal>
+  )
+}

package/src/components/ticketResaleModal/style.css

@@ -1,28 +1,28 @@
-.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;
-}
+.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;
+}