tf-checkout-react 1.6.6 → 1.7.1

package/src/components/stripePayment/index.tsx

@@ -1,281 +0,0 @@
-import './style.css'
-
-import CircularProgress from '@mui/material/CircularProgress'
-import {
-  CardCvcElement,
-  CardExpiryElement,
-  CardNumberElement,
-  useElements,
-  useStripe,
-} from '@stripe/react-stripe-js'
-import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import React, { useEffect, useState } from 'react'
-
-import { refreshSeatReservation } from '../../api'
-import { getCurrencySymbolByCurrency } from '../../normalizers'
-import { getQueryVariable } from '../../utils'
-import { adaptStripeError } from '../../utils/adaptStripeErrors'
-import { Checkbox } from '../common/index'
-import ConfirmModal from '../confirmModal'
-
-const options: StripeCardNumberElementOptions = {
-  style: {
-    base: {
-      backgroundColor: '#000',
-      fontSize: '18px',
-      color: '#ffffff',
-      letterSpacing: '1px',
-      ':-webkit-autofill': {
-        color: '#ffffff',
-      },
-      '::placeholder': {
-        color: 'rgba(201, 201, 201, 0.5)',
-      },
-    },
-    invalid: {
-      color: '#E53935',
-    },
-  },
-}
-
-export interface ICheckoutForm {
-  total: string | number;
-  currency: string;
-  onSubmit: (error: any, data?: object) => Promise<any>;
-  error?: string | null;
-  stripeCardOptions?: StripeCardNumberElementOptions;
-  stripe_client_secret: string;
-  billing_info: { [key: string]: any };
-  isLoading: any;
-  handleSetLoading: (loading: any) => void;
-  conditions: any;
-  disableZipSection: boolean;
-  paymentButtonText?: string;
-  forPaymentPlan?: boolean;
-  orderId?: string;
-  hasSeatMapActions: boolean;
-}
-
-interface AddressTypes {
-  city: string;
-  line1: string;
-  state: string;
-  postal_code?: string;
-}
-
-const CheckoutForm = ({
-  total,
-  orderId,
-  onSubmit = _identity,
-  stripeCardOptions = {},
-  error = null,
-  stripe_client_secret,
-  currency,
-  billing_info,
-  isLoading = false,
-  handleSetLoading = _identity,
-  conditions = [],
-  disableZipSection,
-  paymentButtonText,
-  forPaymentPlan = false,
-  hasSeatMapActions = false,
-}: ICheckoutForm) => {
-  const stripe = useStripe()
-  const elements = useElements()
-  const [postalCode, setPostalCode] = useState<any>('')
-  const [stripeError, setStripeError] = useState<any>(null)
-  const [checkboxes, setCheckboxes] = useState<any>([])
-  const [allowSubmit, setAllowSubmit] = useState(false)
-  const eventId = getQueryVariable('event_id') || ''
-
-  const handleSubmit = async (event: React.SyntheticEvent) => {
-    setStripeError(null)
-    try {
-      event.preventDefault()
-
-      if (!postalCode && !disableZipSection) {
-        setStripeError({ message: 'Please enter your zip code.' })
-        handleSetLoading(false)
-        return
-      }
-
-      if (!stripe || !elements) {
-        // Stripe.js has not loaded yet. Make sure to disable
-        // form submission until Stripe.js has loaded.
-        handleSetLoading(false)
-        return
-      }
-
-      const card = elements.getElement(CardNumberElement)
-
-      const address: AddressTypes = {
-        city: billing_info.city,
-        line1: billing_info.street_address,
-        state: billing_info.state,
-      }
-
-      if (!disableZipSection) {
-        address.postal_code = postalCode
-      }
-
-      if (forPaymentPlan) {
-        const setupResponse = await stripe.confirmCardSetup(stripe_client_secret, {
-          payment_method: { card: card || { token: '' } },
-        })
-        onSubmit(null, { paymentMethodId: setupResponse.setupIntent?.payment_method })
-        return
-      }
-
-      const paymentMethodReq = await stripe.createPaymentMethod({
-        type: 'card',
-        card: card || { token: '' },
-        billing_details: {
-          address,
-        },
-      })
-
-      if (paymentMethodReq.error) {
-        setStripeError(paymentMethodReq.error || null)
-        handleSetLoading(false)
-        return
-      }
-
-      handleSetLoading(true)
-      const { error } = await stripe.confirmCardPayment(stripe_client_secret, {
-        payment_method: paymentMethodReq.paymentMethod.id,
-      })
-
-      if (error) {
-        setStripeError(adaptStripeError(error))
-        hasSeatMapActions && (await refreshSeatReservation(eventId, orderId || ''))
-        handleSetLoading(false)
-        return
-      }
-
-      onSubmit(null)
-    } catch (e) {
-      onSubmit(e)
-    }
-  }
-
-  const handleCheckboxes = (e: any) => {
-    const checkbox = e.target
-    const updatedCheckedState = checkboxes.map((item: any) => {
-      const value = item.id === checkbox.name ? !item.checked : item.checked
-      return {
-        ...item,
-        checked: value,
-      }
-    })
-    setCheckboxes(updatedCheckedState)
-  }
-
-  const onChangePostalCode = (e: any) => {
-    setPostalCode(e.target.value)
-  }
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const userData = JSON.parse(window.localStorage.getItem('user_data') || '')
-      const zipCode = _get(userData, 'zip', '')
-      zipCode && setPostalCode(zipCode)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (conditions.length) {
-      setCheckboxes(conditions)
-    }
-  }, [conditions])
-
-  useEffect(() => {
-    if (checkboxes.length) {
-      const allChecked = checkboxes.every((item: any) => item?.checked === true)
-      setAllowSubmit(allChecked)
-    } else {
-      setAllowSubmit(true)
-    }
-  }, [checkboxes])
-
-  const buttonIsDiabled = !stripe || !!error || isLoading || !allowSubmit
-  return (
-    <div className="stripe_payment_container">
-      {!!stripeError && (
-        <ConfirmModal
-          hideCancelBtn
-          onConfirm={() => {
-            setStripeError(null)
-            onSubmit(stripeError)
-          }}
-          message={stripeError?.message}
-        />
-      )}
-      <form onSubmit={handleSubmit}>
-        <div className="card_form_inner">
-          <div className="card_number_element">
-            <span className="card_label_text">Card number</span>
-            <CardNumberElement
-              options={{ ...options, ...stripeCardOptions }}
-              onReady={_identity}
-              onChange={_identity}
-              onBlur={_identity}
-              onFocus={_identity}
-            />
-          </div>
-          <div className="elements">
-            <div className="expiration_element">
-              <span className="card_label_text">Expiration date</span>
-              <CardExpiryElement options={{ ...options, ...stripeCardOptions }} />
-            </div>
-            <div className="cvc_element">
-              <span className="card_label_text">CVC</span>
-              <CardCvcElement options={{ ...options, ...stripeCardOptions }} />
-            </div>
-          </div>
-          {!disableZipSection && (
-            <div className="zip_element">
-              <p className="card_label_text">ZIP</p>
-              <input
-                type="text"
-                value={postalCode}
-                onChange={onChangePostalCode}
-                placeholder="ZIP"
-              />
-            </div>
-          )}
-        </div>
-        {checkboxes?.map((checkbox: any) => (
-          <div className={'billing-info-container__singleField'} key={checkbox.id}>
-            <div className="conditions-block">
-              <Checkbox
-                name={checkbox.id}
-                label={checkbox.text}
-                required={true}
-                onChange={handleCheckboxes}
-                checked={checkbox.checked}
-              />
-            </div>
-          </div>
-        ))}
-        <div
-          className={`payment_button ${buttonIsDiabled ? 'disabled-payment-button' : ''}`}
-        >
-          <button disabled={buttonIsDiabled} type="submit">
-            {isLoading ? (
-              <CircularProgress size={26} />
-            ) : forPaymentPlan ? (
-              'Confirm Payment Plan'
-            ) : (
-              `${paymentButtonText ? paymentButtonText : 'Pay'
-              } ${getCurrencySymbolByCurrency(currency)}${total}`
-            )}
-          </button>
-        </div>
-      </form>
-    </div>
-  )
-}
-
-export default CheckoutForm

