tf-checkout-react 1.7.31 → 2.0.0-beta.0

package/src/components/confirmationContainer/config.ts

@@ -1,79 +0,0 @@
-import {
-  EmailIcon,
-  EmailShareButton,
-  FacebookIcon,
-  FacebookMessengerIcon,
-  FacebookMessengerShareButton,
-  FacebookShareButton,
-  HatenaIcon,
-  HatenaShareButton,
-  InstapaperIcon,
-  InstapaperShareButton,
-  LineIcon,
-  LineShareButton,
-  LinkedinIcon,
-  LinkedinShareButton,
-  LivejournalIcon,
-  LivejournalShareButton,
-  MailruIcon,
-  MailruShareButton,
-  OKIcon,
-  OKShareButton,
-  PinterestIcon,
-  PinterestShareButton,
-  PocketIcon,
-  PocketShareButton,
-  RedditIcon,
-  RedditShareButton,
-  TelegramIcon,
-  TelegramShareButton,
-  TumblrIcon,
-  TumblrShareButton,
-  TwitterShareButton,
-  ViberIcon,
-  ViberShareButton,
-  VKIcon,
-  VKShareButton,
-  WeiboIcon,
-  WeiboShareButton,
-  WhatsappIcon,
-  WhatsappShareButton,
-  WorkplaceIcon,
-  WorkplaceShareButton,
-  XIcon,
-} from 'react-share'
-
-import { InstagramIcon, SocialButton, SpotifyIcon } from '../common/socials'
-
-const config: any = {
-  facebook: { component: FacebookShareButton, icon: FacebookIcon },
-  messenger: {
-    component: FacebookMessengerShareButton,
-    icon: FacebookMessengerIcon,
-  },
-  twitter: { component: TwitterShareButton, icon: XIcon },
-  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 },
-  instagram: { component: SocialButton, icon: InstagramIcon },
-  spotify: { component: SocialButton, icon: SpotifyIcon },
-}
-
-export default function (key: string) {
-  return config[key]
-}

package/src/components/confirmationContainer/index.tsx

