tf-checkout-react 1.4.26 → 1.5.0

package/dist/utils/isValidNumber.d.ts

@@ -0,0 +1 @@
+export declare const isValidNumber: (value?: string | number | undefined) => boolean;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.26",
+  "version": "1.5.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/api/index.ts

@@ -164,6 +164,34 @@ export const getCheckoutPageConfigs = async (): Promise<ResponseConfigs> => {
   return response.data
 }
 
+export const confirmPreRegistration = async (
+  eventId: string | number,
+  data: IConfirmPreRegistrationRequestData
+) => {
+  const response = await publicRequest.post(
+    `v1/event/${eventId}/pre-registration/confirm`,
+    {
+      data: {
+        attributes: data,
+      },
+    }
+  )
+  return response.data
+}
+
+// seat map <--start-->
+
+// const makeId = (length = 20) => {
+//   let result = ''
+//   const characters =
+//     'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+//   const charactersLength = characters.length
+//   for (let i = 0; i < length; i++) {
+//     result += characters.charAt(Math.floor(Math.random() * charactersLength))
+//   }
+//   return result
+// }
+
 export const getSeatMapData = async (
   eventId: string | number
 ): Promise<SeatMapDataResponse> => {

package/src/api/preRegistrationComplete.ts

@@ -0,0 +1,37 @@
+import { AxiosRequestConfig, AxiosResponse } from 'axios'
+
+import { publicRequest } from '../api/publicRequest'
+
+export const getPreRegistrationInfluancers = async (
+  data: IInfluancersRequestData
+): Promise<IInfluancersResponseData> => {
+  const response: AxiosResponse<IInfluancersResponseData, AxiosRequestConfig> =
+    await publicRequest.get(`v1/event/${data.eventId}/pre-registration/influencers`)
+  return response.data
+}
+
+export const getPreRegistrationShareOptions = async (
+  data: IShareOptionsRequestData
+): Promise<IShareOptionsResponseData> => {
+  const response: AxiosResponse<IShareOptionsResponseData, AxiosRequestConfig> =
+    await publicRequest.get(`/v1/pre-registration/${data.hash}/confirmation-page`)
+  return response.data
+}
+
+export const submitShareAction = async (
+  data: ISubmitShareActionRequestData
+): Promise<ISubmitShareActionResponseData> => {
+  const { eventActionId, accessToken, hash } = data
+
+  const response: AxiosResponse<ISubmitShareActionResponseData, AxiosRequestConfig> =
+    await publicRequest.post(`/v1/pre-registration/${hash}/submit-action`, {
+      data: {
+        attributes: {
+          phase: 'pre-registration',
+          eventActionId: Number(eventActionId),
+          accessToken,
+        },
+      },
+    })
+  return response.data
+}

package/src/assets/images/instagram.svg

@@ -0,0 +1,5 @@
+<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32px" height="32px">
+    <circle cx="32" cy="32" r="31" fill='#A01173' />
+    <path
+        d="M 23.8513 12.0905 C 17.3957 12.0905 12.0905 17.3886 12.0905 23.8513 L 12.0905 40.3279 C 12.0905 46.7835 17.3886 52.0887 23.8513 52.0887 L 40.3279 52.0887 C 46.7835 52.0887 52.0887 46.7906 52.0887 40.3279 L 52.0887 23.8513 C 52.0887 17.3957 46.7906 12.0905 40.3279 12.0905 Z M 23.8513 15.7267 L 40.3279 15.7267 C 44.8234 15.7267 48.4525 19.3558 48.4525 23.8513 L 48.4525 40.3279 C 48.4525 44.8234 44.8234 48.4525 40.3279 48.4525 L 23.8513 48.4525 C 19.3558 48.4525 15.7267 44.8234 15.7267 40.3279 L 15.7267 23.8513 C 15.7267 19.3558 19.3558 15.7267 23.8513 15.7267 Z M 42.8278 19.7038 C 41.9116 19.7038 41.1801 20.4353 41.1801 21.3514 C 41.1801 22.2676 41.9116 22.9991 42.8278 22.9991 C 43.7439 22.9991 44.4754 22.2676 44.4754 21.3514 C 44.4754 20.4353 43.7439 19.7038 42.8278 19.7038 Z M 32.0896 21.181 C 26.0885 21.181 21.181 26.0885 21.181 32.0896 C 21.181 38.0907 26.0885 42.9982 32.0896 42.9982 C 38.0907 42.9982 42.9982 38.0907 42.9982 32.0896 C 42.9982 26.0885 38.0907 21.181 32.0896 21.181 Z M 32.0896 24.8172 C 36.1306 24.8172 39.362 28.0486 39.362 32.0896 C 39.362 36.1306 36.1306 39.362 32.0896 39.362 C 28.0486 39.362 24.8172 36.1306 24.8172 32.0896 C 24.8172 28.0486 28.0486 24.8172 32.0896 24.8172 Z" />
+</svg>

package/src/assets/images/spotify.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0"?><svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32px"
+    height="32px">
+    <circle cx="32" cy="32" r="31" fill='#60BD82' />
+    <path
+        d="M 11 25 z M 45.3205 48.134 c -0.4019 0.6035 -1.0638 0.9289 -1.7382 0.9289 c -0.3977 0 -0.7996 -0.1126 -1.1556 -0.3504 C 38.9877 46.4194 33.1556 44.8897 28.2885 44.8911 c -5.1647 0.0028 -9.0361 1.271 -9.075 1.2835 c -1.0902 0.3699 -2.2736 -0.2253 -2.638 -1.3183 s 0.2267 -2.275 1.3197 -2.638 c 0.1836 -0.0612 4.5598 -1.4949 10.3933 -1.4977 C 33.1556 40.718 39.925 42.0307 44.742 45.2416 C 45.7015 45.8812 45.9602 47.1759 45.3205 48.134 z M 49.4812 39.5957 c -0.4519 0.7259 -1.2321 1.125 -2.0289 1.125 c -0.4311 0 -0.8677 -0.1154 -1.2599 -0.3616 c -6.2354 -3.8853 -12.6433 -4.7072 -18.164 -4.6585 c -6.2327 0.0556 -11.2166 1.2446 -11.3014 1.2696 c -1.2613 0.3588 -2.5879 -0.3782 -2.9481 -1.6451 c -0.3602 -1.2696 0.3782 -2.5893 1.6465 -2.9481 c 0.3852 -0.1099 5.3594 -1.3336 12.1691 -1.3906 c 6.209 -0.0515 13.9463 0.8483 21.1246 5.3204 C 49.8358 37.0023 50.1793 38.4763 49.4812 39.5957 z M 53.6321 29.6112 C 53.1134 30.4929 52.1845 30.9838 51.2306 30.9838 c -0.4784 0 -0.9623 -0.1238 -1.4059 -0.3824 c -7.2673 -4.2664 -16.1031 -5.1716 -22.2357 -5.18 c -0.0292 0 -0.0584 0 -0.0876 0 c -7.4161 0 -13.1272 1.3044 -13.1843 1.3183 c -1.4991 0.3435 -2.9912 -0.5827 -3.3388 -2.0789 c -0.3476 -1.4949 0.5799 -2.9884 2.0748 -3.3374 C 13.3103 21.2635 19.4123 19.859 27.5014 19.859 c 0.032 0 0.064 0 0.096 0 c 6.8209 0.0097 16.7025 1.0471 25.0447 5.9448 C 53.9659 26.5825 54.4095 28.2874 53.6321 29.6112 z" />
+</svg>

package/src/components/billing-info-container/index.tsx

@@ -75,8 +75,6 @@ export interface IBillingInfoPage {
   onGetStatesError?: (e: AxiosError) => void;
   onGetProfileDataSuccess?: (res: any) => void;
   onGetProfileDataError?: (e: AxiosError) => void;
-  onAuthorizeSuccess?: () => void;
-  onAuthorizeError?: (e: AxiosError) => void;
   onLogin?: () => void;
   onLoginSuccess?: () => void;
   onErrorClose?: () => void;
@@ -219,8 +217,6 @@ export const BillingInfoContainer = React.memo(
     onGetStatesError = _identity,
     onGetProfileDataSuccess = _identity,
     onGetProfileDataError = _identity,
-    onAuthorizeSuccess = _identity,
-    onAuthorizeError = _identity,
     onLogin,
     onLoginSuccess = _identity,
     isLoggedIn: pIsLoggedIn = false,
@@ -1068,8 +1064,6 @@ export const BillingInfoContainer = React.memo(
             }}
             alreadyHasUser={alreadyHasUser}
             userExpired={userExpired}
-            onAuthorizeSuccess={onAuthorizeSuccess}
-            onAuthorizeError={onAuthorizeError}
             onGetProfileDataSuccess={(data: any) => {
               fetchCart()
               onGetProfileDataSuccess(data)
@@ -1107,7 +1101,7 @@ export const BillingInfoContainer = React.memo(
             onClose={() => {
               setShowModalForgotPassword(false)
             }}
-            onLogin={() => {
+            onLoginButtonClick={() => {
               setShowModalForgotPassword(false)
               setShowModalLogin(true)
             }}

package/src/components/common/CopyField.tsx

@@ -0,0 +1,53 @@
+import _get from 'lodash/get'
+import _identity from 'lodash/identity'
+import React, { useRef } from 'react'
+
+interface ICopyFieldProps {
+  copyValue: string;
+  onLinkCopied?: () => void;
+  copyIconSrc?: string;
+  copyTitle?: string;
+  hasCopyIcon: boolean;
+  classNamePrefix?: string;
+  messageText?: string;
+}
+
+export const CopyField = (props: ICopyFieldProps) => {
+  const {
+    copyValue,
+    copyIconSrc = 'https://img.icons8.com/office/50/000000/copy.png',
+    copyTitle = 'Copy',
+    hasCopyIcon = false,
+    onLinkCopied = _identity,
+    classNamePrefix = '',
+    messageText = '',
+  } = props
+
+  const inputRef = useRef(null)
+
+  return (
+    <>
+      {messageText && <span className="message-text">{messageText}</span>}
+      <input
+        ref={inputRef}
+        className={`${classNamePrefix}_share-input`}
+        defaultValue={copyValue}
+        readOnly={true}
+      />
+      <div
+        className={`${classNamePrefix}_share-by-link-copy-icon`}
+        aria-hidden={true}
+        onClick={() => {
+          navigator.clipboard.writeText(_get(inputRef, 'current.value'))
+          onLinkCopied()
+        }}
+      >
+        {hasCopyIcon ? (
+          <img src={copyIconSrc} alt="copy" />
+        ) : (
+          <span className={`${classNamePrefix}_copy-icon`}>{copyTitle}</span>
+        )}
+      </div>
+    </>
+  )
+}

package/src/components/common/CopyMessageModal.tsx

@@ -0,0 +1,34 @@
+import Modal from '@mui/material/Modal'
+import React from 'react'
+
+interface ICopyMessageModalProps {
+  showCopyModal: boolean;
+  onClose: () => void;
+}
+
+export const CopyMessageModal = (props: ICopyMessageModalProps) => {
+  const { showCopyModal = false, onClose } = props
+  return (
+    <Modal
+      open={showCopyModal}
+      onClose={onClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+      className="success-copy-modal"
+    >
+      <div className="message-copy-success-box">
+        <div className="message-copy-success">
+          <span>
+            Copied to your clipboard! Now paste your link in a Snapchat message,
+          </span>
+          <span>your Instagram bio, Whatsapp, Facebook or a text :)</span>
+        </div>
+        <div className="footer">
+          <button className="footer-button" type="button" onClick={onClose}>
+            OK
+          </button>
+        </div>
+      </div>
+    </Modal>
+  )
+}

package/src/components/common/NativeSelectFeild/index.tsx

@@ -63,7 +63,7 @@ export const NativeSelectField = ({
           id: field.name,
         }}
         native={true}
-        className={theme}
+        className={`Mui-Select ${theme}`}
         MenuProps={{ className: theme }}
         {...field}
         style={customTheme?.input}

package/src/components/common/index.tsx

@@ -4,6 +4,7 @@ export { FormikPhoneNumberField } from './FormikPhoneNumberField'
 export { PhoneNumberField } from './PhoneNumberField'
 export { Loader } from './Loader'
 export { SelectField } from './SelectField'
+export { CopyMessageModal } from './CopyMessageModal'
 export { DatePickerField } from './DatePickerField'
 export { NativeSelectField } from './NativeSelectFeild'
 export { RadioGroupField } from './RadioGroupField'

package/src/components/common/socials.tsx

@@ -0,0 +1,33 @@
+import _identity from 'lodash/identity'
+import React from 'react'
+import SVG from 'react-inlinesvg'
+
+import { getImage } from '../../utils/getImage'
+
+interface IShareButtonProps {
+  url: string;
+  disabled: boolean;
+  children: Node;
+}
+
+export const SpotifyIcon = () => <SVG src={getImage('spotify.svg')} />
+
+export const InstagramIcon = () => <SVG src={getImage('instagram.svg')} />
+
+export const SocialButton = (props: IShareButtonProps) => {
+  const { children, url, disabled } = props
+
+  const handleClick = () => {
+    window.open(url)
+  }
+
+  return (
+    <button
+      className={`react-share__ShareButton ${disabled ? 'disabled-action' : ''}`}
+      type="button"
+      onClick={!disabled ? handleClick : _identity}
+    >
+      {children}
+    </button>
+  )
+}

package/src/components/confirmationContainer/config.ts

@@ -1,72 +1,79 @@
 import {
-  FacebookShareButton,
-  FacebookMessengerShareButton,
-  TwitterShareButton,
-  LinkedinShareButton,
-  PinterestShareButton,
-  VKShareButton,
-  OKShareButton,
-  TelegramShareButton,
-  WhatsappShareButton,
-  RedditShareButton,
-  TumblrShareButton,
-  MailruShareButton,
+  EmailIcon,
   EmailShareButton,
-  LivejournalShareButton,
-  ViberShareButton,
-  WorkplaceShareButton,
-  LineShareButton,
-  PocketShareButton,
-  InstapaperShareButton,
-  WeiboShareButton,
-  HatenaShareButton,
   FacebookIcon,
   FacebookMessengerIcon,
-  TwitterIcon,
+  FacebookMessengerShareButton,
+  FacebookShareButton,
+  HatenaIcon,
+  HatenaShareButton,
+  InstapaperIcon,
+  InstapaperShareButton,
+  LineIcon,
+  LineShareButton,
   LinkedinIcon,
-  PinterestIcon,
-  VKIcon,
+  LinkedinShareButton,
+  LivejournalIcon,
+  LivejournalShareButton,
+  MailruIcon,
+  MailruShareButton,
   OKIcon,
-  TelegramIcon,
-  WhatsappIcon,
+  OKShareButton,
+  PinterestIcon,
+  PinterestShareButton,
+  PocketIcon,
+  PocketShareButton,
   RedditIcon,
+  RedditShareButton,
+  TelegramIcon,
+  TelegramShareButton,
   TumblrIcon,
-  MailruIcon,
-  EmailIcon,
-  LivejournalIcon,
+  TumblrShareButton,
+  TwitterIcon,
+  TwitterShareButton,
   ViberIcon,
-  WorkplaceIcon,
-  LineIcon,
-  PocketIcon,
-  InstapaperIcon,
+  ViberShareButton,
+  VKIcon,
+  VKShareButton,
   WeiboIcon,
-  HatenaIcon,
+  WeiboShareButton,
+  WhatsappIcon,
+  WhatsappShareButton,
+  WorkplaceIcon,
+  WorkplaceShareButton,
 } 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: TwitterIcon },
-  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 },
+  facebook: { component: FacebookShareButton, icon: FacebookIcon },
+  messenger: {
+    component: FacebookMessengerShareButton,
+    icon: FacebookMessengerIcon,
+  },
+  twitter: { component: TwitterShareButton, icon: TwitterIcon },
+  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) {
+export default function(key: string) {
   return config[key]
 }

package/src/components/confirmationContainer/index.tsx

@@ -1,29 +1,29 @@
 /* eslint-disable max-len */
 import './style.css'
 
-import Modal from '@mui/material/Modal'
-import { AxiosError } from 'axios'
+import axios, { AxiosError } from 'axios'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 import _map from 'lodash/map'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { SyntheticEvent, useEffect, useRef, useState } from 'react'
 
 import { getConfirmationData } from '../../api'
 import { usePixel } from '../../hooks/usePixel'
 import { IReferralPromotion } from '../../types'
 import { createMarkup, isBrowser } from '../../utils'
+import { CopyMessageModal } from '../common'
 import SocialButtons from './social-buttons'
 
 export interface IShareButton {
   mainLabel: string;
   subLabel: string;
   platform: string;
-  shareData: {
-    quote?: string;
-    url?: string;
-    title?: string;
-    appId?: string;
-  };
+  shareData: any;
+  points?: number | string;
+  onAfterShare?: (event: SyntheticEvent) => void;
+  eventActionId?: string;
+  oneTimeAction?: boolean;
+  alreadyApplied?: boolean;
 }
 
 export interface IConfirmationLabels {
@@ -103,7 +103,7 @@ export const ConfirmationContainer = ({
           setData(data)
           onGetConfirmationDataSuccess(confirmationDataResponse.data.attributes)
         } catch (error) {
-          onGetConfirmationDataError(error.response)
+          if (axios.isAxiosError(error)) onGetConfirmationDataError(error)
         }
       }
     })()
@@ -137,27 +137,7 @@ export const ConfirmationContainer = ({
   return (
     <div className="confirmation-page">
       {showCopyInfoModal && (
-        <Modal
-          open={showCopyModal}
-          onClose={onClose}
-          aria-labelledby="modal-modal-title"
-          aria-describedby="modal-modal-description"
-          className="success-copy-modal"
-        >
-          <div className="message-copy-success-box">
-            <div className="message-copy-success">
-              <span>
-                Copied to your clipboard! Now paste your link in a Snapchat message,
-              </span>
-              <span>your Instagram bio, Whatsapp, Facebook or a text :)</span>
-            </div>
-            <div className="footer">
-              <button className="footer-button" type="button" onClick={onClose}>
-                OK
-              </button>
-            </div>
-          </div>
-        </Modal>
+        <CopyMessageModal onClose={onClose} showCopyModal={showCopyModal} />
       )}
       {data && (
         <>

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

@@ -1,5 +1,7 @@
-import React from 'react'
+import _identity from 'lodash/identity'
+import React, { ReactElement } from 'react'
 
+import { isValidNumber } from '../../utils/isValidNumber'
 import config from './config'
 import { IShareButton } from './index'
 
@@ -8,22 +10,36 @@ const SocialComponent = ({
   subLabel,
   platform,
   shareData,
+  points,
+  onAfterShare,
+  alreadyApplied,
+  oneTimeAction,
 }: IShareButton) => {
   const Component = config(platform)?.component
   const Icon = config(platform)?.icon
-
+  const isActionDisabled = alreadyApplied && oneTimeAction
   return (
     <>
       {Component && (
-        <Component {...shareData}>
-          <div className="social-media-sharing">
+        <Component {...shareData} disabled={isActionDisabled}>
+          <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">
-              {mainLabel}
-              <br /> {subLabel}
+              <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>
       )}
@@ -37,8 +53,11 @@ interface SocialButtonsTypes {
   appId: string;
   showDefaultShareButtons: boolean;
   shareButtons: IShareButton[];
+  titleText?: string;
+  footerText?: string | ReactElement;
   clientLabel?: string;
   showReferralsInfoText?: boolean;
+  onAfterShare?: (eventActionId: string | undefined) => void;
 }
 
 const SocialButtons = ({
@@ -47,13 +66,18 @@ const SocialButtons = ({
   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,
-  showReferralsInfoText,
+  onAfterShare = _identity,
+  showReferralsInfoText = false,
 }: SocialButtonsTypes) => (
   <>
-    <div className="convenient_buttons">
-      or use one of these convenient buttons:
-    </div>
+    {titleText && <div className="convenient_buttons">{titleText}</div>}
     <div className="social-media-btns">
       {showDefaultShareButtons && (
         <>
@@ -96,25 +120,24 @@ const SocialButtons = ({
         </>
       )}
       {shareButtons.map((shareButton: IShareButton, index: number) => (
-        <SocialComponent key={index} {...shareButton} />
+        <SocialComponent
+          onAfterShare={() => onAfterShare(shareButton.eventActionId)}
+          key={index}
+          {...shareButton}
+        />
       ))}
     </div>
-    {(showDefaultShareButtons || shareButtons.length) && (
-      <p>
-        We <strong>never</strong> post on Facebook without your permission!
-      </p>
-    )}
+    {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
+          {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!
+          so please make sure you ask your friends to buy their own tickets using their
+          own {clientLabel || 'Ticket Fairy'} account!
         </span>
       </p>
     )}

package/src/components/forgotPasswordModal/index.tsx

@@ -10,9 +10,9 @@ import { forgotPassword } from '../../api'
 import { CustomField } from '../common/CustomField'
 import { PoweredBy } from '../common/PoweredBy'
 
-interface IForgotPasswordProps {
+export interface IForgotPasswordProps {
   onClose: () => void;
-  onLogin: () => void;
+  onLoginButtonClick: () => void;
   onForgotPasswordSuccess: (res: any) => void;
   onForgotPasswordError: (e: AxiosError) => void;
   showPoweredByImage?: boolean;
@@ -40,7 +40,7 @@ const Schema = Yup.object().shape({
 
 export const ForgotPasswordModal: FC<IForgotPasswordProps> = ({
   onClose = () => {},
-  onLogin = () => {},
+  onLoginButtonClick = () => {},
   onForgotPasswordSuccess = () => {},
   onForgotPasswordError = () => {},
   showPoweredByImage = false,
@@ -94,7 +94,7 @@ export const ForgotPasswordModal: FC<IForgotPasswordProps> = ({
                   </button>
                 </div>
                 <div className="login">
-                  <span onClick={onLogin}>Back to Log In</span>
+                  <span onClick={onLoginButtonClick}>Back to Log In</span>
                 </div>
                 {showPoweredByImage ? <PoweredBy /> : null}
               </Form>