tf-checkout-react 1.0.66 → 1.0.70

package/src/components/confirmationContainer/index.tsx

@@ -1,51 +1,39 @@
 /* eslint-disable react/no-unescaped-entities */
 import React, { useEffect, useRef, useState } from 'react'
 import './style.css'
-import SVG from 'react-inlinesvg'
 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;
-  svgSrc: string;
-
-  containerClassName?: string;
-  containerInnerClassName?: string;
-  svgClassName?: string;
-  svgWidth?: string;
-  svgHeight?: string;
-  svgFill?: string;
+  platform: string;
+  shareData: any;
 }
 
 export interface IConfirmationPage {
-  referralPromotions: IReferralPromotion[];
-  shareLink: string;
   isReferralEnabled: boolean;
+  showDefaultShareButtons: boolean;
+  messengerAppId: string;
   shareButtons: IShareButton[];
   onGetConfirmationDataSuccess: (res: any) => void;
   onGetConfirmationDataError: (e: AxiosError) => void;
 }
 
-const defaultSvg =
-  'https://img.icons8.com/ios-filled/50/000000/facebook-new.svg'
-
 export const ConfirmationContainer = ({
   isReferralEnabled,
-  referralPromotions = [],
+  showDefaultShareButtons,
+  messengerAppId = '',
   shareButtons = [],
-  shareLink = '',
   onGetConfirmationDataSuccess = () => {},
   onGetConfirmationDataError = () => {},
 }: IConfirmationPage) => {
   const inputRef = useRef(null)
-  const [data, setData] = useState<any>({})
-  const showShareButtons = Boolean(shareButtons.length)
-  const showReferralPromotions = Boolean(referralPromotions.length)
+  const [data, setData] = useState<any>(null)
 
   // 1. get payment complete data ---> v1/order/${orderHash}/payment/complete/
 
@@ -61,6 +49,19 @@ export const ConfirmationContainer = ({
         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) {
@@ -69,139 +70,107 @@ export const ConfirmationContainer = ({
       }
     })()
   }, [])
