tf-checkout-react 1.0.99 → 1.0.100-beta.2

package/src/components/confirmationContainer/index.tsx

@@ -1,194 +1,197 @@
-/* eslint-disable react/no-unescaped-entities */
-import React, { useEffect, useRef, useState } from 'react'
-import './style.css'
-import _map from 'lodash/map'
-import _get from 'lodash/get'
-import { IReferralPromotion } from '../../types'
-import { getConfirmationData } from '../../api'
-import { AxiosError } from 'axios'
-import SocialButtons from './social-buttons'
-
-export interface IShareButton {
-  mainLabel: string;
-  subLabel: string;
-  platform: string;
-  shareData: any;
-}
-
-export interface IConfirmationPage {
-  isReferralEnabled: boolean;
-  showDefaultShareButtons: boolean;
-  messengerAppId: string;
-  shareButtons: IShareButton[];
-  onGetConfirmationDataSuccess: (res: any) => void;
-  onGetConfirmationDataError: (e: AxiosError) => void;
-  orderHash?: string;
-}
-
-export const ConfirmationContainer = ({
-  isReferralEnabled,
-  showDefaultShareButtons,
-  messengerAppId = '',
-  shareButtons = [],
-  onGetConfirmationDataSuccess = () => {},
-  onGetConfirmationDataError = () => {},
-  orderHash,
-}: IConfirmationPage) => {
-  const inputRef = useRef(null)
-  const [data, setData] = useState<any>(null)
-
-  // 1. get payment complete data ---> v1/order/${orderHash}/payment/complete/
-
-  useEffect(() => {
-    (async () => {
-      const dataEncoded =
-        (typeof window !== 'undefined' &&
-          window.localStorage.getItem('checkoutData')) ||
-        ''
-
-      const dataDecoded = dataEncoded
-        ? JSON.parse(dataEncoded)
-        : { hash: orderHash }
-      const { hash } = dataDecoded
-
-      if (hash) {
-        try {
-          const response = await getConfirmationData(hash)
-          const data = _get(response, 'data.data.attributes')
-          data.personal_share_sales = data.personal_share_sales.map(
-            (d: any) => {
-              const salesData: IReferralPromotion = {
-                label: `If your friends buy ${d.sales} tickets`,
-                price: '',
-              }
-              if (d.price === 0) {
-                salesData.subLabel = 'Your ticket becomes'
-                salesData.price = 'FREE!'
-              } else {
-                salesData.subLabel = 'Your ticket goes down to'
-                salesData.price = data.currency.symbol + d.price?.toFixed(2)
-              }
-
-              return salesData
-            }
-          )
-          data.personal_share_sales.unshift({
-            label: 'Your ticket is currently',
-            price: data.currency.symbol + data.product_price?.toFixed(2),
-          })
-          setData(data)
-          onGetConfirmationDataSuccess(response.data)
-        } catch (error) {
-          onGetConfirmationDataError(error.response)
-        }
-      }
-    })()
-  }, [])
-
-  const onChangeShareLink = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newData = { ...data, personal_share_link: e.target.value }
-    setData(newData)
-  }
-
-  return (
-    <div className="confirmation-page">
-      {data && (
-        <>
-          <p className="title">Your Tickets are Confirmed!</p>
-          <div className="share-message-section">
-            <span className="main">Your tickets have been emailed to you</span>
-            <span className="helper">
-              Please bring them with you to the event
-            </span>
-          </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 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
-                            className="share-by-link-copy-icon"
-                            onClick={() =>
-                              navigator.clipboard.writeText(
-                                _get(inputRef, 'current.value')
-                              )
-                            }
-                          >
-                            <img
-                              src="https://img.icons8.com/office/50/000000/copy.png"
-                              alt="copy"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                      {(showDefaultShareButtons || !!shareButtons.length) && (
-                        <SocialButtons
-                          showDefaultShareButtons={showDefaultShareButtons}
-                          name={data.product_name}
-                          appId={messengerAppId}
-                          shareLink={data.personal_share_link}
-                          shareButtons={shareButtons}
-                        />
-                      )}
-                    </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>
-                  ))}
-                </div>
-              </div>
-            </>
-          )}
-        </>
-      )}
-    </div>
-  )
-}
+/* eslint-disable react/no-unescaped-entities */
+import React, { useEffect, useRef, useState } from 'react'
+import './style.css'
+import _map from 'lodash/map'
+import _get from 'lodash/get'
+import { IReferralPromotion } from '../../types'
+import { getConfirmationData } from '../../api'
+import { AxiosError } from 'axios'
+import SocialButtons from './social-buttons'
+
+export interface IShareButton {
+  mainLabel: string;
+  subLabel: string;
+  platform: string;
+  shareData: any;
+}
+
+export interface IConfirmationPage {
+  isReferralEnabled: boolean;
+  showDefaultShareButtons: boolean;
+  messengerAppId: string;
+  shareButtons: IShareButton[];
+  onGetConfirmationDataSuccess: (res: any) => void;
+  onGetConfirmationDataError: (e: AxiosError) => void;
+  onLinkCopied: () => void;
+  orderHash?: string;
+}
+
+export const ConfirmationContainer = ({
+  isReferralEnabled,
+  showDefaultShareButtons,
+  messengerAppId = '',
+  shareButtons = [],
+  onGetConfirmationDataSuccess = () => {},
+  onGetConfirmationDataError = () => {},
+  orderHash,
+  onLinkCopied = () => {}
+}: IConfirmationPage) => {
+  const inputRef = useRef(null)
+  const [data, setData] = useState<any>(null)
+
+  // 1. get payment complete data ---> v1/order/${orderHash}/payment/complete/
+
+  useEffect(() => {
+    (async () => {
+      const dataEncoded =
+        (typeof window !== 'undefined' &&
+          window.localStorage.getItem('checkoutData')) ||
+        ''
+
+      const dataDecoded = dataEncoded
+        ? JSON.parse(dataEncoded)
+        : { hash: orderHash }
+      const { hash } = dataDecoded
+
+      if (hash) {
+        try {
+          const response = await getConfirmationData(hash)
+          const data = _get(response, 'data.data.attributes')
+          data.personal_share_sales = data.personal_share_sales.map(
+            (d: any) => {
+              const salesData: IReferralPromotion = {
+                label: `If your friends buy ${d.sales} tickets`,
+                price: '',
+              }
+              if (d.price === 0) {
+                salesData.subLabel = 'Your ticket becomes'
+                salesData.price = 'FREE!'
+              } else {
+                salesData.subLabel = 'Your ticket goes down to'
+                salesData.price = data.currency.symbol + d.price?.toFixed(2)
+              }
+
+              return salesData
+            }
+          )
+          data.personal_share_sales.unshift({
+            label: 'Your ticket is currently',
+            price: data.currency.symbol + data.product_price?.toFixed(2),
+          })
+          setData(data)
+          onGetConfirmationDataSuccess(response.data)
+        } catch (error) {
+          onGetConfirmationDataError(error.response)
+        }
+      }
+    })()
+  }, [])
+
+  const onChangeShareLink = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newData = { ...data, personal_share_link: e.target.value }
+    setData(newData)
+  }
+
+  return (
+    <div className="confirmation-page">
+      {data && (
+        <>
+          <p className="title">Your Tickets are Confirmed!</p>
+          <div className="share-message-section">
+            <span className="main">Your tickets have been emailed to you</span>
+            <span className="helper">
+              Please bring them with you to the event
+            </span>
+          </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 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
+                            className="share-by-link-copy-icon"
+                            onClick={() => {
+                              navigator.clipboard.writeText(
+                                _get(inputRef, 'current.value')
+                              )
+                              onLinkCopied()
+                            }}
+                          >
+                            <img
+                              src="https://img.icons8.com/office/50/000000/copy.png"
+                              alt="copy"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                      {(showDefaultShareButtons || !!shareButtons.length) && (
+                        <SocialButtons
+                          showDefaultShareButtons={showDefaultShareButtons}
+                          name={data.product_name}
+                          appId={messengerAppId}
+                          shareLink={data.personal_share_link}
+                          shareButtons={shareButtons}
+                        />
+                      )}
+                    </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>
+                  ))}
+                </div>
+              </div>
+            </>
+          )}
+        </>
+      )}
+    </div>
+  )
+}

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

