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

package/src/components/ticketsContainer/AccessCodeSection.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import Button from 'react-bootstrap/Button'
+
+export interface IAccessCodeSectionProps {
+  code: string;
+  setCode: (value: string) => void;
+  updateTickets: (value: boolean, type?: string) => void;
+}
+
+// This section is seperate because additional changes layter may be applied to Access Code
+
+export const AccessCodeSection = ({
+  code,
+  setCode,
+  updateTickets
+}: IAccessCodeSectionProps) => {
+  const isAccessCodeHasValue = !!code.trim()
+
+  return (
+    <div className="access-code-block">
+      <div className="access-code-block">
+        <p className="access-code-text">
+          Access code required
+        </p>
+      </div>
+      <input
+        className="access-code-input"
+        placeholder=""
+        onChange={e => {
+          setCode(e.target.value)
+        }}
+        onKeyPress={event => {
+          if (event.key === 'Enter' && isAccessCodeHasValue) {
+            updateTickets(true)
+          }
+        }}
+      />
+      <Button
+        className="access-submit-button"
+        onClick={() => {
+          if (isAccessCodeHasValue) {
+            updateTickets(true)
+          }
+        }}
+      >
+        ENTER
+      </Button>
+    </div>
+  )
+}

package/src/components/ticketsContainer/PromoCodeSection.tsx