@@ -1,349 +0,0 @@
-/* eslint-disable max-len */
-import './style.css'
-
-import { Button } from '@mui/material'
-import axios, { AxiosError } from 'axios'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import _map from 'lodash/map'
-import React, { SyntheticEvent, useEffect, useRef, useState } from 'react'
-
-import { getConfirmationData } from '../../api'
-import { usePixel } from '../../hooks/usePixel'
-import { IReferralPromotion } from '../../types'
-import { createMarkup, getCookieByName, isBrowser } from '../../utils'
-import { CopyMessageModal } from '../common'
-import SocialButtons from './social-buttons'
-
-export interface IShareButton {
-  mainLabel: string;
-  subLabel: string;
-  platform: string;
-  shareData: any;
-  points?: number | string;
-  onAfterShare?: (event: SyntheticEvent) => void;
-  eventActionId?: string;
-  oneTimeAction?: boolean;
-  alreadyApplied?: boolean;
-  btnClassName?: string;
-}
-
-export interface IConfirmationLabels {
-  confirmationTitle?: string;
-  confirmationMain?: string;
-  confirmationHelper?: string;
-  paymentPlanConfirmationTitle?: string;
-  paymentPlanConfirmationMain?: string;
-  paymentPlanConfirmationHelper?: string;
-}
-
-export interface IConfirmationPage {
-  hasCopyIcon?: boolean;
-  isReferralEnabled: boolean;
-  showDefaultShareButtons: boolean;
-  messengerAppId: string;
-  shareButtons: IShareButton[];
-  onGetConfirmationDataSuccess: (res: ICheckoutCompleteData) => void;
-  onGetConfirmationDataError: (e: AxiosError) => void;
-  onLinkCopied: () => void;
-  orderHash?: string;
-  confirmationLabels: IConfirmationLabels;
-  clientLabel?: string;
-  showReferralsInfoText?: boolean;
-  showCopyInfoModal?: boolean;
-  showPricingNoteSection?: boolean;
-  showOrderDetailsBtn?: boolean;
-  onOrderDetailsClick?: (data: ICheckoutCompleteData) => void;
-  showProductImage?: boolean;
-  eventTitle?: string;
-  eventDate?: string;
-  eventLocation?: string;
-}
-
-export const ConfirmationContainer = ({
-  confirmationLabels,
-  hasCopyIcon = true,
-  isReferralEnabled,
-  showDefaultShareButtons,
-  messengerAppId = '',
-  shareButtons = [],
-  onGetConfirmationDataSuccess = _identity,
-  onGetConfirmationDataError = _identity,
-  orderHash,
-  onLinkCopied = _identity,
-  clientLabel,
-  showReferralsInfoText = false,
-  showCopyInfoModal = false,
-  showPricingNoteSection = false,
-  showOrderDetailsBtn = false,
-  onOrderDetailsClick = _identity,
-  showProductImage = true,
-  eventTitle,
-  eventDate,
-  eventLocation,
-}: IConfirmationPage) => {
-  const inputRef = useRef(null)
-  const [data, setData] = useState<ICheckoutCompleteData | null>(null)
-  const dataEncoded = (isBrowser && window.localStorage.getItem('checkoutData')) || ''
-  const dataDecoded = dataEncoded ? JSON.parse(dataEncoded) : { hash: orderHash }
-  const { hash } = dataDecoded
-  const eventId = data?.product_id || ''
-
-  useEffect(() => {
-    (async () => {
-      if (hash) {
-        try {
-          const confirmationDataResponse = await getConfirmationData(hash)
-          const data = confirmationDataResponse.data.attributes
-          data.personal_share_sales = data.personal_share_sales.map(salesItem => {
-            const salesData: IReferralPromotion = {
-              label: `If your friends buy ${salesItem.sales} tickets`,
-              price: '',
-            }
-            if (salesItem.price === 0) {
-              salesData.subLabel = 'Your ticket becomes'
-              salesData.price = 'FREE!'
-            } else {
-              salesData.subLabel = 'Your ticket goes down to'
-              salesData.price = data.currency.symbol + Number(salesItem.price).toFixed(2)
-            }
-
-            return salesData
-          })
-          data.personal_share_sales.unshift({
-            label: 'Your ticket is currently',
-            price: data.currency.symbol + data.product_price?.toFixed(2),
-          })
-          // Ensure order_hash is included in the data
-          if (!data.order_hash) {
-            data.order_hash = hash
-          }
-          setData(data)
-          onGetConfirmationDataSuccess(confirmationDataResponse.data.attributes)
-
-          // Clear user_data for non-logged-in users after successful purchase
-          if (isBrowser) {
-            const isLoggedIn = Boolean(getCookieByName('X-TF-ECOMMERCE'))
-            if (!isLoggedIn) {
-              window.localStorage.removeItem('user_data')
-            }
-          }
-        } catch (error) {
-          if (axios.isAxiosError(error)) onGetConfirmationDataError(error)
-        }
-      }
-    })()
-  }, [hash])
-
-  const [showCopyModal, setShowCopyModal] = useState(false)
-
-  const onClose = () => {
-    setShowCopyModal(false)
-  }
-
-  const onChangeShareLink = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newData = {
-      ...data,
-      personal_share_link: e.target.value,
-    } as ICheckoutCompleteData
-    setData(newData)
-  }
-  const {
-    confirmationTitle = 'Your Tickets are Confirmed!',
-    confirmationMain = 'Your tickets are available in My Tickets section',
-    confirmationHelper = 'Please bring them with you to the event',
-    paymentPlanConfirmationTitle = 'Your Tickets are Confirmed!',
-    paymentPlanConfirmationMain = 'Your payment plan is pending and we are trying to take your initial payment. If your initial payment does not complete, your payment plan will be cancelled.',
-    paymentPlanConfirmationHelper = 'You will receive a confirmation with your tickets once your final payment has been made.',
-  } = confirmationLabels
-
-  const pageUrl = isBrowser ? window.location.href.split('?')[0] : ''
-  usePixel(eventId, { page: 'complete', pageUrl, orderHash: hash })
-
-  return (
-    <div className="confirmation-page">
-      {showCopyInfoModal && (
-        <CopyMessageModal onClose={onClose} showCopyModal={showCopyModal} />
-      )}
-      {data && (
-        <>
-          <div className="header-container">
-            {showProductImage && (
-              <div className="header-product-image">
-                <img alt="" className="product-image" src={data.product_image} />
-              </div>
-            )}
-            <div className="header-product-text">
-              <p className="title">
-                {data.is_payment_plan ? paymentPlanConfirmationTitle : confirmationTitle}
-              </p>
-              {(eventTitle || eventDate || eventLocation) && (
-                <div className="event-details">
-                  {eventTitle && <div className="event-title">{eventTitle}</div>}
-                  {eventDate && <div className="event-date">{eventDate}</div>}
-                  {eventLocation && <div className="event-location">{eventLocation}</div>}
-                </div>
-              )}
-              <div
-                className="share-message-section"
-                dangerouslySetInnerHTML={
-                  data.custom_confirmation_page_text &&
-                  data.custom_confirmation_page_text_full_replacement
-                    ? createMarkup(data.custom_confirmation_page_text)
-                    : undefined
-                }
-              >
-                {data.custom_confirmation_page_text &&
-                data.custom_confirmation_page_text_full_replacement ? undefined : (
-                  <>
-                    {Boolean(data.is_payment_plan) && (
-                      <>
-                        <span className="main">{paymentPlanConfirmationMain}</span>
-                        <span className="helper">{paymentPlanConfirmationHelper}</span>
-                      </>
-                    )}
-                    {!data.is_payment_plan && (
-                      <>
-                        {data.attach_tickets ? (
-                          <span className="main">
-                            Your tickets have been emailed to you
-                          </span>
-                        ) : (
-                          <span className="main">{confirmationMain}</span>
-                        )}
-                        <span className="helper">
-                          {data.attach_tickets
-                            ? 'Please bring them with you to the event'
-                            : confirmationHelper}
-                        </span>
-                      </>
-                    )}
-                  </>
-                )}
-              </div>
-            </div>
-          </div>
-          {data.custom_confirmation_page_text &&
-          !data.custom_confirmation_page_text_full_replacement ? (
-            <div
-              className="custom-confirmation-page-text"
-              dangerouslySetInnerHTML={createMarkup(data.custom_confirmation_page_text)}
-            />
-          ) : null}
-          {showOrderDetailsBtn && (
-            <div className="order-details-button-container">
-              <Button
-                className="view-order-button"
-                variant="contained"
-                onClick={() => {
-                  onOrderDetailsClick(data)
-                }}
-              >
-                View Order
-              </Button>
-            </div>
-          )}
-          {data.disable_referral === false && isReferralEnabled && (
-            <>
-              <div className="referral_text_image_section">
-                <div className="referral_text_section">
-                  <div className="referral_title_text">
-                    Your ticket can become
-                    <span className="strong-text"> cheaper </span>
-                    or even
-                    <span className="strong-text"> FREE!</span>
-                  </div>
-                  <div className="referral_text">
-                    <span className="strong-text"> Invite friends </span>
-                    and we'll refund up to
-                    <span className="strong-text"> 100% </span>
-                    of your ticket money, if they buy tickets as well!
-                  </div>
-                </div>
-                <img
-                  className="body-product-image"
-                  src={data.product_image}
-                  alt="No Data"
-                />
-              </div>
-              <div className="share_wrapper">
-                <div className="share_section">
-                  <div className="invitation_section">
-                    <div className="invitation_title">
-                      How do you invite your friends?
-                    </div>
-                    <div className="share_buttons">
-                      <div className="share-by-link">
-                        <h5 className="share-by-link label">Send them this link:</h5>
-                        <div className="share-btn-inner">
-                          <input
-                            ref={inputRef}
-                            className="share-input"
-                            value={data.personal_share_link}
-                            onChange={onChangeShareLink}
-                          />
-                          <div
-                            aria-hidden={true}
-                            className="share-by-link-copy-icon"
-                            onClick={() => {
-                              navigator.clipboard.writeText(
-                                _get(inputRef, 'current.value') || ''
-                              )
-                              setShowCopyModal(true)
-                              onLinkCopied()
-                            }}
-                          >
-                            {hasCopyIcon ? (
-                              <img
-                                src="https://img.icons8.com/office/50/000000/copy.png"
-                                alt="copy"
-                              />
-                            ) : (
-                              <span className="copy-icon">Copy</span>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                      {(showDefaultShareButtons || !!shareButtons.length) && (
-                        <SocialButtons
-                          showDefaultShareButtons={showDefaultShareButtons}
-                          name={data.product_name}
-                          appId={messengerAppId}
-                          shareLink={data.personal_share_link}
-                          shareButtons={shareButtons}
-                          clientLabel={clientLabel}
-                          showReferralsInfoText={showReferralsInfoText}
-                        />
-                      )}
-                    </div>
-                  </div>
-                </div>
-                <div className="pricing-section">
-                  <div className="invitation_title">How much cheaper?</div>
-                  {_map(data.personal_share_sales, (pricing, index) => (
-                    <div key={index} className="pricing-section_wrapper">
-                      <div className="pricing-section_label">
-                        {pricing.label}
-                        {pricing.subLabel && (
-                          <div className="pricing-section_sublabel">
-                            {pricing.subLabel}
-                          </div>
-                        )}
-                      </div>
-                      <div className="pricing-section_price"> {pricing.price}</div>
-                    </div>
-                  ))}
-                  {showPricingNoteSection && (
-                    <div className="note-pricing-section">
-                      ^ This is based on the most expensive ticket in your order.
-                    </div>
-                  )}
-                </div>
-              </div>
-            </>
-          )}
-        </>
-      )}
-    </div>
-  )
-}

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

@@ -1,149 +0,0 @@
-import _identity from 'lodash/identity'
-import React, { ReactElement } from 'react'
-
-import { isValidNumber } from '../../utils/isValidNumber'
-import config from './config'
-import { IShareButton } from './index'
-
-const SocialComponent = ({
-  mainLabel,
-  subLabel,
-  platform,
-  shareData,
-  points,
-  onAfterShare,
-  alreadyApplied,
-  oneTimeAction,
-  btnClassName = '',
-}: IShareButton) => {
-  const Component = config(platform)?.component
-  const Icon = config(platform)?.icon
-  const isActionDisabled = alreadyApplied && oneTimeAction
-  return (
-    <>
-      {Component && (
-        <Component {...shareData} disabled={isActionDisabled} className={btnClassName}>
-          <div
-            onKeyDown={_identity}
-            onClick={!isActionDisabled ? onAfterShare : _identity}
-            className={`social-media-sharing ${platform}`}
-          >
-            <div className="share-icon">
-              <Icon size={32} round />
-            </div>
-            <span className="share-text">
-              <span className="main-label">{mainLabel} </span>
-              <span className="sub-label">{subLabel}</span>
-            </span>
-            {isValidNumber(points) && (
-              <div className="share-points">
-                <span className="points-count">{points}</span>
-                <span className="points-text">Points</span>
-              </div>
-            )}
-          </div>
-        </Component>
-      )}
-    </>
-  )
-}
-
-interface SocialButtonsTypes {
-  shareLink: string;
-  name: string;
-  appId: string;
-  showDefaultShareButtons: boolean;
-  shareButtons: IShareButton[];
-  titleText?: string;
-  footerText?: string | ReactElement;
-  clientLabel?: string;
-  showReferralsInfoText?: boolean;
-  onAfterShare?: (eventActionId: string | undefined) => void;
-}
-
-const SocialButtons = ({
-  showDefaultShareButtons,
-  shareLink,
-  name,
-  appId,
-  shareButtons,
-  titleText = 'or use one of these convenient buttons:',
-  footerText = (
-    <p>
-      We <strong>never</strong> post on Facebook without your permission!
-    </p>
-  ) as ReactElement,
-  clientLabel,
-  onAfterShare = _identity,
-  showReferralsInfoText = false,
-}: SocialButtonsTypes) => (
-  <>
-    {titleText && <div className="convenient_buttons">{titleText}</div>}
-    <div className="social-media-btns">
-      {showDefaultShareButtons && (
-        <>
-          <SocialComponent
-            mainLabel="Share on"
-            subLabel="Facebook"
-            platform="facebook"
-            shareData={{
-              quote: name,
-              url: shareLink,
-            }}
-          />
-          <SocialComponent
-            mainLabel="Post on"
-            subLabel="X"
-            platform="twitter"
-            shareData={{
-              title: name,
-              url: shareLink,
-            }}
-            btnClassName="twitter-btn"
-          />
-          <SocialComponent
-            mainLabel="Message friends on"
-            subLabel="Facebook"
-            platform="messenger"
-            shareData={{
-              appId,
-              url: shareLink,
-            }}
-          />
-          <SocialComponent
-            mainLabel="Message friends on"
-            subLabel="Whatsapp"
-            platform="whatsapp"
-            shareData={{
-              title: name,
-              url: shareLink,
-            }}
-          />
-        </>
-      )}
-      {shareButtons.map((shareButton: IShareButton, index: number) => (
-        <SocialComponent
-          onAfterShare={() => onAfterShare(shareButton.eventActionId)}
-          key={index}
-          {...shareButton}
-        />
-      ))}
-    </div>
-    {showDefaultShareButtons || shareButtons.length ? footerText : null}
-    {(showReferralsInfoText || Boolean(clientLabel)) && (
-      <p className="note-message">
-        <span>
-          *Please note, only purchases made from a different{' '}
-          {clientLabel || 'Ticket Fairy'} account can count towards your referrals
-        </span>
-        <span>
-          {' '}
-          so please make sure you ask your friends to buy their own tickets using their
-          own {clientLabel || 'Ticket Fairy'} account!
-        </span>
-      </p>
-    )}
-  </>
-)
-
-export default SocialButtons