tf-checkout-react 1.0.103 → 1.0.106

package/src/components/confirmationContainer/style.css

@@ -1,202 +1,202 @@
-.confirmation-page {
-  max-width: 1024px;
-  margin: 0 auto;
-}
-.confirmation-page button {
-  margin-top: inherit;
-}
-.confirmation-page .strong-text {
-  font-weight: 700;
-}
-.confirmation-page .title {
-  font-size: 24px;
-  font-weight: 600;
-  color: #333;
-}
-.confirmation-page .share-message-section {
-  display: flex;
-  flex-direction: column;
-  padding: 15px;
-  background: #dff0d8;
-  color: #2c7221;
-  border-radius: 5px;
-  border: 1px solid #d6e9c6;
-  margin: 20px 0;
-}
-.confirmation-page .main {
-  font-weight: 700;
-  font-size: 15px;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
-}
-.confirmation-page .helper {
-  font-size: 14px;
-  margin-top: 5px;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
-}
-.confirmation-page .referral_text_image_section {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  margin: 20px 0;
-}
-.confirmation-page .referral_text_section {
-  margin: 10px;
-}
-.confirmation-page .referral_title_text {
-  color: #f08057;
-  font-size: 28px;
-  padding-bottom: 10px;
-}
-.confirmation-page .referral_text {
-  font-size: 18px;
-}
-.confirmation-page .referral_text_image_section img {
-  max-width: 200px;
-  margin: 10px;
-}
-.confirmation-page .share_wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  column-gap: 5rem;
-  margin: 10px;
-}
-.confirmation-page .invitation_title {
-  font-size: 22px;
-  padding-bottom: 12px;
-  padding-top: 12px;
-}
-.confirmation-page .share_section {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  margin: 0 -10px;
-}
-.confirmation-page .invitation_section {
-  flex: 1 1;
-  padding: 0 5px;
-}
-.confirmation-page .share_buttons {
-  display: grid;
-  flex-wrap: wrap;
-  margin: 0 -7px;
-}
-.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 .sharing-btn {
-  min-width: 130px;
-  flex: 1 1;
-  background-color: #000000;
-}
-.confirmation-page .sharing-btn a {
-  text-decoration: none;
-}
-.confirmation-page .share-by-link {
-  background: #000;
-  color: #fff;
-  padding: 10px;
-}
-.confirmation-page .share-by-link.label {
-  text-align: left;
-  padding: 0;
-  margin: 0;
-}
-.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-input {
-  width: 300px;
-  text-align: left;
-  background-color: #fff;
-  outline: none;
-  border: none;
-  padding: 5px;
-}
-.confirmation-page .share-text {
-  width: 100%;
-  padding-top: 8px;
-  display: block;
-  font-size: 13px;
-  font-weight: 600;
-}
-.confirmation-page .pricing-section_wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  padding: 15px;
-  background: #e3e3e3;
-  border: 1px solid #dcdcdc;
-  margin: 10px 0;
-}
-.confirmation-page .pricing-section_label {
-  font-weight: 600;
-}
-.confirmation-page .pricing-section_sublabel {
-  font-weight: 100;
-  font-size: 14px;
-}
-.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;
-  }
-}
+.confirmation-page {
+  max-width: 1024px;
+  margin: 0 auto;
+}
+.confirmation-page button {
+  margin-top: inherit;
+}
+.confirmation-page .strong-text {
+  font-weight: 700;
+}
+.confirmation-page .title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+}
+.confirmation-page .share-message-section {
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+  background: #dff0d8;
+  color: #2c7221;
+  border-radius: 5px;
+  border: 1px solid #d6e9c6;
+  margin: 20px 0;
+}
+.confirmation-page .main {
+  font-weight: 700;
+  font-size: 15px;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
+}
+.confirmation-page .helper {
+  font-size: 14px;
+  margin-top: 5px;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
+}
+.confirmation-page .referral_text_image_section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 20px 0;
+}
+.confirmation-page .referral_text_section {
+  margin: 10px;
+}
+.confirmation-page .referral_title_text {
+  color: #f08057;
+  font-size: 28px;
+  padding-bottom: 10px;
+}
+.confirmation-page .referral_text {
+  font-size: 18px;
+}
+.confirmation-page .referral_text_image_section img {
+  max-width: 200px;
+  margin: 10px;
+}
+.confirmation-page .share_wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  column-gap: 5rem;
+  margin: 10px;
+}
+.confirmation-page .invitation_title {
+  font-size: 22px;
+  padding-bottom: 12px;
+  padding-top: 12px;
+}
+.confirmation-page .share_section {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: 0 -10px;
+}
+.confirmation-page .invitation_section {
+  flex: 1 1;
+  padding: 0 5px;
+}
+.confirmation-page .share_buttons {
+  display: grid;
+  flex-wrap: wrap;
+  margin: 0 -7px;
+}
+.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 .sharing-btn {
+  min-width: 130px;
+  flex: 1 1;
+  background-color: #000000;
+}
+.confirmation-page .sharing-btn a {
+  text-decoration: none;
+}
+.confirmation-page .share-by-link {
+  background: #000;
+  color: #fff;
+  padding: 10px;
+}
+.confirmation-page .share-by-link.label {
+  text-align: left;
+  padding: 0;
+  margin: 0;
+}
+.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-input {
+  width: 300px;
+  text-align: left;
+  background-color: #fff;
+  outline: none;
+  border: none;
+  padding: 5px;
+}
+.confirmation-page .share-text {
+  width: 100%;
+  padding-top: 8px;
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+}
+.confirmation-page .pricing-section_wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: 15px;
+  background: #e3e3e3;
+  border: 1px solid #dcdcdc;
+  margin: 10px 0;
+}
+.confirmation-page .pricing-section_label {
+  font-weight: 600;
+}
+.confirmation-page .pricing-section_sublabel {
+  font-weight: 100;
+  font-size: 14px;
+}
+.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;
+  }
+}

