tf-checkout-react 1.0.103 → 1.0.106

package/src/components/ticketsContainer/style.css

@@ -1,181 +1,181 @@
-body {
-  margin: 0;
-  padding: 0;
-}
-.get-tickets-page {
-  width: 100%;
-}
-.event-detail__tier {
-  padding: 17px 35px 20px;
-  background-color: #fff;
-}
-.event-detail__tier-name {
-  font-family: Inter-Bold;
-  font-weight: 700;
-  line-height: 1.3;
-  text-transform: uppercase;
-  padding-right: 20%;
-  color: black;
-  font-size: 0.85rem;
-  font-family: 'Bebas Neue';
-  letter-spacing: 0.2em;
-  margin-top: 16px;
-  margin-bottom: 8px;
-}
-.event-detail__tier-status {
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 8px;
-}
-.event-detail__tier-status.ticket-button {
-  color: #fff;
-  background-color: #212529;
-  border-color: #212529;
-  border-radius: 0;
-  border: 3px solid black;
-  letter-spacing: 0.2em;
-  font-weight: 700;
-  margin-bottom: 10px;
-  line-height: 1.5;
-  cursor: pointer;
-  width: 200px;
-}
-
-.event-tickets-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.event-detail__tier-status.ticket-button.true {
-  background-color: #c1c3c6;
-  border-color: #afb0b1;
-}
-.event-detail__tier-price {
-  font-family: Inter-Bold;
-  font-size: 1.5rem;
-  line-height: 1;
-  color: #000;
-  text-align: center;
-}
-
-.event-detail__tier-price p {
-  margin: 0;
-}
-
-.event-detail__tier-price .fees {
-  font-size: 14px;
-  text-align: left;
-  margin-top: 4px;
-}
-
-.event-detail__tier-price .old-price {
-  margin-bottom: 5px;
-  color: #f00;
-  text-decoration: line-through;
-  font-size: 1.3rem;
-}
-
-.alert-info {
-  border: 1px solid #fbeed5;
-  padding: 8px 15px;
-  background-color: #d9edf7;
-  border-color: #bce8f1;
-  color: #3a87ad;
-  font-size: 1em;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  border-radius: 4px;
-  margin: 0px 35px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.alert-info svg {
-  margin-right: 4px;
-}
-
-.event-detail__tier-state {
-  font-family: Inter-Bold;
-  font-weight: 300;
-  font-size: 0.75rem;
-  line-height: 1;
-  color: #30bc9d;
-  text-align: right;
-  text-transform: uppercase;
-}
-
-.event-detail__tier-state .ticket-not-started-message {
-  color: #000000;
-  text-transform: initial;
-  width: 50px;
-  text-align: left;
-}
-
-.promo-code-block input {
-  font-size: 14px;
-  padding: 1px 8px;
-}
-
-.book-button {
-  background-color: #212529;
-  display: block;
-  text-align: center;
-  width: 100%;
-  height: 50px;
-  font-size: 26px;
-  color: #fff;
-  cursor: pointer;
-  background-color: #212529;
-  border-color: #212529;
-  border-radius: 0;
-  border: 3px solid black;
-  letter-spacing: 0.2em;
-  font-weight: 700;
-  line-height: 1.5;
-  margin: 25px auto 10px auto;
-}
-.book-button:hover {
-  background-color: #505050;
-  border-color: #505050;
-}
-.loader-container {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.get-tickets-paper::-webkit-scrollbar {
-  width: 5px;
-}
-.get-tickets-paper::-webkit-scrollbar-track {
-  background: #f1f1f1;
-}
-.get-tickets-paper::-webkit-scrollbar-thumb {
-  background: #888;
-}
-.get-tickets-paper::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-.get-tickets .get-tickets__selectbox {
-  width: 100%;
-}
-
-.disabled {
-  user-select: none;
-  pointer-events: none;
-}
-
-.hidden {
-  display: none;
-}
-
-.event-closed-message {
-  font-family: 'Bebas Neue';
-  letter-spacing: 0.5px;
-}
+body {
+  margin: 0;
+  padding: 0;
+}
+.get-tickets-page {
+  width: 100%;
+}
+.event-detail__tier {
+  padding: 17px 35px 20px;
+  background-color: #fff;
+}
+.event-detail__tier-name {
+  font-family: Inter-Bold;
+  font-weight: 700;
+  line-height: 1.3;
+  text-transform: uppercase;
+  padding-right: 20%;
+  color: black;
+  font-size: 0.85rem;
+  font-family: 'Bebas Neue';
+  letter-spacing: 0.2em;
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+.event-detail__tier-status {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+}
+.event-detail__tier-status.ticket-button {
+  color: #fff;
+  background-color: #212529;
+  border-color: #212529;
+  border-radius: 0;
+  border: 3px solid black;
+  letter-spacing: 0.2em;
+  font-weight: 700;
+  margin-bottom: 10px;
+  line-height: 1.5;
+  cursor: pointer;
+  width: 200px;
+}
+
+.event-tickets-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.event-detail__tier-status.ticket-button.true {
+  background-color: #c1c3c6;
+  border-color: #afb0b1;
+}
+.event-detail__tier-price {
+  font-family: Inter-Bold;
+  font-size: 1.5rem;
+  line-height: 1;
+  color: #000;
+  text-align: center;
+}
+
+.event-detail__tier-price p {
+  margin: 0;
+}
+
+.event-detail__tier-price .fees {
+  font-size: 14px;
+  text-align: left;
+  margin-top: 4px;
+}
+
+.event-detail__tier-price .old-price {
+  margin-bottom: 5px;
+  color: #f00;
+  text-decoration: line-through;
+  font-size: 1.3rem;
+}
+
+.alert-info {
+  border: 1px solid #fbeed5;
+  padding: 8px 15px;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+  color: #3a87ad;
+  font-size: 1em;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  border-radius: 4px;
+  margin: 0px 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.alert-info svg {
+  margin-right: 4px;
+}
+
+.event-detail__tier-state {
+  font-family: Inter-Bold;
+  font-weight: 300;
+  font-size: 0.75rem;
+  line-height: 1;
+  color: #30bc9d;
+  text-align: right;
+  text-transform: uppercase;
+}
+
+.event-detail__tier-state .ticket-not-started-message {
+  color: #000000;
+  text-transform: initial;
+  width: 50px;
+  text-align: left;
+}
+
+.promo-code-block input {
+  font-size: 14px;
+  padding: 1px 8px;
+}
+
+.book-button {
+  background-color: #212529;
+  display: block;
+  text-align: center;
+  width: 100%;
+  height: 50px;
+  font-size: 26px;
+  color: #fff;
+  cursor: pointer;
+  background-color: #212529;
+  border-color: #212529;
+  border-radius: 0;
+  border: 3px solid black;
+  letter-spacing: 0.2em;
+  font-weight: 700;
+  line-height: 1.5;
+  margin: 25px auto 10px auto;
+}
+.book-button:hover {
+  background-color: #505050;
+  border-color: #505050;
+}
+.loader-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.get-tickets-paper::-webkit-scrollbar {
+  width: 5px;
+}
+.get-tickets-paper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+.get-tickets-paper::-webkit-scrollbar-thumb {
+  background: #888;
+}
+.get-tickets-paper::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+.get-tickets .get-tickets__selectbox {
+  width: 100%;
+}
+
+.disabled {
+  user-select: none;
+  pointer-events: none;
+}
+
+.hidden {
+  display: none;
+}
+
+.event-closed-message {
+  font-family: 'Bebas Neue';
+  letter-spacing: 0.5px;
+}

package/src/components/ticketsContainer/utils.ts

@@ -1,11 +1,11 @@
-export const getTicketSelectOptions = (
-  maxCount: number = 10,
-  minCount: number = 1,
-  multiplier: number = 1
-) => {
-  const options = [{ label: 0, value: 0 }]
-  for (let i = minCount; i <= Math.min(50, maxCount); i += multiplier) {
-    options.push({ label: i, value: i })
-  }
-  return options
-}
+export const getTicketSelectOptions = (
+  maxCount: number = 10,
+  minCount: number = 1,
+  multiplier: number = 1
+) => {
+  const options = [{ label: 0, value: 0 }]
+  for (let i = minCount; i <= Math.min(50, maxCount); i += multiplier) {
+    options.push({ label: i, value: i })
+  }
+  return options
+}

package/src/components/timerWidget/index.tsx

@@ -1,70 +1,87 @@
-import React, { useState } from 'react'
-import Countdown from 'react-countdown'
-import { showZero } from '../../utils/showZero'
-import './style.css'
-
-export interface ITimerWidgetPage {
-  expires_at: number;
-  buyLoading?: boolean;
-  onCountdownFinish?: () => void;
-}
-
-export interface IRenderer {
-  minutes: number;
-  seconds: number;
-  completed: number;
-  handleCountdownFinish: () => void;
-}
-
-const TimerWidget = ({
-  expires_at,
-  buyLoading,
-  onCountdownFinish = () => {},
-}: ITimerWidgetPage) => {
-  const [showTimer, setShowTimer] = useState(true)
-
-  const handleCountdownFinish = () => {
-    setShowTimer(false)
-    if (!buyLoading) {
-      onCountdownFinish()
-    }
-  }
-
-  const renderer = ({
-    minutes,
-    seconds,
-    completed,
-    handleCountdownFinish,
-  }: IRenderer) => {
-    if (completed) {
-      handleCountdownFinish()
-      return null
-    }
-    return (
-      <span>
-        {showZero(minutes)}:{showZero(seconds)}
-      </span>
-    )
-  }
-
-  return showTimer && !!expires_at ? (
-    <div className="timer">
-      <div className="toast-message">
-        <p>Please complete your purchase before the timer reaches zero.</p>
-        <p className="countdown">
-          <Countdown
-            date={Date.now() + expires_at * 1000}
-            renderer={(props: any) =>
-              renderer({
-                ...props,
-                handleCountdownFinish,
-              })
-            }
-          />
-        </p>
-      </div>
-    </div>
-  ) : null
-}
-
-export default TimerWidget
+import React, { useState, memo } from 'react'
+import Countdown from 'react-countdown'
+import { showZero } from '../../utils/showZero'
+import { getImage } from '../../utils/getImage'
+import SVG from 'react-inlinesvg'
+import './style.css'
+
+export interface ITimerWidgetPage {
+  expires_at: number;
+  buyLoading?: boolean;
+  onCountdownFinish?: () => void;
+}
+
+export interface IRenderer {
+  minutes: number;
+  seconds: number;
+  completed: number;
+  handleCountdownFinish: () => void;
+}
+
+const TimerWidget = ({
+  expires_at,
+  buyLoading,
+  onCountdownFinish = () => {},
+}: ITimerWidgetPage) => {
+  const [showTimer, setShowTimer] = useState(true)
+
+  const handleCountdownFinish = () => {
+    setShowTimer(false)
+    if (!buyLoading) {
+      onCountdownFinish()
+    }
+  }
+
+  const renderer = ({
+    minutes,
+    seconds,
+    completed,
+    handleCountdownFinish,
+  }: IRenderer) => {
+    if (completed) {
+      handleCountdownFinish()
+      return null
+    }
+    return (
+      <span>
+        {showZero(minutes)}:{showZero(seconds)}
+      </span>
+    )
+  }
+
+  const hideTimer = () => {
+    const timerRl: HTMLElement | null =  document.querySelector('.timer')
+    if(timerRl) {
+      timerRl.style.visibility = "hidden";
+    }
+  }
+
+  return showTimer && !!expires_at ? (
+    <div className="timer">
+      <div className='close-icon' onClick={hideTimer}>
+        <SVG
+          src={getImage('cross.svg')}
+          width='10'
+          height='10'
+          fill='#fff'
+        />
+      </div>
+      <div className="toast-message">
+        <p>Please complete your purchase before the timer reaches zero.</p>
+        <p className="countdown">
+          <Countdown
+            date={Date.now() + expires_at * 1000}
+            renderer={(props: any) =>
+              renderer({
+                ...props,
+                handleCountdownFinish,
+              })
+            }
+          />
+        </p>
+      </div>
+    </div>
+  ) : null
+}
+
+export default memo(TimerWidget)

package/src/components/timerWidget/style.css

@@ -1,26 +1,34 @@
-.timer {
-  position: absolute;
-  pointer-events: auto;
-  background-color: #000000;
-  overflow: hidden;
-  margin: 0 0 6px;
-  padding: 15px 15px 15px 50px;
-  width: 300px;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  background-position: 15px center;
-  background-repeat: no-repeat;
-  -moz-box-shadow: 0 0 12px #999;
-  -webkit-box-shadow: 0 0 12px #999;
-  box-shadow: 0 0 12px #999;
-  max-width: 300px;
-  color: #fff;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=);
-  right: 15px;
-}
-
-.timer .countdown {
-  font-weight: bold;
-  margin-top: 10px;
-}
+.timer {
+  position: absolute;
+  pointer-events: auto;
+  background-color: #000000;
+  overflow: hidden;
+  margin: 0 0 6px;
+  padding: 15px 15px 15px 50px;
+  width: 300px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background-position: 15px center;
+  background-repeat: no-repeat;
+  -moz-box-shadow: 0 0 12px #999;
+  -webkit-box-shadow: 0 0 12px #999;
+  box-shadow: 0 0 12px #999;
+  max-width: 300px;
+  color: #fff;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=);
+  right: 15px;
+}
+
+.timer .close-icon {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  display: flex;
+  cursor: pointer;
+}
+
+.timer .countdown {
+  font-weight: bold;
+  margin-top: 10px;
+}