tf-checkout-react 1.0.71 → 1.0.75

package/src/components/stripePayment/index.tsx

@@ -46,13 +46,14 @@ export interface ICheckoutForm {
   isLoading: any;
   handleSetLoading: (loading: any) => void;
   conditions: any;
+  disableZipSection: boolean;
 }
 
 interface AddressTypes {
   city: string;
   line1: string;
   state: string;
-  postal_code: string;
+  postal_code?: string;
 }
 
 const CheckoutForm = ({
@@ -66,6 +67,7 @@ const CheckoutForm = ({
   isLoading = false,
   handleSetLoading = () => {},
   conditions = [],
+  disableZipSection,
 }: ICheckoutForm) => {
   const stripe = useStripe()
   const elements = useElements()
@@ -79,7 +81,7 @@ const CheckoutForm = ({
     try {
       event.preventDefault()
 
-      if (!postalCode) {
+      if (!postalCode && !disableZipSection) {
         setStripeError('Please enter your zip code.')
         handleSetLoading(false)
         return
@@ -93,11 +95,15 @@ const CheckoutForm = ({
       }
 
       const card = elements.getElement(CardNumberElement)
+
       const address: AddressTypes = {
         city: billing_info.city,
         line1: billing_info.street_address,
         state: billing_info.state,
-        postal_code: postalCode,
+      }
+      
+      if (!disableZipSection) {
+        address.postal_code = postalCode
       }
 
       const paymentMethodReq = await stripe.createPaymentMethod({
@@ -185,7 +191,7 @@ const CheckoutForm = ({
           <label className="card_number_element">
             <span className="card_label_text">Card number</span>
             <CardNumberElement
-              options={{ ...options, ...stripeCardOptions }}
+              options={{ ...options.style, ...stripeCardOptions }}
               onReady={_identity}
               onChange={_identity}
               onBlur={_identity}
@@ -194,21 +200,23 @@ const CheckoutForm = ({
           </label>
           <label className="expiration_element">
             <span className="card_label_text">Expiration date</span>
-            <CardExpiryElement options={{ ...options, ...stripeCardOptions }} />
+            <CardExpiryElement options={{ ...options.style, ...stripeCardOptions }} />
           </label>
           <label className="cvc_element">
             <span className="card_label_text">CVC</span>
-            <CardCvcElement options={{ ...options, ...stripeCardOptions }} />
-          </label>
-          <label className="zip_element">
-            <p className="card_label_text">ZIP</p>
-            <input
-              type="text"
-              value={postalCode}
-              onChange={onChangePostalCode}
-              placeholder="ZIP"
-            />
+            <CardCvcElement options={{ ...options.style, ...stripeCardOptions }} />
           </label>
+          {!disableZipSection && (
+            <label className="zip_element">
+              <p className="card_label_text">ZIP</p>
+              <input
+                type="text"
+                value={postalCode}
+                onChange={onChangePostalCode}
+                placeholder="ZIP"
+              />
+            </label>
+          )}
         </div>
         {checkboxes?.map((checkbox: any) => (
           <div

package/src/components/ticketsContainer/PromoCodeSection.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import Button from 'react-bootstrap/Button'
+import SVG from 'react-inlinesvg'
+import { getImage } from '../../utils/getImage'
+
+export interface IPromoCodeSectionProps {
+  promoCode: string;
+  promoCodeIsApplied: boolean;
+  showPromoInput: boolean;
+  isPromotionsEnabled: boolean;
+  isAllTicketsSoldOut: boolean;
+
+  setPromoCode: (value: string) => void;
+  setPromoCodeUpdated: (value: string) => void;
+  setShowPromoInput: (value: boolean) => void;
+}
+
+export const PromoCodeSection = ({
+  promoCode,
+  promoCodeIsApplied,
+  showPromoInput,
+  isPromotionsEnabled,
+  isAllTicketsSoldOut,
+  setPromoCode,
+  setPromoCodeUpdated,
+  setShowPromoInput,
+}: IPromoCodeSectionProps) => {
+
+  return (
+    <div >
+      {promoCodeIsApplied ? (
+        <div className="alert-info">
+          <SVG
+            src={getImage('done.svg')}
+            preProcessor={(code) => code.replace(/fill=".*?"/g, 'fill="currentColor"')}
+          />
+          <p>PROMO CODE APPLIED SUCCESSFULLY</p>
+        </div>
+      ) : null}
+      {showPromoInput && (
+        <div className="promo-code-block">
+          <input
+            placeholder="Promo Code"
+            onChange={e => {
+              setPromoCode(e.target.value)
+            }}
+            onKeyPress={event => {
+              if (event.key === 'Enter') {
+                setPromoCodeUpdated(promoCode)
+              }
+            }}
+          />
+          <Button
+            className="promo-apply-button"
+            placeholder="Promo Code"
+            onClick={() => {
+              setPromoCodeUpdated(promoCode)
+            }}
+          >
+            Apply
+          </Button>
+        </div>
+      )}
+      {isPromotionsEnabled && !showPromoInput && isAllTicketsSoldOut && (
+        <p className="promo-code-text">
+          Access code needed
+        </p>
+      )}
+      {isPromotionsEnabled && !showPromoInput ? (
+        <Button
+          className="promo-code-button"
+          placeholder="Promo Codes"
+          onClick={() => {
+            setShowPromoInput(true)
+          }}
+        >
+          Got a promo code? Click here
+        </Button>
+      ) : null}
+    </div>
+  )
+}

package/src/components/ticketsContainer/index.tsx

@@ -12,6 +12,7 @@ import Button from 'react-bootstrap/Button'
 import jwt_decode from 'jwt-decode'
 import { TicketsSection } from './TicketsSection'
 import WaitingList from '../waitingList'
+import { PromoCodeSection } from './PromoCodeSection'
 
 function Loader() {
   return (
@@ -39,6 +40,7 @@ export interface IGetTickets {
 
   theme?: 'light' | 'dark';
   queryPromoCode?: string;
+  isPromotionsEnabled?: boolean;
 }
 
 export interface ITicket {
@@ -55,11 +57,12 @@ export const TicketsContainer = ({
   eventId,
   onAddToCartSuccess,
   contentStyle = {},
-  onAddToCartError = () => {},
-  onGetTicketsSuccess = () => {},
-  onGetTicketsError = () => {},
+  onAddToCartError = () => { },
+  onGetTicketsSuccess = () => { },
+  onGetTicketsError = () => { },
   theme = 'light',
-  queryPromoCode = ''
+  queryPromoCode = '',
+  isPromotionsEnabled = true,
 }: IGetTickets) => {
   const [selectedTickets, setSelectedTickets] = useState(
     {} as ISelectedTickets
@@ -181,82 +184,51 @@ export const TicketsContainer = ({
       {isLoading ? (
         <Loader />
       ) : (
-        <>
-          {showWaitingList ? (
-            <WaitingList tickets={tickets} eventId={eventId} />
-          ) : (
-            <div>
-              <TicketsSection
-                ticketsList={tickets}
-                selectedTickets={selectedTickets}
-                handleTicketSelect={handleTicketSelect}
-                promoCodeIsApplied={promoCodeIsApplied}
-              />
-              {promoCodeIsApplied ? (
-                <div className="alert-info">
-                  Your promo code was applied successfully.
-                </div>
-              ) : null}
-              {showPromoInput && (
-                <div className="promo-code-block">
-                  <input
-                    placeholder="Promo Code"
-                    onChange={e => {
-                      setPromoCode(e.target.value)
-                    }}
-                    onKeyPress={event => {
-                      if (event.key === 'Enter') {
-                        setPromoCodeUpdated(promoCode)
-                      }
-                    }}
-                  />
-                  <Button
-                    className="promo-apply-button"
-                    placeholder="Promo Code"
-                    onClick={() => {
-                      setPromoCodeUpdated(promoCode)
-                    }}
-                  >
-                    Apply
-                  </Button>
-                </div>
-              )}
-              {!showPromoInput && !isAllTicketsSoldOut ? (
-                <Button
-                  className="promo-code-button"
-                  placeholder="Promo Codes"
-                  onClick={() => {
-                    setShowPromoInput(true)
-                  }}
-                >
-                  Got a promo code? Click here
-                </Button>
-              ) : null}
-              <div className="test v1.0.19" style={{ display: 'none' }} />
-              {!isAllTicketsSoldOut && (
-                <Button
-                  aria-hidden={true}
-                  className={`book-button ${
-                    handleBookIsLoading ||
-                    _isEmpty(selectedTickets) ||
-                    Object.values(selectedTickets)[0] === 0
-                      ? 'disabled'
-                      : ''
-                  }`}
-                  onClick={
-                    !handleBookIsLoading &&
-                    !_isEmpty(selectedTickets) &&
-                    Object.values(selectedTickets)[0] > 0
-                      ? handleBook
-                      : () => {}
-                  }
-                >
-                  {getTicketsLabel || 'GET TICKETS'}
-                </Button>
-              )}
-            </div>
+        <div>
+          <TicketsSection
+            ticketsList={tickets}
+            selectedTickets={selectedTickets}
+            handleTicketSelect={handleTicketSelect}
+            promoCodeIsApplied={promoCodeIsApplied}
+          />
+          {showWaitingList && (
+            <WaitingList
+              tickets={tickets}
+              eventId={eventId}
+              isPromotionsEnabled={isPromotionsEnabled}
+            />
           )}
-        </>
+          <PromoCodeSection
+            promoCode={promoCode}
+            promoCodeIsApplied={promoCodeIsApplied}
+            showPromoInput={showPromoInput}
+            setPromoCode={setPromoCode}
+            setPromoCodeUpdated={setPromoCodeUpdated}
+            setShowPromoInput={setShowPromoInput}
+            isPromotionsEnabled={isPromotionsEnabled}
+            isAllTicketsSoldOut={isAllTicketsSoldOut}
+          />
+          {!isAllTicketsSoldOut && (
+            <Button
+              aria-hidden={true}
+              className={`book-button ${handleBookIsLoading ||
+                _isEmpty(selectedTickets) ||
+                Object.values(selectedTickets)[0] === 0
+                ? 'disabled'
+                : ''
+                }`}
+              onClick={
+                !handleBookIsLoading &&
+                  !_isEmpty(selectedTickets) &&
+                  Object.values(selectedTickets)[0] > 0
+                  ? handleBook
+                  : () => { }
+              }
+            >
+              {getTicketsLabel || 'GET TICKETS'}
+            </Button>
+          )}
+        </div>
       )}
     </div>
   )

package/src/components/ticketsContainer/style.css

@@ -57,7 +57,6 @@ body {
 }
 .event-detail__tier-price {
   font-family: Inter-Bold;
-  font-weight: 700;
   font-size: 1.5rem;
   line-height: 1;
   color: #000;
@@ -70,7 +69,6 @@ body {
 
 .event-detail__tier-price .fees {
   font-size: 14px;
-  font-weight: normal;
   text-align: left;
   margin-top: 4px;
 }
@@ -84,16 +82,20 @@ body {
 
 .alert-info {
   border: 1px solid #fbeed5;
-  text-align: center;
   padding: 8px 15px;
   background-color: #d9edf7;
   border-color: #bce8f1;
   color: #3a87ad;
   font-size: 1em;
-  margin-bottom: 20px;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   border-radius: 4px;
   margin: 0px 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.alert-info svg {
+  margin-right: 4px;
 }
 
 .event-detail__tier-state {

package/src/components/waitingList/index.tsx

@@ -16,6 +16,7 @@ import './style.css'
 interface WaitingListProps {
   tickets: any;
   eventId: number;
+  isPromotionsEnabled: boolean;
 }
 
 interface WaitingListFields {
@@ -34,7 +35,7 @@ const generateQuantity = (n: number) => {
   return quantityList
 }
 
-const WaitingList = ({ tickets = {}, eventId }: WaitingListProps) => {
+const WaitingList = ({ tickets = {}, eventId, isPromotionsEnabled }: WaitingListProps) => {
   const [showSuccessMessage, setShowSuccessMessage] = useState(false)
   const [loading, setLoading] = useState(false)
   const ticketTypesList = Object.values(tickets).map((d: any) => ({
@@ -72,9 +73,11 @@ const WaitingList = ({ tickets = {}, eventId }: WaitingListProps) => {
         </div>
       ) : (
         <>
-          <p className="no-tickets-text">
-            No tickets are currently available for this event.
-          </p>
+          {!isPromotionsEnabled && (
+            <p className="no-tickets-text">
+              No tickets are currently available for this event.
+            </p>
+          )}
           <h2>WAITING LIST</h2>
           <Formik
             initialValues={{

package/src/env.ts

@@ -1,7 +1,7 @@
 // preview
-export const ENV_TEST = {
+export const ENV = {
   EVENT_ID: 162,
-  BASE_URL: 'https://preview.ttf.fluxtech.me/api',
+  BASE_URL: 'https://preview.ttf.fluxtech.me',
   CLIENT_ID: '4792a61f2fcb49197ab4c2d2f44df570',
   CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
   STRIPE_PUBLISHABLE_KEY:
@@ -9,9 +9,9 @@ export const ENV_TEST = {
 }
 
 // prod
-export const ENV = {
+export const ENV_PROD = {
   EVENT_ID: 9766,
-  BASE_URL: 'https://www.ticketfairy.com/api',
+  BASE_URL: 'https://www.ticketfairy.com',
   CLIENT_ID: 'e9d8f8922797b4621e562255afe90dbf',
   CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
   STRIPE_PUBLISHABLE_KEY:

package/src/utils/setConfigs.ts

@@ -1,13 +1,14 @@
 import _forEach from 'lodash/forEach'
-import { publicRequest } from '../api'
+import { publicRequest, setXSourceOrigin } from '../api'
 
 interface IConfigs {
   BASE_URL: string;
   CLIENT_ID: string;
   CLIENT_SECRET: string;
   STRIPE_PUBLISHABLE_KEY: string;
+  X_SOURCE_ORIGIN: string;
 
-  [key: string]: string;
+  [key: string]: string | number;
 }
 
 export const CONFIGS: IConfigs = {} as IConfigs
@@ -18,4 +19,8 @@ export const setConfigs = (configs: IConfigs) => {
   })
 
   publicRequest.setBaseUrl(CONFIGS.BASE_URL)
+
+  if (CONFIGS.X_SOURCE_ORIGIN) {
+    setXSourceOrigin(CONFIGS.X_SOURCE_ORIGIN)
+  }
 }