+
+  const onChangeShareLink = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newData = { ...data, personal_share_link: e.target.value }
+    setData(newData)
+  }
   
   return (
     <div className="confirmation-page">
-      <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 && (
+      {data && (
         <>
-          <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="https://www.ticketfairy.com/uploaded/thumbnails/db_file_img_123847_400xauto.jpg"
-              alt="No 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>
-          <div className="share_wrapper">
-            <div className="share_section">
-              <div className="invitation_section">
-                <div className="invitation_title">
-                  How do you invite your friends?
+          { 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>
-                <div className="share_buttons">
-                  <div className="sharing-btn share-by-link">
-                    <h5 className="sharing-btn share-by-link label">
-                      Send them this link:
-                    </h5>
-                    <div
-                      aria-hidden={true}
-                      className="share-btn-inner share-by-link-copy"
-                      onClick={() =>
-                        navigator.clipboard.writeText(
-                          _get(inputRef, 'current.value')
-                        )
-                      }
-                    >
-                      <input
-                        ref={inputRef}
-                        className="share-input"
-                        value={shareLink}
-                        disabled={true}
-                      />
-                      <div className="svg_wrapper">
-                        <SVG
-                          className="share-icon"
-                          width="25px"
-                          height="25px"
-                          fill="#FFF"
-                          src={defaultSvg}
-                        />
-                      </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>
-                  {showShareButtons && (
-                    <div>
-                      <div className="convenient_buttons sharing-btn">
-                        or use one of these convenient buttons:
-                      </div>
-                      <div className="social-media-btns">
-                        {_map(shareButtons, shareButtonItem => (
+                    <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={`sharing-btn ${shareButtonItem.containerClassName}`}
+                            className='share-by-link-copy-icon'
+                              onClick={() => navigator.clipboard.writeText(
+                                _get(inputRef, 'current.value')
+                              )}
                           >
-                            <div
-                              aria-hidden={true}
-                              className={`share-btn-inner ${shareButtonItem.containerInnerClassName}`}
-                              onClick={() => {}}
-                            >
-                              <SVG
-                                className={
-                                  shareButtonItem.svgClassName || 'share-icon'
-                                }
-                                width={shareButtonItem.svgWidth || '40px'}
-                                height={shareButtonItem.svgHeight || '40px'}
-                                fill={shareButtonItem.svgFill || '#FFF'}
-                                src={shareButtonItem.svgSrc || defaultSvg}
-                              />
-                              <span className="share-text">
-                                {shareButtonItem.mainLabel}
-                                <br /> {shareButtonItem.subLabel}
-                              </span>
-                            </div>
+                            <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>
-            </div>
-            {showReferralPromotions && (
-              <div className="pricing-section">
-                <div className="invitation_title">How much cheaper?</div>
-                {_map(referralPromotions, pricing => {
-                  const isFree = pricing.price === 'FREE'
-                  return (
-                    <div
-                      key={pricing.id}
-                      className={`pricing-section_wrapper ${isFree &&
-                        'free_price'}`}
-                    >
-                      <div className="pricing-section_label">
-                        {pricing.label || 'Your ticket is currently'}
-                        {pricing.subLabel && (
-                          <div className="pricing-section_sublabel">
-                            {pricing.subLabel || 'Your ticket becomes'}
-                          </div>
-                        )}
-                      </div>
-                      <div className="pricing-section_price">
-                        {' '}
-                        {pricing.price}
+                <div className="pricing-section">
+                  <div className="invitation_title">How much cheaper?</div>
+                  {_map(data.personal_share_sales, (pricing, index) => {
+                    return (
+                      <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>
-            )}
-          </div>
+            </>
+          )}
         </>
       )}
     </div>

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

@@ -0,0 +1,91 @@
+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>
+    </>
+  )
+}
+
+export default SocialButtons

package/src/components/confirmationContainer/style.css

@@ -2,6 +2,9 @@
   max-width: 1024px;
   margin: 0 auto;
 }
+.confirmation-page button {
+  margin-top: inherit;
+}
 .confirmation-page .strong-text {
   font-weight: 700;
 }
@@ -37,17 +40,17 @@
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  margin: 20px -10px;
+  margin: 20px 0;
 }
-.confirmation-page .referral_text_image_section .referral_text_section {
+.confirmation-page .referral_text_section {
   margin: 10px;
 }
-.confirmation-page .referral_text_image_section .referral_title_text {
+.confirmation-page .referral_title_text {
   color: #f08057;
   font-size: 28px;
   padding-bottom: 10px;
 }
-.confirmation-page .referral_text_image_section .referral_text {
+.confirmation-page .referral_text {
   font-size: 18px;
 }
 .confirmation-page .referral_text_image_section img {
@@ -60,136 +63,80 @@
   column-gap: 5rem;
   margin: 10px;
 }
-.confirmation-page .share_wrapper .invitation_title {
+.confirmation-page .invitation_title {
   font-size: 22px;
   padding-bottom: 12px;
   padding-top: 12px;
 }
-.confirmation-page .share_wrapper .share_section {
+.confirmation-page .share_section {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin: 0 -10px;
 }
-.confirmation-page .share_wrapper .share_section .invitation_section {
+.confirmation-page .invitation_section {
   flex: 1 1;
   padding: 0 5px;
 }
-.confirmation-page
-  .share_wrapper
-  .share_section
-  .invitation_section
-  .share_buttons {
+.confirmation-page .share_buttons {
   display: grid;
   flex-wrap: wrap;
   margin: 0 -7px;
 }
-.confirmation-page
-  .share_wrapper
-  .share_section
-  .invitation_section
-  .share_buttons
-  .social-media-btns {
+.confirmation-page .convenient_buttons {
+  margin-top: 10px;
+}
+.confirmation-page .social-media-btns {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  grid-gap: 5px
 }
-.confirmation-page
-  .share_wrapper
-  .share_section
-  .invitation_section
-  .share_buttons
-  .social-media-btns
-  .sharing-btn {
+.confirmation-page .sharing-btn {
   min-width: 130px;
-}
-.confirmation-page
-  .share_wrapper
-  .share_section
-  .invitation_section
-  .share-btn-inner.share-by-link-copy {
-  padding: 0;
-  text-align: left;
-}
-.confirmation-page
-  .share_wrapper
-  .share_section
-  .invitation_section
-  .sharing-button {
   flex: 1 1;
+  background-color: #000000;
+}
+.confirmation-page .sharing-btn a {
+  text-decoration: none;
 }
-.confirmation-page
-  .share_wrapper
-  .share_section
-  .invitation_section
-  .convenient_buttons.sharing-btn {
-  display: inline;
-}
-.confirmation-page
-  .share_wrapper
-  .share_section
-  .invitation_section
-  .share-by-link {
+.confirmation-page .share-by-link {
   background: #000;
   color: #fff;
-  padding: 0;
+  padding: 10px;
 }
-.confirmation-page
-  .share_wrapper
-  .share_section
-  .invitation_section
-  .share-by-link.label {
+.confirmation-page .share-by-link.label {
   text-align: left;
   padding: 0;
   margin: 0;
 }
-.confirmation-page
-  .share_wrapper
-  .share_section
-  .invitation_section
-  .sharing-btn {
-  padding: 7px;
-  text-align: center;
-  flex: 1 1;
-}
-.confirmation-page
-  .share_wrapper
-  .share_section
-  .invitation_section
-  .share-btn-inner {
-  background: #000;
+.confirmation-page .share-btn-inner {
+  background-color: #000;
   color: #fff;
   padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+  padding: 0;
+  text-align: left;
 }
-.confirmation-page
-  .share_wrapper
-  .share_section
-  .invitation_section
-  .share-btn-inner
-  .svg_wrapper {
-  display: inline;
-}
-.confirmation-page
-  .share_wrapper
-  .share_section
-  .invitation_section
-  .share-btn-inner
-  .share-input {
+.confirmation-page .share-input {
   width: 300px;
   text-align: left;
   background-color: #fff;
+  outline: none;
+  border: none;
+  padding: 5px;
 }
-.confirmation-page
-  .share_wrapper
-  .share_section
-  .invitation_section
-  .share-text {
+.confirmation-page .share-text {
   width: 100%;
   padding-top: 8px;
   display: block;
   font-size: 13px;
   font-weight: 600;
 }
-.confirmation-page .share_wrapper .pricing-section_wrapper {
+.confirmation-page .pricing-section_wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   padding: 15px;
@@ -197,19 +144,59 @@
   border: 1px solid #dcdcdc;
   margin: 10px 0;
 }
-.confirmation-page .share_wrapper .pricing-section_wrapper.free_price {
-  color: #fff;
-  background: #e9835b;
-  border: 1px solid #eb7b4a;
-}
-.confirmation-page .share_wrapper .pricing-section_label {
+.confirmation-page .pricing-section_label {
   font-weight: 600;
 }
-.confirmation-page .share_wrapper .pricing-section_sublabel {
+.confirmation-page .pricing-section_sublabel {
   font-weight: 100;
   font-size: 14px;
 }
-.confirmation-page .share_wrapper .pricing-section_price {
+.confirmation-page .pricing-section_price {
   text-align: right;
   font-weight: 600;
 }
+.confirmation-page .share-by-link-copy-icon {
+  cursor: pointer;
+  color: #fff;
+  background-color: #32325d;
+  transition: all 150ms ease;
+  padding: 10px;
+  border-radius: 4px;
+  margin-left: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.confirmation-page .share-by-link-copy-icon:hover {
+  background-color: #505050;
+}
+.confirmation-page .share-by-link-copy-icon img {
+  width: 14px;
+}
+.confirmation-page .social-media-sharing {
+  background-color: #000;
+  color: #fff;
+  padding: 10px;
+  text-align: center;
+  cursor: pointer;
+}
+.confirmation-page .share-icon {
+  display: inline-flex;
+  border-radius: 4px;
+}
+@media only screen and (max-width: 1050px) {
+  .confirmation-page .share_wrapper {
+    display: grid;
+    grid-template-columns: unset;
+    column-gap: 0;
+    margin: 15px;
+  }
+}
+@media only screen and (max-width: 480px) {
+  .confirmation-page .social-media-btns {
+    grid-template-columns: unset;
+  }
+  .confirmation-page .share-input {
+    width: 250px;
+  }
+}