tf-checkout-react 1.0.68 → 1.0.69

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { setConfigs, CONFIGS } from './setConfigs';
+export { getQueryVariable } from './getQueryVariable';
+export { ErrorFocus } from './formikErrorFocus';

package/dist/utils/setConfigs.d.ts

@@ -0,0 +1,10 @@
+interface IConfigs {
+    BASE_URL: string;
+    CLIENT_ID: string;
+    CLIENT_SECRET: string;
+    STRIPE_PUBLISHABLE_KEY: string;
+    [key: string]: string;
+}
+export declare const CONFIGS: IConfigs;
+export declare const setConfigs: (configs: IConfigs) => void;
+export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.68",
+  "version": "1.0.69",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/api/index.ts

@@ -1,11 +1,15 @@
 import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
 import _get from 'lodash/get'
 
-import { ENV } from '../env'
+import { CONFIGS } from '../utils'
 
 const isWindowDefined = typeof window !== 'undefined'
 const allowedOrigins = [
-  'http://localhost', 'gtsb.io', 'gatsbyjs.io', 'https://www.houseofx.nyc', 'https://tickets-staging.houseofx.nyc'
+  'http://localhost',
+  'gtsb.io',
+  'gatsbyjs.io',
+  'https://www.houseofx.nyc',
+  'https://tickets-staging.houseofx.nyc',
 ]
 const origin = isWindowDefined && window.location.origin
 