@@ -1,94 +1,94 @@
-import React from 'react';
-import { IShareButton } from'./index'
-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;
-  name: string;
-  appId: string;
-  showDefaultShareButtons: boolean;
-  shareButtons: IShareButton[]
-}
-
-const SocialButtons = ({ showDefaultShareButtons, shareLink, name, appId, shareButtons }: SocialButtonsTypes) => {
-  return (
-    <>
-      <div className="convenient_buttons">
-        or use one of these convenient buttons:
-      </div>
-      <div className="social-media-btns">
-        {showDefaultShareButtons && (
-          <>
-            <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: IShareButton, index: number) => (
-          <SocialComponent key={index} {...shareButton} />
-        ))}
-      </div>
-      {(showDefaultShareButtons || shareButtons.length) && (
-        <p>We <strong>never</strong> post on Facebook without your permission!</p>
-      )}
-    </>
-  )
-}
-
-export default SocialButtons
+import React from 'react';
+import { IShareButton } from'./index'
+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;
+  name: string;
+  appId: string;
+  showDefaultShareButtons: boolean;
+  shareButtons: IShareButton[]
+}
+
+const SocialButtons = ({ showDefaultShareButtons, shareLink, name, appId, shareButtons }: SocialButtonsTypes) => {
+  return (
+    <>
+      <div className="convenient_buttons">
+        or use one of these convenient buttons:
+      </div>
+      <div className="social-media-btns">
+        {showDefaultShareButtons && (
+          <>
+            <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: IShareButton, index: number) => (
+          <SocialComponent key={index} {...shareButton} />
+        ))}
+      </div>
+      {(showDefaultShareButtons || shareButtons.length) && (
+        <p>We <strong>never</strong> post on Facebook without your permission!</p>
+      )}
+    </>
+  )
+}
+
+export default SocialButtons