package/src/components/stripePayment/style.css

@@ -1,60 +0,0 @@
-.card_form_inner {
-  background: #232323;
-  border-radius: 8px;
-  padding: 15px;
-  width: 50%;
-  margin: 0 auto;
-  min-width: 325px;
-  margin-bottom: 20px;
-}
-.card_form_inner .card_label_text {
-  color: #fff;
-}
-.card_form_inner .StripeElement {
-  margin: 5px 0 10px;
-}
-.card_label_text {
-  color: #fff;
-}
-.payment_button {
-  text-align: center;
-  padding-top: 15px;
-}
-.payment_button button {
-  background-color: #212529;
-  font-size: 26px;
-  cursor: pointer;
-  padding: 15px 30px;
-  width: 200px;
-  border-radius: 8px;
-  color: #fff;
-  transition: opacity 0.5s;
-}
-.payment_button button:hover {
-  opacity: 0.7;
-}
-
-.disabled-payment-button button {
-  user-select: none;
-  pointer-events: none;
-  opacity: 0.3;
-}
-
-.checkout_error_block {
-  color: #e53935;
-  padding: 15px 0;
-  font-weight: 600;
-}
-
-.zip_element p {
-  margin-bottom: 0;
-}
-.zip_element input {
-  background-color: #000;
-  outline: none;
-  border: none;
-  font-size: 18px;
-  margin-top: 5px;
-  color: #ffffff;
-  width: 100%;
-}