@@ -27,23 +31,27 @@ if (
 interface IPublicRequest extends AxiosInstance {
   setGuestToken: (token: string) => void;
   setAccessToken: (token: string) => void;
+  setBaseUrl: (baseUrl: string) => void;
 }
 
 export const publicRequest: IPublicRequest = axios.create({
-  baseURL: ENV.BASE_URL || `https://www.ticketfairy.com/api`,
+  baseURL: CONFIGS.BASE_URL || `https://www.ticketfairy.com/api`,
   headers: ttfHeaders,
 }) as IPublicRequest
 
-publicRequest.interceptors.response.use(response => response, error => {
-  if (error?.response?.status === 401) {
-    if(isWindowDefined){
-      window.localStorage.removeItem('auth_guest_token')
-      window.localStorage.removeItem('user_data')
-      window.localStorage.removeItem('access_token')
+publicRequest.interceptors.response.use(
+  response => response,
+  error => {
+    if (error?.response?.status === 401) {
+      if (isWindowDefined) {
+        window.localStorage.removeItem('auth_guest_token')
+        window.localStorage.removeItem('user_data')
+        window.localStorage.removeItem('access_token')
+      }
     }
+    return Promise.reject(error)
   }
-  return Promise.reject(error)
-})
+)
 
 publicRequest.interceptors.request.use((config: AxiosRequestConfig) => {
   const guestToken = isWindowDefined
@@ -75,7 +83,8 @@ publicRequest.interceptors.request.use((config: AxiosRequestConfig) => {
 
   if (
     isWindowDefined &&
-    !allowedOrigins.some(el => origin && origin.includes(el))) {
+    !allowedOrigins.some(el => origin && origin.includes(el))
+  ) {
     const updatedHeaders = {
       ...config.headers,
       'X-Source-Origin': 'houseofx.nyc',
@@ -83,12 +92,19 @@ publicRequest.interceptors.request.use((config: AxiosRequestConfig) => {
     config.headers = updatedHeaders
   }
 
+  if (CONFIGS.BASE_URL) {
+    config.baseURL = CONFIGS.BASE_URL + '/api'
+  }
+
   return config
 })
 
 publicRequest.setGuestToken = token =>
   (publicRequest.defaults.headers.common['Authorization-Guest'] = token)
 
+publicRequest.setBaseUrl = (baseUrl: string) =>
+  (publicRequest.defaults.baseURL = baseUrl + '/api')
+
 publicRequest.setAccessToken = token =>
   (publicRequest.defaults.headers.common.Authorization = token)
 
@@ -163,7 +179,7 @@ export const postOnCheckout = (data: any, accessToken: string) => {
 
 export const authorize = (data: FormData) =>
   publicRequest.post(
-    `/v1/oauth/authorize-rn?client_id=${ENV.CLIENT_ID ||
+    `/v1/oauth/authorize-rn?client_id=${CONFIGS.CLIENT_ID ||
       'e9d8f8922797b4621e562255afe90dbf'}`,
     data
   )
@@ -204,30 +220,39 @@ export const handlePaymentSuccess = (orderHash: string) => {
 }
 
 export const getProfileData = (accessToken: any) =>
-  publicRequest.get('/customer/profile/', {
-    headers: {
-      ...ttfHeaders,
-      Authorization: `Bearer ${accessToken}`,
-    },
-  }).catch((e:any)=>{
-    if(isWindowDefined){
-      const event = new window.CustomEvent('auth_error', e)
-      window.document.dispatchEvent(event)
-    }
-    return e
-  })
+  publicRequest
+    .get('/customer/profile/', {
+      headers: {
+        ...ttfHeaders,
+        Authorization: `Bearer ${accessToken}`,
+      },
+    })
+    .catch((e: any) => {
+      if (isWindowDefined) {
+        const event = new window.CustomEvent('auth_error', e)
+        window.document.dispatchEvent(event)
+      }
+      return e
+    })
 
 export const getCountries = () => publicRequest.get('/countries/')
 
-export const getConfirmationData = (orderHash: string) => publicRequest.get(`/v1/order/${orderHash}/payment/complete`)
+export const getConfirmationData = (orderHash: string) =>
+  publicRequest.get(`/v1/order/${orderHash}/payment/complete`)
 
-export const getStates = (countryId: string) => publicRequest.get(`/countries/${countryId}/states/`) 
+export const getStates = (countryId: string) =>
+  publicRequest.get(`/countries/${countryId}/states/`)
 
 export const getOrders = (page: number, limit: number, eventSlug: string) =>
-  publicRequest.get(`/v1/account/orders/?page=${page}&limit=${limit}&filter[event]=${eventSlug}`)
+  publicRequest.get(
+    `/v1/account/orders/?page=${page}&limit=${limit}&filter[event]=${eventSlug}`
+  )
 
-export const getOrderDetails = (orderId: string) => publicRequest.get(`/v1/account/order/${orderId}`) 
+export const getOrderDetails = (orderId: string) =>
+  publicRequest.get(`/v1/account/order/${orderId}`)
 
-export const addToWaitingList = (id: number, data: any) => publicRequest.post(`/v1/event/${id}/add_to_waiting_list`, data)
+export const addToWaitingList = (id: number, data: any) =>
+  publicRequest.post(`/v1/event/${id}/add_to_waiting_list`, data)
 
-export const getConditions = (eventId: string) => publicRequest.get(`v1/event/${eventId}/conditions`)
+export const getConditions = (eventId: string) =>
+  publicRequest.get(`v1/event/${eventId}/conditions`)

package/src/components/billing-info-container/index.tsx

@@ -563,13 +563,6 @@ export const BillingInfoContainer = ({
                                 ].includes(element.name) &&
                                 isLoggedIn ? null : (
                                   <React.Fragment key={element.uniqueId}>
-                                    {element.name === 'email' ? (
-                                      <div className="email-checking">
-                                        {`IMPORTANT: Please double check that your
-                                        email address is correct. It's where we
-                                        send your confirmation and e-tickets to!`}
-                                      </div>
-                                    ) : null}
                                     <div className={element.className}>
                                       {element.component ? (
                                         element.component

package/src/components/billing-info-container/utils.ts

@@ -4,7 +4,7 @@ import _forEach from 'lodash/forEach'
 import _flatMapDeep from 'lodash/flatMapDeep'
 import _isArray from 'lodash/isArray'
 
-import { ENV } from '../../env'
+import { CONFIGS } from '../../utils'
 import { IGroupItem } from '../../types'
 import { combineValidators, requiredValidator } from '../../validators'
 import { nanoid } from 'nanoid'
@@ -56,11 +56,11 @@ export const createRegisterFormData = (
   bodyFormData.append('password_confirmation', values.confirmPassword)
   bodyFormData.append(
     'client_id',
-    ENV.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
+    CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
   )
   bodyFormData.append(
     'client_secret',
-    ENV.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
+    CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
   )
 
   _forEach(checkoutBody.attributes, (item: any, key: string) => {

package/src/components/confirmationContainer/config.ts

@@ -0,0 +1,72 @@
+import {
+  FacebookShareButton,
+  FacebookMessengerShareButton,
+  TwitterShareButton,
+  LinkedinShareButton,
+  PinterestShareButton,
+  VKShareButton,
+  OKShareButton,
+  TelegramShareButton,
+  WhatsappShareButton,
+  RedditShareButton,
+  TumblrShareButton,
+  MailruShareButton,
+  EmailShareButton,
+  LivejournalShareButton,
+  ViberShareButton,
+  WorkplaceShareButton,
+  LineShareButton,
+  PocketShareButton,
+  InstapaperShareButton,
+  WeiboShareButton,
+  HatenaShareButton,
+  FacebookIcon,
+  FacebookMessengerIcon,
+  TwitterIcon,
+  LinkedinIcon,
+  PinterestIcon,
+  VKIcon,
+  OKIcon,
+  TelegramIcon,
+  WhatsappIcon,
+  RedditIcon,
+  TumblrIcon,
+  MailruIcon,
+  EmailIcon,
+  LivejournalIcon,
+  ViberIcon,
+  WorkplaceIcon,
+  LineIcon,
+  PocketIcon,
+  InstapaperIcon,
+  WeiboIcon,
+  HatenaIcon,
+} from 'react-share'
+
+const config: any = {
+  facebook:    { component: FacebookShareButton,          icon: FacebookIcon },
+  messenger:   { component: FacebookMessengerShareButton, icon: FacebookMessengerIcon },
+  twitter:     { component: TwitterShareButton,           icon: TwitterIcon },
+  linkedin:    { component: LinkedinShareButton,          icon: LinkedinIcon },
+  pinterest:   { component: PinterestShareButton,         icon: PinterestIcon },
+  vk:          { component: VKShareButton,                icon: VKIcon },
+  ok:          { component: OKShareButton,                icon: OKIcon },
+  telegram:    { component: TelegramShareButton,          icon: TelegramIcon },
+  whatsapp:    { component: WhatsappShareButton,          icon: WhatsappIcon },
+  reddit:      { component: RedditShareButton,            icon: RedditIcon },
+  tumblr:      { component: TumblrShareButton,            icon: TumblrIcon },
+  mailru:      { component: MailruShareButton,            icon: MailruIcon },
+  email:       { component: EmailShareButton,             icon: EmailIcon },
+  livejournal: { component: LivejournalShareButton,       icon: LivejournalIcon },
+  viber:       { component: ViberShareButton,             icon: ViberIcon },
+  workplace:   { component: WorkplaceShareButton,         icon: WorkplaceIcon },
+  line:        { component: LineShareButton,              icon: LineIcon },
+  pocket:      { component: PocketShareButton,            icon: PocketIcon },
+  instapaper:  { component: InstapaperShareButton,        icon: InstapaperIcon },
+  weibo:       { component: WeiboShareButton,             icon: WeiboIcon },
+  hatena:      { component: HatenaShareButton,            icon: HatenaIcon },
+}
+
+export default function (key: string) {
+  return config[key]
+}

package/src/components/confirmationContainer/index.tsx

@@ -11,8 +11,8 @@ import SocialButtons from './social-buttons'
 export interface IShareButton {
   mainLabel: string;
   subLabel: string;
-  icon: string;
-  link: string;
+  platform: string;
+  shareData: any;
 }
 
 export interface IConfirmationPage {

package/src/components/confirmationContainer/social-buttons.tsx

@@ -1,17 +1,29 @@
 import React from 'react';
-import SVG from 'react-inlinesvg'
-import { getImage } from '../../utils/getImage'
 import { IShareButton } from'./index'
-import {
-  FacebookShareButton,
-  TwitterShareButton,
-  FacebookMessengerShareButton,
-  FacebookIcon,
-  TwitterIcon,
-  FacebookMessengerIcon,
-  WhatsappShareButton,
-  WhatsappIcon
-} from "react-share";
+import config from './config'
+
+const SocialComponent = ({ mainLabel, subLabel, platform, shareData }: IShareButton) => {
+  const Component = config(platform)?.component
+  const Icon = config(platform)?.icon
+  
+  return (
+    <>
+      {Component && (
+        <Component {...shareData}>
+          <div className='social-media-sharing'>
+            <div className='share-icon'>
+              <Icon size={32} round />
+            </div>
+            <span className="share-text">
+              {mainLabel}
+              <br /> {subLabel}
+            </span>
+          </div>
+        </Component>
+      )}
+    </>
+  )
+}
 
 interface SocialButtonsTypes {
   shareLink: string;
@@ -30,83 +42,46 @@ const SocialButtons = ({ showDefaultShareButtons, shareLink, name, appId, shareB
       <div className="social-media-btns">
         {showDefaultShareButtons && (
           <>
-            <FacebookShareButton
-              url={shareLink}
-              quote={name}
-            >
-              <div className='social-media-sharing'>
-                <div className='share-icon'>
-                  <FacebookIcon size={32} round />
-                </div>
-                <span className="share-text">
-                  Share on
-                  <br /> Facebook
-                </span>
-              </div>
-            </FacebookShareButton>
-            <TwitterShareButton
-              url={shareLink}
-              title={name}
-            >
-              <div className='social-media-sharing'>
-                <div className='share-icon'>
-                  <TwitterIcon size={32} round />
-                </div>
-                <span className="share-text">
-                  Tweet to your
-                  <br /> Followers
-                </span>
-              </div>
-            </TwitterShareButton>
-            <FacebookMessengerShareButton
-              url={shareLink}
-              appId={appId}
-            >
-              <div className='social-media-sharing'>
-                <div className='share-icon'>
-                  <FacebookMessengerIcon size={32} round />
-                </div>
-                <span className="share-text">
-                  Message friends on
-                  <br /> Facebook
-                </span>
-              </div>
-            </FacebookMessengerShareButton>
-            <WhatsappShareButton
-              url={shareLink}
-              title={name}
-            >
-              <div className='social-media-sharing'>
-                <div className='share-icon'>
-                  <WhatsappIcon size={32} round />
-                </div>
-                <span className="share-text">
-                  Message friends on
-                  <br /> Whatsapp
-                </span>
-              </div>
-            </WhatsappShareButton>
+            <SocialComponent
+              mainLabel='Share on'
+              subLabel='Facebook'
+              platform='facebook'
+              shareData={{
+                quote: name,
+                url: shareLink
+              }}
+            />
+            <SocialComponent
+              mainLabel='Tweet to your'
+              subLabel='Followers'
+              platform='twitter'
+              shareData={{
+                title: name,
+                url: shareLink
+              }}
+            />
+            <SocialComponent
+              mainLabel='Message friends on'
+              subLabel='Facebook'
+              platform='messenger'
+              shareData={{
+                appId: appId,
+                url: shareLink
+              }}
+            />
+            <SocialComponent
+              mainLabel='Message friends on'
+              subLabel='Whatsapp'
+              platform='whatsapp'
+              shareData={{
+                title: name,
+                url: shareLink
+              }}
+            />
           </>
         )}
-        {shareButtons.map((shareButton, index) => (
-          <div className='sharing-btn' key={index}>
-            <a href={shareButton.link} target="_blank" rel="noopener noreferrer">
-              <div className='social-media-sharing'>
-                <div className='share-icon'>
-                  <SVG
-                    width='32px'
-                    height='32px'
-                    fill='#FFF'
-                    src={getImage(shareButton.icon)}
-                  />
-                </div>
-                <span className="share-text">
-                  {shareButton.mainLabel}
-                  <br /> {shareButton.subLabel}
-                </span>
-              </div>
-            </a>
-          </div>
+        {shareButtons.map((shareButton: IShareButton, index: number) => (
+          <SocialComponent key={index} {...shareButton} />
         ))}
       </div>
     </>

package/src/components/loginModal/index.tsx

@@ -13,7 +13,7 @@ import { TextField } from '@mui/material'
 import Modal from '@mui/material/Modal'
 import Box from '@mui/material/Box'
 import './style.css'
-import { ENV } from '../../env'
+import { CONFIGS } from '../../utils'
 import axios from 'axios'
 
 interface Props {
@@ -76,11 +76,11 @@ export const LoginModal: FC<Props> = ({
                 bodyFormDataToken.append('grant_type', 'authorization_code')
                 bodyFormDataToken.append(
                   'client_id',
-                  ENV.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
+                  CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
                 )
                 bodyFormDataToken.append(
                   'client_secret',
-                  ENV.CLIENT_SECRET ||
+                  CONFIGS.CLIENT_SECRET ||
                     'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
                 )
 

package/src/components/paymentContainer/index.tsx

@@ -7,7 +7,7 @@ import { loadStripe } from '@stripe/stripe-js'
 import _map from 'lodash/map'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
-import { ENV } from '../../env'
+import { CONFIGS } from '../../utils'
 import { nanoid } from 'nanoid'
 import { getQueryVariable } from '../../utils/getQueryVariable'
 
@@ -19,10 +19,9 @@ import { getPaymentData, handlePaymentSuccess, getConditions } from '../../api'
 import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
 
-const testId = ENV.STRIPE_PUBLISHABLE_KEY || 'pk_test_3Ov1P1oP33A1cxaSjxWE0VjT'
+const publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || 'pk_test_3Ov1P1oP33A1cxaSjxWE0VjT'
 const stripePromise = loadStripe(
-  testId
-  // 'pk_live_51JucaXAnOd2Grid07FqHOkqcoh90bbCYL5bG7OuyM5RtzUoolrFcHroCWici0G9w0YpqO7qsGz6WP7K6HHYw1yhz00cm7fj5n5'
+  publishableKey
 )
 export interface IPaymentPage {
   paymentFields: IPaymentField[];

package/src/components/registerModal/index.tsx

@@ -6,7 +6,7 @@ import { Field, Form, Formik } from 'formik'
 import { requiredValidator } from '../../validators'
 import { TextField } from '@mui/material'
 import _get from 'lodash/get'
-import { ENV } from '../../env'
+import { CONFIGS } from '../../utils'
 
 interface Props {
   onClose: () => void;
@@ -57,11 +57,11 @@ export const RegisterModal: FC<Props> = ({
         bodyFormData.append('password_confirmation', confirmPassword)
         bodyFormData.append(
           'client_id',
-          ENV.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
+          CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
         )
         bodyFormData.append(
           'client_secret',
-          ENV.CLIENT_SECRET ||
+          CONFIGS.CLIENT_SECRET ||
             'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
         )
         const resRegister = await register(bodyFormData)

package/src/components/stripePayment/index.tsx

@@ -168,10 +168,12 @@ const CheckoutForm = ({
         (item: any) => item?.checked === true
       )
       setAllowSubmit(allChecked)
+    } else {
+      setAllowSubmit(true)
     }
   }, [checkboxes])
 
-  const buttonIsDiabled = !stripe || !!error || isLoading
+  const buttonIsDiabled = !stripe || !!error || isLoading || !allowSubmit
 
   return (
     <div className="stripe_payment_container">
@@ -225,9 +227,7 @@ const CheckoutForm = ({
           </div>
         ))}
         <div
-          className={`payment_button ${
-            buttonIsDiabled || !allowSubmit ? 'disabled-payment-button' : ''
-          }`}
+          className={`payment_button ${buttonIsDiabled ? 'disabled-payment-button' : ''}`}
         >
           <button disabled={buttonIsDiabled} type="submit">
             {isLoading ? (

package/src/components/ticketsContainer/index.tsx

@@ -7,8 +7,6 @@ import _get from 'lodash/get'
 import _some from 'lodash/some'
 import _find from 'lodash/find'
 import _isEmpty from 'lodash/isEmpty'
-import _filter from 'lodash/filter'
-import _isObject from 'lodash/isObject'
 import CircularProgress from '@mui/material/CircularProgress'
 import Button from 'react-bootstrap/Button'
 import jwt_decode from 'jwt-decode'
@@ -185,7 +183,7 @@ export const TicketsContainer = ({
       ) : (
         <>
           {showWaitingList ? (
-            <WaitingList tickets={tickets} />
+            <WaitingList tickets={tickets} eventId={eventId} />
           ) : (
             <div>
               <TicketsSection

package/src/components/waitingList/index.tsx

@@ -9,13 +9,13 @@ import {
   requiredValidator,
   emailValidator,
 } from '../../validators'
-import { ENV } from '../../env'
 import { ErrorFocus } from '../../utils/formikErrorFocus'
 
 import './style.css'
 
 interface WaitingListProps {
   tickets: any;
+  eventId: number;
 }
 
 interface WaitingListFields {
@@ -34,7 +34,7 @@ const generateQuantity = (n: number) => {
   return quantityList
 }
 
-const WaitingList = ({ tickets = {} }: WaitingListProps) => {
+const WaitingList = ({ tickets = {}, eventId }: WaitingListProps) => {
   const [showSuccessMessage, setShowSuccessMessage] = useState(false)
   const [loading, setLoading] = useState(false)
   const ticketTypesList = Object.values(tickets).map((d: any) => ({
@@ -47,13 +47,12 @@ const WaitingList = ({ tickets = {} }: WaitingListProps) => {
   const handleSubmit = async (values: WaitingListFields) => {
     try {
       setLoading(true)
-      const id = ENV.EVENT_ID
       const requestData = {
         data: {
           attributes: values,
         },
       }
-      const { data } = await addToWaitingList(id, requestData)
+      const { data } = await addToWaitingList(eventId, requestData)
 
       if (data.success) {
         setShowSuccessMessage(true)
@@ -73,7 +72,9 @@ const WaitingList = ({ tickets = {} }: WaitingListProps) => {
         </div>
       ) : (
         <>
-          <p className="no-tickets-text">No tickets are currently available for this event.</p>
+          <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,6 +1,6 @@
 // preview
-export const ENV = {
-  EVENT_ID: 3483,
+export const ENV_TEST = {
+  EVENT_ID: 162,
   BASE_URL: 'https://preview.ttf.fluxtech.me/api',
   CLIENT_ID: '4792a61f2fcb49197ab4c2d2f44df570',
   CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
@@ -9,7 +9,7 @@ export const ENV = {
 }
 
 // prod
-export const ENV_PROD = {
+export const ENV = {
   EVENT_ID: 9766,
   BASE_URL: 'https://www.ticketfairy.com/api',
   CLIENT_ID: 'e9d8f8922797b4621e562255afe90dbf',

package/src/index.ts

@@ -9,3 +9,4 @@ export {
 export { LoginModal } from './components/loginModal'
 export { MyTicketsContainer } from './components/myTicketsContainer'
 export { OrderDetailsContainer } from './components/orderDetailsContainer'
+export { setConfigs } from './utils/setConfigs'

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export { setConfigs, CONFIGS } from './setConfigs'
+export { getQueryVariable } from './getQueryVariable'
+export { ErrorFocus } from './formikErrorFocus'