tf-checkout-react 1.3.46 → 1.3.47-beta.2

package/src/components/ticketsContainer/index.tsx

@@ -17,12 +17,16 @@ import Button from 'react-bootstrap/Button'
 
 import {
   addToCart,
+  confirmMetamask,
+  connectMetamask,
+  getCart,
   getCheckoutPageConfigs,
   getEvent,
   getProfileData,
   getTickets,
   logout,
   postOnCheckout,
+  temporalNonce,
 } from '../../api'
 import { X_TF_ECOMMERCE } from '../../constants'
 import { useCookieListener } from '../../hooks/useCookieListener'
@@ -34,6 +38,7 @@ import {
   getQueryVariable,
   setLoggedUserData,
 } from '../../utils'
+import { returnSelectedBlockchain, signSubmit } from '../billing-info-container/utils'
 import { Loader } from '../common/index'
 import { PoweredBy } from '../common/PoweredBy'
 import ConfirmModal from '../confirmModal'
@@ -41,6 +46,7 @@ import Countdown from '../countdown'
 import { LoginModal } from '../loginModal'
 import WaitingList from '../waitingList'
 import { AccessCodeSection } from './AccessCodeSection'
+import { CryptoIntegration } from './crypto.js'
 import { PromoCodeSection } from './PromoCodeSection'
 import { ReferralLogic } from './ReferralLogic'
 import { TicketsSection } from './TicketsSection'
