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

package/src/components/confirmationContainer/style.css

@@ -1,206 +0,0 @@
-.confirmation-page {
-  max-width: 1024px;
-  margin: 0 auto;
-}
-.confirmation-page button {
-  margin-top: inherit;
-}
-.confirmation-page .strong-text {
-  font-weight: 700;
-}
-.confirmation-page .title {
-  font-size: 24px;
-  font-weight: 600;
-  color: #333;
-}
-.confirmation-page .share-message-section {
-  display: flex;
-  flex-direction: column;
-  padding: 15px;
-  background: #dff0d8;
-  color: #2c7221;
-  border-radius: 5px;
-  border: 1px solid #d6e9c6;
-  margin: 20px 0;
-}
-.confirmation-page .main {
-  font-weight: 700;
-  font-size: 15px;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
-    Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
-}
-.confirmation-page .helper {
-  font-size: 14px;
-  margin-top: 5px;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
-    Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
-}
-.confirmation-page .referral_text_image_section {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  margin: 20px 0;
-}
-.confirmation-page .referral_text_section {
-  margin: 10px;
-}
-.confirmation-page .referral_title_text {
-  color: #f08057;
-  font-size: 28px;
-  padding-bottom: 10px;
-}
-.confirmation-page .referral_text {
-  font-size: 18px;
-}
-.confirmation-page .referral_text_image_section img {
-  max-width: 200px;
-  margin: 10px;
-}
-.confirmation-page .share_wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  column-gap: 5rem;
-  margin: 10px;
-}
-.confirmation-page .invitation_title {
-  font-size: 22px;
-  padding-bottom: 12px;
-  padding-top: 12px;
-}
-.confirmation-page .share_section {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  margin: 0 -10px;
-}
-.confirmation-page .invitation_section {
-  flex: 1 1;
-  padding: 0 5px;
-}
-.confirmation-page .share_buttons {
-  display: grid;
-  flex-wrap: wrap;
-  margin: 0 -7px;
-}
-.confirmation-page .convenient_buttons {
-  margin-top: 10px;
-}
-.confirmation-page .social-media-btns {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  grid-gap: 5px;
-}
-.confirmation-page .sharing-btn {
-  min-width: 130px;
-  flex: 1 1;
-  background-color: #000000;
-}
-.confirmation-page .sharing-btn a {
-  text-decoration: none;
-}
-.confirmation-page .share-by-link {
-  background: #000;
-  color: #fff;
-  padding: 10px;
-}
-.confirmation-page .share-by-link.label {
-  text-align: left;
-  padding: 0;
-  margin: 0;
-}
-.confirmation-page .share-btn-inner {
-  background-color: #000;
-  color: #fff;
-  padding: 10px;
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-  box-sizing: border-box;
-  cursor: pointer;
-  padding: 0;
-  text-align: left;
-}
-.confirmation-page .share-input {
-  width: 300px;
-  text-align: left;
-  background-color: #fff;
-  outline: none;
-  border: none;
-  padding: 5px;
-}
-.confirmation-page .share-text {
-  width: 100%;
-  padding-top: 8px;
-  display: block;
-  font-size: 13px;
-  font-weight: 600;
-}
-.confirmation-page .pricing-section_wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  padding: 15px;
-  background: #e3e3e3;
-  border: 1px solid #dcdcdc;
-  margin: 10px 0;
-}
-.confirmation-page .pricing-section_label {
-  font-weight: 600;
-}
-.confirmation-page .pricing-section_sublabel {
-  font-weight: 100;
-  font-size: 14px;
-}
-.confirmation-page .pricing-section_price {
-  text-align: right;
-  font-weight: 600;
-}
-.confirmation-page .share-by-link-copy-icon {
-  cursor: pointer;
-  color: #fff;
-  background-color: #32325d;
-  transition: all 150ms ease;
-  padding: 10px;
-  border-radius: 4px;
-  margin-left: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.confirmation-page .share-by-link-copy-icon:hover {
-  background-color: #505050;
-}
-.confirmation-page .share-by-link-copy-icon img {
-  width: 14px;
-}
-.confirmation-page .social-media-sharing {
-  background-color: #000;
-  color: #fff;
-  padding: 10px;
-  text-align: center;
-  cursor: pointer;
-}
-.confirmation-page .share-icon {
-  display: inline-flex;
-  border-radius: 4px;
-}
-@media only screen and (max-width: 1050px) {
-  .confirmation-page .share_wrapper {
-    display: grid;
-    grid-template-columns: unset;
-    column-gap: 0;
-    margin: 15px;
-  }
-}
-@media only screen and (max-width: 480px) {
-  .confirmation-page .social-media-btns {
-    grid-template-columns: unset;
-  }
-  .confirmation-page .share-input {
-    width: 250px;
-  }
-}
-
-.twitter-btn {
-  background-color: #000 !important;
-}

package/src/components/countdown/index.tsx

@@ -1,100 +0,0 @@
-import './style.css'
-
-import moment from 'moment-timezone'
-import React, { useEffect, useState } from 'react'
-
-interface CountdownTypes {
-  startDate: string;
-  timezone?: string;
-  title?: string;
-  message?: string;
-  showMessage?: boolean;
-  disableLeadingZero?: boolean;
-  callback?: () => void;
-  isLoggedIn?: boolean;
-}
-
-const isTimeExpired = (startDate: string, timezone: string) =>
-  !moment(startDate).isAfter(moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss'))
-
-function Countdown({
-  startDate,
-  timezone = moment.tz.guess(),
-  title = '',
-  message = '',
-  showMessage = false,
-  disableLeadingZero = false,
-  callback = () => {},
-  isLoggedIn,
-}: CountdownTypes) {
-  const [duration, setDuration] = useState('')
-  const [timeExpired, setTimeExpired] = useState(false)
-
-  useEffect(() => {
-    setTimeExpired(isTimeExpired(startDate, timezone))
-  }, [])
-
-  useEffect(() => {
-    let timer: any
-
-    if (!timeExpired) {
-      timer = setInterval(() => {
-        if (isTimeExpired(startDate, timezone)) {
-          clearInterval(timer)
-          setTimeExpired(true)
-          callback()
-          return
-        }
-
-        const currentDate = moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss')
-        const diffTime = moment(startDate).diff(currentDate)
-        const duration = moment.duration(diffTime)
-        const dateArr: any = {
-          year: duration.years(),
-          month: duration.months(),
-          day: duration.days(),
-          hour: duration.hours(),
-          minute: duration.minutes(),
-          second: duration.seconds(),
-        }
-        let timeLeft = ''
-
-        for (const date in dateArr) {
-          const unit = dateArr[date] === 1 ? date : date + 's'
-          let val = dateArr[date]
-
-          if (!disableLeadingZero && String(dateArr[date]).length === 1) {
-            val = '0' + dateArr[date]
-          }
-
-          if (timeLeft) {
-            timeLeft += `, ${val} ${unit}`
-          } else if (dateArr[date]) {
-            timeLeft += `${val} ${unit}`
-          }
-        }
-
-        setDuration(timeLeft)
-      }, 1000)
-    }
-    return () => {
-      clearInterval(timer)
-    }
-  }, [timeExpired])
-
-  return (
-    <>
-      {!timeExpired && duration && (
-        <div className={`countdown ${!isLoggedIn ? 'countdown-on-bottom' : ''}`}>
-          <div>
-            <p className="title">{title}</p>
-            <p>{duration}</p>
-          </div>
-          {showMessage && <p className="message">{message}</p>}
-        </div>
-      )}
-    </>
-  )
-}
-
-export default Countdown

package/src/components/countdown/style.css

@@ -1,10 +0,0 @@
-.countdown p {
-  margin: 0;
-}
-.countdown .title {
-  font-weight: bold;
-}
-.countdown .message {
-  margin-top: 20px;
-  font-weight: bold;
-}

package/src/components/delegationsContainer/IssueComponent.tsx

@@ -1,156 +0,0 @@
-import axios, { AxiosError } from 'axios'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import _map from 'lodash/map'
-import React, { useEffect, useState } from 'react'
-
-import { IDelegationsData, IDelegationsTicketType } from '../../api/guestTicketDelegation'
-import { getDelegationTickets, issueTicket } from '../../api/index'
-import { CONFIGS, getQueryVariable } from '../../utils'
-import { Loader } from '../common'
-import ConfirmModal from '../confirmModal'
-import { DELEGATION_ACCESS_ERROR } from '../idVerificationContainer/constants'
-import IssueTicketForm from './IssueTicketForm'
-import TicketsAssignedTable from './TicketsAssignedTable'
-import TicketsAvailableTable from './TicketsAvailableTable'
-
-export interface IssueTicketData {
-  headTitle?: string;
-  classNamePrefix?: string;
-  onGetIssuePageDataSuccess?: () => void;
-  onGetIssuePageDataError?: (e: AxiosError) => void;
-}
-
-const IssueComponent = ({
-  classNamePrefix = 'delegations',
-  headTitle = 'Manage Your Guest Tickets',
-  onGetIssuePageDataSuccess = _identity,
-  onGetIssuePageDataError = _identity,
-}: IssueTicketData) => {
-  const [loading, setLoading] = useState(true)
-  const [showMaxQtyModal, setShowMaxQtyModal] = useState(false)
-  const [showSuccessModal, setShowSuccessModal] = useState(false)
-  const [error, setError] = useState('')
-  const accessHash = getQueryVariable('hash') || ''
-  const [issuePageData, setIssuePageData] = useState<IDelegationsData>(
-    {} as IDelegationsData
-  )
-
-  useEffect(() => {
-    const fetchDelegationTickets = async () => {
-      try {
-        const res = await getDelegationTickets(accessHash)
-        setLoading(false)
-        setIssuePageData(res?.data?.data?.attributes || {})
-        onGetIssuePageDataSuccess()
-      } catch (e) {
-        setLoading(false)
-        if (axios.isAxiosError(e)) {
-          onGetIssuePageDataError(e)
-        }
-      }
-    }
-    fetchDelegationTickets()
-  }, [showSuccessModal])
-  const selectTicketTypeOptions = _map(
-    issuePageData.ticketTypes || ({} as IDelegationsTicketType),
-    (val, key) => ({
-      value: key,
-      label: val.optionValue,
-    })
-  )
-  return (
-    <div className={`${classNamePrefix}-container`}>
-      {loading ? (
-        <Loader />
-      ) : (
-        <>
-          {showMaxQtyModal && (
-            <ConfirmModal
-              hideCancelBtn={true}
-              message={error}
-              onClose={() =>
-                error === DELEGATION_ACCESS_ERROR
-                  ? (window.location.href = '/')
-                  : setShowMaxQtyModal(false)
-              }
-              onConfirm={() =>
-                error === DELEGATION_ACCESS_ERROR
-                  ? (window.location.href = '/')
-                  : setShowMaxQtyModal(false)
-              }
-            />
-          )}
-          {showSuccessModal && (
-            <ConfirmModal
-              hideCancelBtn={true}
-              message="Your ticket successfully issued."
-              onClose={() => setShowSuccessModal(false)}
-              onConfirm={() => setShowSuccessModal(false)}
-            />
-          )}
-          <div className={`${classNamePrefix}-head-title`}>{headTitle}</div>
-          <div className={`${classNamePrefix}-inner-blocks`}>
-            <div className={`${classNamePrefix}-image-block`}>
-              <img
-                src={`${CONFIGS.BASE_URL}${issuePageData?.eventImage}`}
-                alt="main_event_img"
-                title=""
-              />
-            </div>
-            <div className={`${classNamePrefix}-tables`}>
-              <TicketsAvailableTable
-                tableTitle="Tickets available"
-                issuePageData={issuePageData}
-                classNamePrefix="delegations"
-              />
-              <TicketsAssignedTable
-                tableTitle="Tickets assigned"
-                issuePageData={issuePageData}
-                classNamePrefix="delegations"
-              />
-              <div className={`${classNamePrefix}-issue-block`}>
-                <div className={`${classNamePrefix}-issue-title`}>Issue New Tickets</div>
-                <div className={`${classNamePrefix}-issue-subtitle`}>
-                  Please select the type of tickets and enter recipient details:
-                </div>
-              </div>
-              <IssueTicketForm
-                classNamePrefix={'delegations'}
-                handleSubmit={async (values: any, { resetForm, setSubmitting }) => {
-                  try {
-                    await issueTicket(accessHash, values)
-                    setShowSuccessModal(true)
-                    resetForm()
-                  } catch (e) {
-                    if (axios.isAxiosError(e)) {
-                      const error = _get(e, 'response.data.message') || 'Error'
-                      setError(error)
-                    } else if (e instanceof Error) {
-                      setError(e?.message || 'Error')
-                    }
-                    setShowMaxQtyModal(true)
-                  } finally {
-                    setLoading(false)
-                    setSubmitting(false)
-                  }
-                }}
-                selectTicketTypeOptions={selectTicketTypeOptions}
-                initialValues={{
-                  ticketTypeId: '',
-                  firstName: '',
-                  lastName: '',
-                  email: '',
-                  confirmEmail: '',
-                  confirm: false,
-                }}
-              />
-            </div>
-          </div>
-        </>
-      )}
-    </div>
-  )
-}
-
-export default IssueComponent

package/src/components/delegationsContainer/IssueTicketForm.tsx

@@ -1,109 +0,0 @@
-import { CircularProgress } from '@mui/material'
-import { Field, Form, Formik } from 'formik'
-import _identity from 'lodash/identity'
-import React from 'react'
-
-import { requiredValidator } from '../../validators'
-import { CheckboxField, SelectField } from '../common'
-import { CustomField } from '../common/CustomField'
-import { getValidateFunctions } from '../common/FieldSection/utils'
-
-export interface IIssueTicketForm {
-  classNamePrefix?: string;
-  handleSubmit: (values: any, resetForm: any) => void;
-  selectTicketTypeOptions: Array<any>;
-  initialValues?: any;
-}
-
-const IssueTicketForm = ({
-  classNamePrefix = 'delegations',
-  handleSubmit = _identity,
-  selectTicketTypeOptions,
-  initialValues,
-}: IIssueTicketForm) => (
-  <div className={`${classNamePrefix}-issue-form`}>
-    <Formik
-      initialValues={initialValues}
-      onSubmit={(values, { resetForm, setSubmitting }) => {
-        delete values.confirm
-        handleSubmit(values, { resetForm, setSubmitting })
-      }}
-    >
-      {({ isValid, values, isSubmitting }) => (
-        <Form>
-          <div className="body">
-            <div className="field-item">
-              <div className="field_label">Ticket Type</div>
-              <Field
-                name="ticketTypeId"
-                label="Ticket Type"
-                component={SelectField}
-                validate={requiredValidator}
-                options={selectTicketTypeOptions}
-              />
-            </div>
-            <div className="field-item">
-              <div className="field_label">Name</div>
-              <Field
-                name="firstName"
-                label="Name"
-                component={CustomField}
-                validate={requiredValidator}
-              />
-            </div>
-            <div className="field-item">
-              <div className="field_label">Last Name</div>
-              <Field
-                name="lastName"
-                label="Last Name"
-                component={CustomField}
-                validate={requiredValidator}
-              />
-            </div>
-            <div className="field-item">
-              <div className="field_label">Email</div>
-              <Field
-                name="email"
-                label="Email"
-                component={CustomField}
-                validate={requiredValidator}
-              />
-            </div>
-            <div className="field-item">
-              <div className="field_label">Confirm Email</div>
-              <Field
-                name="confirmEmail"
-                label="Confirm Email"
-                component={CustomField}
-                validate={getValidateFunctions({
-                  element: {
-                    name: 'confirmEmail',
-                    label: 'Confirm Email',
-                    required: true,
-                  },
-                  values,
-                })}
-              />
-            </div>
-          </div>
-          <div className="field-item checkbox_item">
-            <Field
-              name="confirm"
-              label="I agree to ManaCommon's privacy policy"
-              type="checkbox"
-              validate={requiredValidator}
-              component={CheckboxField}
-            />
-          </div>
-          <div className="action-button">
-            <button type="submit" disabled={!isValid}>
-              {isSubmitting ? <CircularProgress size="22px" /> : 'Issue Ticket'}
-            </button>
-          </div>
-        </Form>
-      )}
-    </Formik>
-  </div>
-)
-
-export default IssueTicketForm

package/src/components/delegationsContainer/TicketsAssignedTable.tsx

@@ -1,55 +0,0 @@
-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 React from 'react'
-
-export interface ITicketsAssignedTable {
-  tableTitle?: string;
-  classNamePrefix?: string;
-  noTicketsAssignedText?: string;
-  issuePageData: {
-    tickets: Array<any>;
-  };
-}
-
-const TicketsAssignedTable = ({
-  tableTitle = 'Tickets assigned',
-  classNamePrefix = 'delegations',
-  issuePageData,
-  noTicketsAssignedText = "You haven't issued any tickets yet.",
-}: ITicketsAssignedTable) => (
-  <div className={`${classNamePrefix}-tables-block`}>
-    <div className={`${classNamePrefix}-ticket-holder`}>{tableTitle}</div>
-    {issuePageData.tickets?.length ? (
-      <TableContainer className="my-ticket-table">
-        <Table aria-label="collapsible table">
-          <TableHead>
-            <TableRow>
-              <TableCell key={'Ticket Holder'}>{'Ticket Holder'}</TableCell>
-              <TableCell key={'Ticket Type'}>{'Ticket Type'}</TableCell>
-              <TableCell key={'Status'}>{'Status'}</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {issuePageData.tickets?.map((ticket: any) => (
-              <TableRow key={ticket.id}>
-                <TableCell key={ticket.id + 'type'}>
-                  {ticket.firstName + ' ' + ticket.lastName}
-                </TableCell>
-                <TableCell key={ticket.id + 'ticketType'}>{ticket.ticketType}</TableCell>
-                <TableCell key={ticket.id + 'status'}>{ticket.status}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    ) : (
-      noTicketsAssignedText
-    )}
-  </div>
-)
-
-export default TicketsAssignedTable

package/src/components/delegationsContainer/TicketsAvailableTable.tsx

@@ -1,54 +0,0 @@
-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 _map from 'lodash/map'
-import React from 'react'
-
-import { IDelegationsTicketType } from '../../api/guestTicketDelegation'
-
-export interface ITicketsAvailableTable {
-  tableTitle?: string;
-  classNamePrefix?: string;
-  issuePageData: {
-    ticketTypes: IDelegationsTicketType;
-  };
-}
-
-const TicketsAvailableTable = ({
-  tableTitle = 'Tickets available',
-  classNamePrefix = 'delegations',
-  issuePageData,
-}: ITicketsAvailableTable) => (
-  <div className={`${classNamePrefix}-tables-block`}>
-    <div className={`${classNamePrefix}-ticket-holder`}>{tableTitle}</div>
-    <TableContainer className="my-ticket-table">
-      <Table aria-label="collapsible table">
-        <TableHead>
-          <TableRow>
-            <TableCell key={1}>{'Ticket Type'}</TableCell>
-            <TableCell key={2}>{'Total Quantity'}</TableCell>
-            <TableCell key={3}>{'Quantity Issued'}</TableCell>
-            <TableCell key={4}>{'Quantity Remaining'}</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {_map(issuePageData.ticketTypes, (val, key) => (
-            <TableRow key={key}>
-              <TableCell key={key + 'name'}>{val.optionValue}</TableCell>
-              <TableCell key={key + 'maxQty'}>{val.delegationMaxQuantity}</TableCell>
-              <TableCell key={key + 'issued'}>{val.delegationQuantityIssued}</TableCell>
-              <TableCell key={key + 'remaining'}>
-                {Number(val.delegationMaxQuantity) - Number(val.delegationQuantityIssued)}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  </div>
-)
-
-export default TicketsAvailableTable