package/src/components/countdown/index.tsx

@@ -1,89 +1,98 @@
-import React, { useEffect, useState } from 'react'
-import moment from 'moment-timezone'
-import './style.css'
-
-interface CountdownTypes {
-  startDate: string;
-  timezone?: string;
-  title?: string;
-  message?: string;
-  callback?: () => void;
-}
-
-const isTimeExpired = (startDate: string, timezone: string) => {
-  return !moment(startDate).isAfter(moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss'))
-}
-
-function Countdown({
-  startDate,
-  timezone = moment.tz.guess(),
-  title = '',
-  message = '',
-  callback = () => {}
-}: CountdownTypes) {
-  const [duration, setDuration] = useState('')
-  const [timeExpired, setTimeExpired] = useState(false)
-
-  useEffect(() => {
-    setTimeExpired(isTimeExpired(startDate, timezone))
-  }, [])
-
-  useEffect(() => {
-    let timer: any;
-
-    if(!timeExpired) {
-      timer = setInterval(() => {
-        if(isTimeExpired(startDate, timezone)) {
-          clearInterval(timer)
-          setTimeExpired(true)
-          callback()
-        }
-
-        const currentDate = moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss')
-        const diffTime = moment(startDate).diff(currentDate)
-        const duration = moment.duration(diffTime)
-        const dateArr: any = {
-          year: duration.years(),
-          month: duration.months(),
-          day: duration.days(),
-          hour: duration.hours(),
-          minute: duration.minutes(),
-          second: duration.seconds(),
-        }
-  
-        let timeLeft = ''
-  
-        for(let date in dateArr) {
-          const unit = dateArr[date] === 1 ? date : date + 's'
-          const val = String(dateArr[date]).length === 1 ? '0' + dateArr[date] : dateArr[date] 
-          if(timeLeft) {
-            timeLeft += `, ${val} ${unit}`
-          } else if(dateArr[date]) {
-            timeLeft += `${val} ${unit}`
-          }
-        }
-        
-        setDuration(timeLeft)
-      }, 1000)
-    }
-    return () => {
-      clearInterval(timer)
-    }
-  }, [timeExpired])
-
-  return (
-    <>
-     {!timeExpired && duration && (
-      <div className='countdown'>
-        <div>
-          <p className='title'>{title}</p>
-          <p>{duration}</p>
-        </div>
-        <p className='message'>{message}</p>
-      </div>
-     )}
-    </>
-  )
-}
-
-export default Countdown
+import React, { useEffect, useState } from 'react'
+import moment from 'moment-timezone'
+import './style.css'
+
+interface CountdownTypes {
+  startDate: string;
+  timezone?: string;
+  title?: string;
+  message?: string;
+  disableLeadingZero?: boolean;
+  callback?: () => void;
+  isLoggedIn?: boolean;
+}
+
+const isTimeExpired = (startDate: string, timezone: string) => {
+  return !moment(startDate).isAfter(moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss'))
+}
+
+function Countdown({
+  startDate,
+  timezone = moment.tz.guess(),
+  title = '',
+  message = '',
+  disableLeadingZero = false,
+  callback = () => {},
+  isLoggedIn
+}: CountdownTypes) {
+  const [duration, setDuration] = useState('')
+  const [timeExpired, setTimeExpired] = useState(false)
+
+  useEffect(() => {
+    setTimeExpired(isTimeExpired(startDate, timezone))
+  }, [])
+
+  useEffect(() => {
+    let timer: any;
+
+    if(!timeExpired) {
+      timer = setInterval(() => {
+        if(isTimeExpired(startDate, timezone)) {
+          clearInterval(timer)
+          setTimeExpired(true)
+          callback()
+          return
+        }
+
+        const currentDate = moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss')
+        const diffTime = moment(startDate).diff(currentDate)
+        const duration = moment.duration(diffTime)
+        const dateArr: any = {
+          year: duration.years(),
+          month: duration.months(),
+          day: duration.days(),
+          hour: duration.hours(),
+          minute: duration.minutes(),
+          second: duration.seconds(),
+        }
+        let timeLeft = ''
+  
+        for(let date in dateArr) {
+          const unit = dateArr[date] === 1 ? date : date + 's'
+          let val = dateArr[date]
+
+          if (!disableLeadingZero && String(dateArr[date]).length === 1) {
+            val = '0' + dateArr[date]
+          }
+
+          if(timeLeft) {
+            timeLeft += `, ${val} ${unit}`
+          } else if(dateArr[date]) {
+            timeLeft += `${val} ${unit}`
+          }
+        }
+        
+        setDuration(timeLeft)
+      }, 1000)
+    }
+    return () => {
+      clearInterval(timer)
+    }
+  }, [timeExpired])
+
+  return (
+    <>
+     {!timeExpired && duration && (
+      <div className={`countdown ${!isLoggedIn ? 'countdown-on-bottom' : ''}`}>
+        <div>
+          <p className='title'>{title}</p>
+          <p>{duration}</p>
+        </div>
+        <p className='message'>{message}</p>
+      </div>
+     )}
+    </>
+  )
+}
+
+export default Countdown

package/src/components/countdown/style.css

@@ -1,10 +1,10 @@
-.countdown p {
-  margin: 0;
-}
-.countdown .title {
-  font-weight: bold;
-}
-.countdown .message {
-  margin-top: 20px;
-  font-weight: bold;
+.countdown p {
+  margin: 0;
+}
+.countdown .title {
+  font-weight: bold;
+}
+.countdown .message {
+  margin-top: 20px;
+  font-weight: bold;
 }

package/src/components/index.ts

@@ -1,7 +1,7 @@
-export { BillingInfoContainer } from './billing-info-container'
-export { ConfirmationContainer } from './confirmationContainer'
-export { PaymentContainer } from './paymentContainer'
-export { TicketsContainer } from './ticketsContainer'
-export { MyTicketsContainer } from './myTicketsContainer'
-export { OrderDetailsContainer } from './orderDetailsContainer'
-export { TicketResaleContainer } from './ticketResale'
+export { BillingInfoContainer } from './billing-info-container'
+export { ConfirmationContainer } from './confirmationContainer'
+export { PaymentContainer } from './paymentContainer'
+export { TicketsContainer } from './ticketsContainer'
+export { MyTicketsContainer } from './myTicketsContainer'
+export { OrderDetailsContainer } from './orderDetailsContainer'
+export { TicketResaleContainer } from './ticketResale'