@@ -1,99 +1,89 @@
-import React from 'react'
-import Button from 'react-bootstrap/Button'
-import SVG from 'react-inlinesvg'
-import { getImage } from '../../utils/getImage'
-import { Loader } from '../common/index'
-
-export interface IPromoCodeSectionProps {
-  promoCode: string;
-  promoCodeIsApplied: boolean;
-  showPromoInput: boolean;
-  isPromotionsEnabled: boolean;
-  isAllTicketsSoldOut: boolean;
-  isAccessCodeEnabled?: boolean;
-  isPromoLoading?: boolean;
-  setPromoCode: (value: string) => void;
-  setPromoCodeUpdated: (value: string) => void;
-  setShowPromoInput: (value: boolean) => void;
-}
-
-export const PromoCodeSection = ({
-  promoCode,
-  promoCodeIsApplied,
-  showPromoInput,
-  isPromotionsEnabled,
-  setPromoCode,
-  setPromoCodeUpdated,
-  setShowPromoInput,
-  isAccessCodeEnabled,
-  isPromoLoading,
-}: IPromoCodeSectionProps) => {
-  const isPromoCodeHasValue = !!promoCode.trim()
-
-  const renderInputField = () => {
-      return (
-        <div className="promo-code-block">
-          <div className="promo-code-block">
-            <p className="promo-code-text">
-           { isAccessCodeEnabled ? 'Access code required' : 'Promo code'}
-            </p>
-            
-          </div>
-              <input
-                className="promo-code-input"
-                placeholder=""
-                onChange={e => {
-                  setPromoCode(e.target.value)
-                }}
-                onKeyPress={event => {
-                  if (event.key === 'Enter' && isPromoCodeHasValue) {
-                    setPromoCodeUpdated(promoCode)
-                    setShowPromoInput(false)
-                  }
-                }}
-              />
-              <Button
-                className="promo-submit-button"
-                onClick={() => {
-                  if (isPromoCodeHasValue) {
-                    setPromoCodeUpdated(promoCode)
-                    setShowPromoInput(false)
-                  }
-                }}
-              >
-                {isAccessCodeEnabled ? 'ENTER' : 'APPLY'}
-              </Button>
-            </div>
-      )
-  }
-
-  return isPromoLoading ? <Loader /> : (
-    <div >
-      {promoCodeIsApplied ? (
-        <div className="alert-info">
-          <SVG
-            src={getImage('done.svg')}
-            preProcessor={(code) => code.replace(/fill=".*?"/g, 'fill="currentColor"')}
-          />
-          <p className="promo-code-success">PROMO CODE APPLIED SUCCESSFULLY</p>
-        </div>
-      ) : null}
-      {showPromoInput && (
-        renderInputField()
-      )}
-      {isPromotionsEnabled && !showPromoInput && !isAccessCodeEnabled ? (
-        <Button
-          className="promo-code-button"
-          placeholder="Promo Codes"
-          onClick={() => {
-            setShowPromoInput(true)
-          }}
-        >
-          Got a promo code? Click here
-        </Button>
-      ) : !isPromotionsEnabled && !showPromoInput && isAccessCodeEnabled && !promoCodeIsApplied ? renderInputField() :
-          null
-      }
-    </div>
-  )
-}
+import React from 'react'
+import Button from 'react-bootstrap/Button'
+import SVG from 'react-inlinesvg'
+import { getImage } from '../../utils/getImage'
+
+export interface IPromoCodeSectionProps {
+  code: string;
+  codeIsApplied: boolean;
+  showPromoInput: boolean;
+  setCode: (value: string) => void;
+  setShowPromoInput: (value: boolean) => void;
+  updateTickets: (value: boolean, type: string) => void;
+  setCodeIsApplied: (value: boolean) => void;
+}
+
+export const PromoCodeSection = ({
+  code,
+  codeIsApplied,
+  showPromoInput,
+  setCode,
+  setShowPromoInput,
+  updateTickets,
+  setCodeIsApplied
+}: IPromoCodeSectionProps) => {
+  const isPromoCodeHasValue = !!code.trim()
+
+  const renderInputField = () => {
+    return (
+      <div className="promo-code-block">
+        <div className="promo-code-block">
+          <p className="promo-code-text">Promo code</p>
+        </div>
+        <input
+          className="promo-code-input"
+          placeholder=""
+          onChange={e => {
+            setCode(e.target.value)
+          }}
+          onKeyPress={event => {
+            if (event.key === 'Enter' && isPromoCodeHasValue) {
+              setShowPromoInput(false)
+              updateTickets(true, 'promo')
+            }
+          }}
+        />
+        <Button
+          className="promo-submit-button"
+          onClick={() => {
+            if (isPromoCodeHasValue) {
+              setShowPromoInput(false)
+              updateTickets(true, 'promo')
+            }
+          }}
+        >
+          APPLY
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      {codeIsApplied ? (
+        <div className="alert-info">
+          <SVG
+            src={getImage('done.svg')}
+            preProcessor={code =>
+              code.replace(/fill=".*?"/g, 'fill="currentColor"')
+            }
+          />
+          <p className="promo-code-success">PROMO CODE APPLIED SUCCESSFULLY</p>
+        </div>
+      ) : null}
+      {!showPromoInput && (
+        <Button
+          className="promo-code-button"
+          placeholder="Promo Codes"
+          onClick={() => {
+            setCodeIsApplied(false)
+            setShowPromoInput(true)
+          }}
+        >
+          Got a promo code? Click here
+        </Button>
+      )}
+      {showPromoInput && renderInputField()}
+    </div>
+  )
+}

package/src/components/ticketsContainer/ReferralLogic.tsx

@@ -1,33 +1,31 @@
-import { useEffect } from 'react'
-import { postReferralVisits } from '../../api'
-
-interface IReferralLogicProps {
-  eventId: string | number;
-}
-
-export const ReferralLogic = (props: IReferralLogicProps) => {
-  const { eventId } = props
-  const isWindowDefined = typeof window !== 'undefined'
-
-  useEffect(() => {
-    if (isWindowDefined) {
-      const params: URLSearchParams = new URL(`${window.location}`).searchParams
-      const referralId = params.get('ttf_r') || ''
-      const isAlreadyCounted = !!localStorage.getItem('referral_key')
-
-      if (referralId && eventId && !isAlreadyCounted) {
-        (async () => {
-          try {
-            await postReferralVisits(`${eventId}`, referralId)
-            localStorage.setItem(
-              'referral_key',
-              [eventId, '.', referralId].join('')
-            )
-          } catch (error) {}
-        })()
-      }
-    }
-  }, [])
-
-  return null
-}
+import { useEffect } from 'react'
+import { postReferralVisits } from '../../api'
+
+interface IReferralLogicProps {
+  eventId: string | number;
+}
+
+export const ReferralLogic = (props: IReferralLogicProps) => {
+  const { eventId } = props
+  const isWindowDefined = typeof window !== 'undefined'
+
+  useEffect(() => {
+    if (isWindowDefined) {
+      const params: URLSearchParams = new URL(`${window.location}`).searchParams
+      const referralId = params.get('ttf_r') || ''
+      const referralValue = [eventId, '.', referralId].join('')
+      const isAlreadyCounted = localStorage.getItem('referral_key') === referralValue
+
+      if (referralId && eventId && !isAlreadyCounted) {
+        (async () => {
+          try {
+            await postReferralVisits(`${eventId}`, referralId)
+            localStorage.setItem('referral_key', referralValue)
+          } catch (error) {}
+        })()
+      }
+    }
+  }, [])
+
+  return null
+}

package/src/components/ticketsContainer/TicketRow.tsx

@@ -1,83 +1,89 @@
-import React from 'react'
-import './style.css'
-import _has from 'lodash/has'
-import _get from 'lodash/get'
-import Box from '@mui/material/Box'
-import FormControl from '@mui/material/FormControl'
-import MenuItem from '@mui/material/MenuItem'
-import Select from '@mui/material/Select'
-
-import { getTicketSelectOptions } from './utils'
-
-interface ITicketRowProps {
-  ticketTier: any;
-  prevTicketTier: any;
-  selectedTickets: any;
-  handleTicketSelect: any;
-}
-
-export const TicketRow = ({
-  ticketTier,
-  prevTicketTier,
-  selectedTickets,
-  handleTicketSelect,
-}: ITicketRowProps) => {
-  const soldOutMessage = ticketTier.soldOutMessage
-    ? `${ticketTier.soldOutMessage}`.toUpperCase()
-    : 'SOLD OUT'
-  const isSalesClosed = !ticketTier.salesStarted || ticketTier.salesEnded
-  const options = getTicketSelectOptions(
-    ticketTier.maxQuantity,
-    ticketTier.minQuantity,
-    ticketTier.multiplier
-  )
-  const ticketsClosedMessage = !ticketTier.salesStarted ?  'Sales not started' : 'Sales Ended'
-
-  const onSaleContent = isSalesClosed ? ticketsClosedMessage : (
-    <div className="get-tickets">
-      <Box className="get-tickets__selectbox">
-        <FormControl fullWidth>
-          <Select
-            sx={{
-              borderRadius: 0,
-            }}
-            value={
-              selectedTickets[ticketTier.id]
-                ? selectedTickets[ticketTier.id]
-                : 0
-            }
-            onChange={handleTicketSelect}
-            displayEmpty
-            inputProps={{ 'aria-label': 'Without label' }}
-            MenuProps={{
-              PaperProps: {
-                sx: { maxHeight: 150 },
-                className: 'get-tickets-paper',
-              },
-            }}
-          >
-            {options.map((option, index) => (
-              <MenuItem key={index} value={option.value}>
-                {option.value}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      </Box>
-    </div>
-  )
-
-  let returnValue: any = ''
-
-  if (ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut) {
-    returnValue = soldOutMessage
-  }
-  if (ticketTier.displayTicket) {
-    returnValue = onSaleContent
-  }
-  if (_get(prevTicketTier, 'in_stock')) {
-    returnValue = 'SOON'
-  }
-
-  return <>{returnValue} </>
-}
+import React from 'react'
+import './style.css'
+import _has from 'lodash/has'
+import _get from 'lodash/get'
+import Box from '@mui/material/Box'
+import FormControl from '@mui/material/FormControl'
+import MenuItem from '@mui/material/MenuItem'
+import Select from '@mui/material/Select'
+
+import { getTicketSelectOptions } from './utils'
+
+interface ITicketRowProps {
+  ticketTier: any;
+  prevTicketTier: any;
+  selectedTickets: any;
+  handleTicketSelect: any;
+}
+
+export const TicketRow = ({
+  ticketTier,
+  prevTicketTier,
+  selectedTickets,
+  handleTicketSelect,
+}: ITicketRowProps) => {
+  const soldOutMessage = ticketTier.soldOutMessage
+    ? `${ticketTier.soldOutMessage}`.toUpperCase()
+    : 'SOLD OUT'
+  const isSalesClosed = !ticketTier.salesStarted || ticketTier.salesEnded
+  const options = getTicketSelectOptions(
+    ticketTier.maxQuantity,
+    ticketTier.minQuantity,
+    ticketTier.multiplier
+  )
+  const ticketsClosedMessage = !ticketTier.salesStarted ?  'Sales not started' : 'Sales Ended'
+
+  const onSaleContent = (
+    <div className="get-tickets">
+      <Box className="get-tickets__selectbox">
+        <FormControl fullWidth>
+          <Select
+            sx={{
+              borderRadius: 0,
+            }}
+            value={
+              selectedTickets[ticketTier.id]
+                ? selectedTickets[ticketTier.id]
+                : 0
+            }
+            onChange={handleTicketSelect}
+            displayEmpty
+            inputProps={{ 'aria-label': 'Without label' }}
+            MenuProps={{
+              PaperProps: {
+                sx: { maxHeight: 150 },
+                className: 'get-tickets-paper',
+              },
+            }}
+          >
+            {options.map((option, index) => (
+              <MenuItem key={index} value={option.value}>
+                {option.value}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </Box>
+    </div>
+  )
+
+  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 (isSoldOut) {
+    returnValue = soldOutMessage
+  } else if (isSalesClosed) {
+    returnValue = ticketsClosedMessage
+  } else if (ticketTier.displayTicket && ticketTier.maxQuantity) {
+    returnValue = onSaleContent
+  } else if (_get(prevTicketTier, 'in_stock')) {
+    returnValue = 'SOON'
+  }
+
+  return <>{returnValue} </>
+}

package/src/components/ticketsContainer/TicketsSection.tsx

@@ -1,81 +1,87 @@
-import React from 'react'
-import './style.css'
-
-import _sortBy from 'lodash/sortBy'
-import { TicketRow } from './TicketRow'
-
-interface ITicketsSectionProps {
-  ticketsList: any;
-  selectedTickets: any;
-  handleTicketSelect: any;
-  promoCodeIsApplied: boolean;
-}
-
-export const TicketsSection = ({
-  ticketsList,
-  selectedTickets,
-  handleTicketSelect,
-  promoCodeIsApplied,
-}: ITicketsSectionProps) => {
-  const sortedTicketsList = _sortBy(ticketsList, 'sortOrder')
-  return (
-    <>
-      {sortedTicketsList.map((ticket, i, arr) => {
-        const isSoldOut =
-          ticket.sold_out || !ticket.displayTicket || ticket.soldOut
-        const ticketSelect = (event: any) => {
-          const { value } = event.target
-          handleTicketSelect(ticket.id, value)
-        }
-
-        let ticketIsDiscounted = false
-        if (
-          ticket.oldPrice &&
-          promoCodeIsApplied &&
-          !isSoldOut &&
-          ticket.oldPrice !== ticket.price
-        ) {
-          ticketIsDiscounted = true
-        }
-
-        const ticketIsFree = (+ticket.cost || +ticket.price) === 0
-        const ticketPrice = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : `$ ${(+ticket.cost || +ticket.price).toFixed(2)}`
-
-        return (
-          <div
-            key={ticket.id || ticket.name}
-            className={`event-detail__tier ${isSoldOut ? 'disabled' : ''}`}
-          >
-            <div className="event-detail__tier-name">
-              {ticket.displayName || ticket.name}
-            </div>
-            <div className="event-tickets-container">
-              <div className="event-detail__tier-price">
-                {ticketIsDiscounted && (
-                  <p className="old-price">$ {(+ticket.oldPrice).toFixed(2)}</p>
-                )}
-                <p>{ticketPrice}</p>
-                {!isSoldOut && !ticketIsFree && (
-                  <p className="fees">
-                    {ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'}
-                  </p>
-                )}
-              </div>
-              <div
-                className="event-detail__tier-state"
-                style={{ minWidth: 55 }}
-              >
-                <TicketRow
-                  ticketTier={ticket}
-                  prevTicketTier={arr[i - 1]}
-                  selectedTickets={selectedTickets}
-                  handleTicketSelect={ticketSelect}
-                />
-              </div>
-            </div>
-          </div>
-        )
-      })}
-    </>
-  )
-}
+import React, { ReactNode } from 'react'
+import './style.css'
+
+import _sortBy from 'lodash/sortBy'
+import { TicketRow } from './TicketRow'
+
+interface ITicketsSectionProps {
+  ticketsList: any;
+  selectedTickets: any;
+  handleTicketSelect: any;
+  sortBySoldOut: boolean;
+  ticketsHeaderComponent?: ReactNode,
+  hideTicketsHeader: boolean,
+}
+
+export const TicketsSection = ({
+  ticketsList,
+  selectedTickets,
+  handleTicketSelect,
+  sortBySoldOut,
+  ticketsHeaderComponent,
+  hideTicketsHeader
+}: ITicketsSectionProps) => {
+  const sortedTicketsList = sortBySoldOut
+    ? _sortBy(_sortBy(ticketsList, 'sortOrder'), 'soldOut')
+    : _sortBy(ticketsList, 'sortOrder')
+  return (
+    <>
+      {!hideTicketsHeader && ticketsHeaderComponent}
+      {sortedTicketsList.map((ticket, i, arr) => {
+        const isSoldOut =
+          ticket.sold_out || !ticket.displayTicket || ticket.soldOut
+        const ticketSelect = (event: any) => {
+          const { value } = event.target
+          handleTicketSelect(ticket.id, value)
+        }
+
+        let ticketIsDiscounted = false
+        if (
+          ticket.oldPrice &&
+          !isSoldOut &&
+          ticket.oldPrice !== ticket.price
+        ) {
+          ticketIsDiscounted = true
+        }
+
+        const ticketIsFree = +ticket.price === 0
+        const ticketPrice = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : `$ ${(+ticket.price).toFixed(2)}`
+
+        return (
+          <div
+            key={ticket.id || ticket.name}
+            className={`event-detail__tier ${isSoldOut ? 'disabled' : ''}`}
+          >
+            <div className="event-detail__tier-name">
+              {ticket.displayName || ticket.name}
+            </div>
+            <div className="event-tickets-container">
+              <div className="event-detail__tier-price">
+                {ticketIsDiscounted && (
+                  <p className="old-price">$ {(+ticket.oldPrice).toFixed(2)}</p>
+                )}
+                <p>{ticketPrice}</p>
+                {!isSoldOut && !ticketIsFree && (
+                  <p className="fees">
+                    {ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'}
+                  </p>
+                )}
+              </div>
+              <div
+                className="event-detail__tier-state"
+                style={{ minWidth: 55 }}
+              >
+                <TicketRow
+                  ticketTier={ticket}
+                  prevTicketTier={arr[i - 1]}
+                  selectedTickets={selectedTickets}
+                  handleTicketSelect={ticketSelect}
+                />
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </>
+  )
+}