@@ -174,7 +180,17 @@ export const TicketsContainer = ({
   const [showPromoCodeSection, setShowPromoCodeSection] = useState(
     isPromotionsEnabled
   )
-  const [error, setError] = useState(null)
+  const [error, setError] = useState<string | null>(null)
+  const cryptoEventIdentifier = (
+    event?.cryptoEventIdentifiers &&
+    event.cryptoEventIdentifiers?.length &&
+    event.cryptoEventIdentifiers[0]
+  )
+  const isSolanaEvent = cryptoEventIdentifier === 'solana'
+  const isEthereumEvent = cryptoEventIdentifier === 'ethereum'
+  const isCryptoEvent = event?.isCryptoEvent
+  const [cryptoWrapper, setCryptoWrapper] = useState<any>(undefined)
+  const [cryptoIdentifier, setCryptoIdentifier] = useState<string[]>([])
   const [isNotInvitedError, setIsNotInvitedError] = useState('')
   const [isInvalidLinkError, setIsInvalidLinkError] = useState('')
 
@@ -200,6 +216,8 @@ export const TicketsContainer = ({
     !!eventId && getTicketsApi()
   }, [eventId])
 
+  const [walletNotVerified, setWalletNotVerified] = useState(true)
+  const [noWalletConnected, setNoWalletConnected] = useState(true)
   useEffect(() => {
     if (isLogged) {
       fetchUserData()
@@ -226,6 +244,8 @@ export const TicketsContainer = ({
         const event = new window.CustomEvent('tf-logout')
         deleteCookieByName('X-TF-ECOMMERCE')
         window.document.dispatchEvent(event)
+        setWalletNotVerified(true)
+        setNoWalletConnected(true)
       }
     } catch (e) {
       onLogoutError(e)
@@ -268,6 +288,20 @@ export const TicketsContainer = ({
       if (eventResponse.data.success) {
         const event = _get(eventResponse, 'data.data.attributes')
         setEvent(event)
+        setWalletNotVerified(event?.walletNotVerified ?? true)
+        setNoWalletConnected(event?.noWalletConnected ?? true)
+        if (response?.data?.data?.attributes?.tickets) {
+          const { tickets } = response.data.data.attributes
+          for (const ticketKey in tickets) {
+            const ticket = tickets[ticketKey]
+            if (ticket?.walletNotVerified !== undefined) {
+              setWalletNotVerified(ticket?.walletNotVerified ?? true)
+            }
+            if (ticket?.noWalletConnected !== undefined) {
+              setNoWalletConnected(ticket?.noWalletConnected ?? true)
+            }
+          }
+        }
 
         if (event.country && isWindowDefined) {
           window.localStorage.setItem('eventCountry', event.country)
@@ -381,6 +415,27 @@ export const TicketsContainer = ({
             userData
           )
 
+          if (isCryptoEvent) {
+            const res = await getCart()
+            const cartInfo = _get(res, 'data.data.attributes')
+            const { selectedBlockchain } = returnSelectedBlockchain(cartInfo?.permittedBlockchains, cryptoIdentifier)
+            cryptoWrapper.setBlockchain(selectedBlockchain)
+            const { signature, override_crypto_address, usedAddress } = await signSubmit({
+              hasAccount: cartInfo?.hasAccount,
+              ethNonce: cartInfo?.ethNonce,
+              permittedBlockchains: cartInfo?.permittedBlockchains,
+              cryptoWrapper,
+              selectedBlockchain
+            })
+            checkoutBody.attributes.blockchain = selectedBlockchain
+            if (override_crypto_address) {
+              checkoutBody.attributes.crypto_address = usedAddress
+              checkoutBody.attributes.crypto_signature = signature
+            } else {
+              checkoutBody.attributes.crypto_confirmation_signature = signature
+            }
+          }
+
           const checkoutResult = enableBillingInfoAutoCreate
             ? await postOnCheckout(checkoutBody, access_token, freeTicket)
             : null
@@ -512,6 +567,130 @@ export const TicketsContainer = ({
     !event?.salesStarted && event?.salesStart && !isTicketAvailable
   const influencers = event?.referralsEnabled ? event?.referrals : []
 
+  const [cryptoButtonDisabled, setCryptoButtonDisabled] = useState(false)
+  useEffect(() => {
+    setCryptoWrapper(CryptoIntegration())
+    window.addEventListener('ttf.crypto.new-wallet', (event: any) => {
+      if (event?.detail?.identifier) {
+        setCryptoIdentifier(state => [...state, event.detail.identifier])
+      }
+    })
+  }, [])
+
+  const walletConnect = async (blockchain: string, tempNonce: string) => {
+    try {
+      cryptoWrapper.setBlockchain(blockchain)
+      const accountInformation = await cryptoWrapper.getAuthenticatedUserAddress()
+      const crypto_address = accountInformation.address
+			const nonce = accountInformation?.nonce
+			const message = 'Confirm you are the owner of ' + crypto_address + '. Nonce: '
+			setCryptoButtonDisabled(true)
+			let usedAddress = undefined
+      try {
+			  await cryptoWrapper.enable()
+        const address = await cryptoWrapper.getAddress()
+        usedAddress = address
+        const signature = await cryptoWrapper.getSignature(usedAddress, nonce, message)
+        try {
+          const form = new FormData()
+          form.append('crypto_signature', signature)
+          await confirmMetamask(blockchain, form)
+          setCryptoButtonDisabled(false)
+          setWalletNotVerified(false)
+          setNoWalletConnected(false)
+        } catch(e) {
+          setCryptoButtonDisabled(false)
+        }
+      } catch(e) {
+        const error: any = e
+        setCryptoButtonDisabled(false)
+				if (error?.errorCode !== cryptoWrapper.ERRORS.CONNECTION_REJECTED &&
+					error?.errorCode !== cryptoWrapper.ERRORS.SIGNATURE_REJECTED) {
+					return setError('Something went wrong, Try again later or contact our support team.')
+				}
+      }
+    } catch(e) {
+      const error: any = e
+      let userIsLoggedIn = false
+			if (error.errorCode === cryptoWrapper.ERRORS.ACCOUNT_NOT_FOUND) {
+				userIsLoggedIn = true
+			} else if (error.errorCode !== cryptoWrapper.ERRORS.NOT_AUTHENTICATED) {
+				return setError('Something went wrong, Try again later or contact our support team.')
+			}
+			setCryptoButtonDisabled(true)
+			let usedAddress = undefined
+      try {
+        await cryptoWrapper.enable()
+        const address = await cryptoWrapper.getAddress()
+        usedAddress = address
+        const nonce = await cryptoWrapper.getNonceFromAddress(address)
+        if (userIsLoggedIn) {
+					setCryptoButtonDisabled(false)
+					return setError(
+            'This wallet is already connected to an existing account. ' +
+            'Please log out of this account and log back in using this wallet.'
+          )
+				}
+        const signature = await cryptoWrapper.getSignature(usedAddress, nonce, 'Welcome back, we missed you! Nonce: ')
+        try {
+          await cryptoWrapper.authAddress(usedAddress, signature)
+          window.location.reload()
+        } catch(e) {
+          const error: any = e
+          setCryptoButtonDisabled(false)
+          if (error.errorCode !== cryptoWrapper.ERRORS.CONNECTION_REJECTED &&
+            error.errorCode !== cryptoWrapper.ERRORS.SIGNATURE_REJECTED) {
+            return setError('Something went wrong, Try again later or contact our support team.')
+          }
+        }
+      } catch(e) {
+        const error: any = e
+        if (error.errorCode === cryptoWrapper.ERRORS.ACCOUNT_NOT_FOUND) {
+					const nonce = tempNonce
+					let message = 'Welcome to The Ticket Fairy! Nonce: '
+					if (userIsLoggedIn) {
+						message = 'You are connecting your wallet with The Ticket Fairy. Nonce: '
+					}
+          try {
+            const signature = await cryptoWrapper.getSignature(usedAddress, nonce, message)
+            const form = new FormData()
+            form.append('crypto_address', String(usedAddress))
+            form.append('crypto_signature', signature)
+            form.append('product_id', String(eventId))
+            form.append('ticket_type_id', '')
+            try {
+              await connectMetamask(blockchain, form)
+              setCryptoButtonDisabled(false)
+              setWalletNotVerified(false)
+              setNoWalletConnected(false)
+              return
+            } catch(e) {
+              const errorMessage = _get(e, 'response.data.message')
+              setCryptoButtonDisabled(false)
+              if (errorMessage) {
+                return setError(errorMessage)
+              }
+            }
+          } catch(e) {
+            const error: any = e
+            setCryptoButtonDisabled(false)
+            if (error.errorCode !== cryptoWrapper.ERRORS.CONNECTION_REJECTED &&
+              error.errorCode !== cryptoWrapper.ERRORS.SIGNATURE_REJECTED) {
+              return setError('Something went wrong, Try again later or contact our support team.')
+            }
+          }
+				}
+				setCryptoButtonDisabled(false)
+				if (error.errorCode !== cryptoWrapper.ERRORS.CONNECTION_REJECTED &&
+					error.errorCode !== cryptoWrapper.ERRORS.SIGNATURE_REJECTED) {
+					return setError('Something went wrong, Try again later or contact our support team.')
+				}
+        if (error?.message) {
+          return setError(error?.message)
+        }
+      }
+    }
+	}
   const canShowGetTicketBtn = () => {
     if (
       !wrappedActionsSectionComponent &&
@@ -573,7 +752,7 @@ export const TicketsContainer = ({
           <Loader />
         ) : (
           <div ref={ticketsContainerRef}>
-            {!isSalesClosed && (
+            {!isSalesClosed && (isCryptoEvent ? !(noWalletConnected || walletNotVerified) : true) && (
               <TicketsSection
                 event={event}
                 ticketsList={tickets}
@@ -584,8 +763,43 @@ export const TicketsContainer = ({
                 hideTicketsHeader={hideTicketsHeader || _isEmpty(tickets)}
                 showGroupNameBlock={showGroupNameBlock}
                 currencySybmol={currencySybmol}
+                cryptoIdentifier={cryptoIdentifier}
+                cryptoButtonDisabled={cryptoButtonDisabled}
+                walletConnect={walletConnect}
+                noWalletConnected={noWalletConnected}
+                walletNotVerified={walletNotVerified}
               />
             )}
+            {isCryptoEvent && (noWalletConnected || walletNotVerified) ?
+              cryptoIdentifier.length > 0 ?
+                (
+                  <div className='nft-container-connect'>
+                    <div>Please connect your wallet<br/> to view available tickets</div>
+                    {isSolanaEvent && !cryptoIdentifier.includes('solana') ? (
+                      <strong className='phatom enable-wallet'>Phantom-enabled browser required.</strong>
+                    ) : isEthereumEvent && !cryptoIdentifier.includes('ethereum') ? (
+                      <strong className='metamask enable-wallet'>Metamask-enabled browser required.</strong>
+                    ) : (
+                      (isSolanaEvent && cryptoIdentifier.includes('solana')) ||
+                      (isEthereumEvent && cryptoIdentifier.includes('ethereum'))
+                    ) ? (
+                      <button
+                        disabled={cryptoButtonDisabled}
+                        className='ntf-button-connect'
+                        type='button'
+                        onClick={async () => {
+                          const response = await temporalNonce()
+                          const ethNonce = _get(response, 'data.data.attributes.ethNonce')
+                          walletConnect(cryptoEventIdentifier, ethNonce)
+                        }}
+                      >
+                        <strong>Connect </strong><br />with {isSolanaEvent ? 'Phantom' : 'MetaMask'}
+                      </button>
+                    ) : null}
+                  </div>
+                ) :
+              <strong>Crypto-enabled browser required.</strong>
+            : null}
             {externalUrl ? null : isSalesClosed ? (
               <p
                 className={`event-closed-message ${

package/src/components/waitingList/index.tsx

@@ -28,7 +28,7 @@ interface WaitingListFields {
 }
 
 const generateQuantity = (n: number) => {
-  const quantityList = []
+  const quantityList: any[] = []
   for (let i = 1; i <= n; i++) {
     quantityList.push({ label: i, value: i })
   }

package/src/env.ts

@@ -1,7 +1,7 @@
 // preview
 export const ENV = {
-  EVENT_ID: 12927,
-  BASE_URL: 'https://test.ticketfairy.com',
+  EVENT_ID: 6306,
+  BASE_URL: 'https://ttf.localhost',
   CLIENT_ID: 'e9d8f8922797b4621e562255afe90dbf',
   CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
   STRIPE_PUBLISHABLE_KEY:

package/src/types/billing-info-data.ts

@@ -35,3 +35,9 @@ export interface IBillingInfoData {
   labelClassName?: string;
   uniqueId?: string;
 }
+
+export interface IBillingCryptoData {
+  cryptoAddress: string | undefined;
+  cryptoSignature: string | undefined;
+  blockchain: string | undefined;
+}

package/src/utils/getWalletName.tsx

@@ -0,0 +1,10 @@
+export const getWalletName = (blockchain: string): string => {
+  switch (blockchain){
+    case 'ethereum':
+      return 'MetaMask';
+    case 'solana':
+      return 'Phantom';
+    default:
+      return '';
+  }
+}

package/src/utils/loadProfile.tsx

@@ -0,0 +1,47 @@
+import {getProfileData} from "../api";
+import _get from "lodash/get";
+
+export const loadProfile = async (token?: string) => {
+  const profileResponse = await getProfileData(token)
+  const profileSpecifiedData = _get(profileResponse, 'data.data')
+  const profileData = setLoggedUserData(profileSpecifiedData)
+  if (typeof window !== 'undefined') {
+    window.localStorage.setItem(
+      'user_data',
+      JSON.stringify(profileData)
+    )
+  }
+  return profileResponse?.data
+}
+
+export const setLoggedUserData = (data: IUserData) => ({
+  id: data.id,
+  first_name: data.firstName,
+  last_name: data.lastName,
+  email: data.email,
+  confirmEmail: data.email,
+  city: data?.city || '',
+  country: data?.countryId || data?.country || '',
+  phone: data?.phone || '',
+  street_address: data?.streetAddress || '',
+  state: data?.stateId || '',
+  zip: data?.zip || data?.zipCode || '',
+  linkedCryptoWallets: data?.linkedCryptoWallets || []
+})
+
+interface IUserData {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  city?: string;
+  country?: string;
+  countryId?: string;
+  phone?: string;
+  streetAddress?: string;
+  state?: string;
+  zip?: string;
+  zipCode?: string;
+  stateId?: string;
+  linkedCryptoWallets?: string[];
+}

package/src/components/common/dist/PhoneNumberField.js

@@ -1,96 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-exports.__esModule = true;
-exports.PhoneNumberField = void 0;
-var TextField_1 = require("@mui/material/TextField");
-var debounce_1 = require("lodash/debounce");
-var get_1 = require("lodash/get");
-var react_1 = require("react");
-var api_1 = require("../../api");
-exports.PhoneNumberField = function (_a) {
-    var label = _a.label, _b = _a.type, type = _b === void 0 ? 'text' : _b, field = _a.field, _c = _a.form, errors = _c.errors, setFieldError = _c.setFieldError, setStatus = _c.setStatus;
-    var error = get_1["default"](errors, field.name);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    var debounceCb = react_1.useCallback(debounce_1["default"](function (cb) { return void cb(); }, 1000), []);
-    react_1.useEffect(function () {
-        var _a;
-        if (field.value) {
-            setStatus((_a = {}, _a[field.name] = true, _a));
-        }
-        debounceCb(function () { return __awaiter(void 0, void 0, void 0, function () {
-            var error_1, message;
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        _b.trys.push([0, 3, 4, 5]);
-                        if (!field.value) return [3 /*break*/, 2];
-                        return [4 /*yield*/, api_1.validatePhoneNumber(field.value)];
-                    case 1:
-                        _b.sent();
-                        _b.label = 2;
-                    case 2:
-                        setFieldError(field.name, '');
-                        return [3 /*break*/, 5];
-                    case 3:
-                        error_1 = _b.sent();
-                        message = get_1["default"](error_1, 'response.data.message', 'Invalid phone number');
-                        setFieldError(field.name, message);
-                        return [3 /*break*/, 5];
-                    case 4:
-                        setStatus((_a = {}, _a[field.name] = false, _a));
-                        return [7 /*endfinally*/];
-                    case 5: return [2 /*return*/];
-                }
-            });
-        }); });
-        // eslint-disable-next-line
-    }, [field.value]);
-    return (react_1["default"].createElement(TextField_1["default"], __assign({}, field, { id: field.name, label: label, type: type, fullWidth: true, error: !!error, helperText: error, value: field.value || '', inputProps: { pattern: '[+0-9]/d+' } })));
-};