tf-checkout-react 1.3.6 → 1.3.8

package/package.json

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

package/src/assets/images/xmark.svg

@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 48 48"
+   version="1.1"
+   id="svg15"
+   sodipodi:docname="cross red circle.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata19">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1027"
+     id="namedview17"
+     showgrid="false"
+     inkscape:zoom="4.9166667"
+     inkscape:cx="-11.694915"
+     inkscape:cy="40.271186"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g13" />
+  <defs
+     id="defs7">
+    <linearGradient
+       id="linearGradient828"
+       osb:paint="solid">
+      <stop
+         style="stop-color:#ff0000;stop-opacity:1;"
+         offset="0"
+         id="stop826" />
+    </linearGradient>
+    <linearGradient
+       id="0"
+       gradientUnits="userSpaceOnUse"
+       y1="47.37"
+       x2="0"
+       y2="-1.429">
+      <stop
+         stop-color="#c52828"
+         id="stop2" />
+      <stop
+         offset="1"
+         stop-color="#ff5454"
+         id="stop4" />
+    </linearGradient>
+  </defs>
+  <g
+     transform="matrix(.99999 0 0 .99999-58.37.882)"
+     enable-background="new"
+     id="g13"
+     style="fill-opacity:1">
+    <circle
+       cx="82.37"
+       cy="23.12"
+       r="24"
+       fill="url(#0)"
+       id="circle9"
+       style="fill-opacity:1;fill:#dd3333" />
+    <path
+       d="m87.77 23.725l5.939-5.939c.377-.372.566-.835.566-1.373 0-.54-.189-.997-.566-1.374l-2.747-2.747c-.377-.372-.835-.564-1.373-.564-.539 0-.997.186-1.374.564l-5.939 5.939-5.939-5.939c-.377-.372-.835-.564-1.374-.564-.539 0-.997.186-1.374.564l-2.748 2.747c-.377.378-.566.835-.566 1.374 0 .54.188.997.566 1.373l5.939 5.939-5.939 5.94c-.377.372-.566.835-.566 1.373 0 .54.188.997.566 1.373l2.748 2.747c.377.378.835.564 1.374.564.539 0 .997-.186 1.374-.564l5.939-5.939 5.94 5.939c.377.378.835.564 1.374.564.539 0 .997-.186 1.373-.564l2.747-2.747c.377-.372.566-.835.566-1.373 0-.54-.188-.997-.566-1.373l-5.939-5.94"
+       fill="#fff"
+       fill-opacity=".842"
+       id="path11"
+       style="fill-opacity:1;fill:#ffffff" />
+  </g>
+</svg>

package/src/components/confirmationContainer/index.tsx

@@ -114,31 +114,37 @@ export const ConfirmationContainer = ({
     <div className="confirmation-page">
       {data && (
         <>
-        <div className='header-container'>
+          <div className='header-container'>
             <div className='header-product-image'>
               <img className='product-image' src={data.product_image}/>
             </div>
             <div className="header-product-text">
               <p className="title">{ confirmationTitle }</p>
-              <div className="share-message-section">
-                {data.attach_tickets ? (
-                  <span className="main">Your tickets have been emailed to you</span>
-                ) : (
-                  <span className="main">{ confirmationMain }</span>
-                )}
-                {
-                 <span className="helper">
-                  {data.attach_tickets ? 'Please bring them with you to the event' : confirmationHelper }
-                </span>}
+              <div className="share-message-section"
+                dangerouslySetInnerHTML={
+                  data.custom_confirmation_page_text
+                    ? createMarkup(data.custom_confirmation_page_text)
+                    : undefined
+                }
+              >
+                {data.custom_confirmation_page_text
+                  ? undefined
+                  : (
+                    <>
+                      {data.attach_tickets ? (
+                        <span className="main">Your tickets have been emailed to you</span>
+                      ) : (
+                        <span className="main">{ confirmationMain }</span>
+                      )}
+                      <span className="helper">
+                        {data.attach_tickets ? 'Please bring them with you to the event' : confirmationHelper}
+                      </span>
+                    </>
+                  )
+                }
               </div>
             </div>
           </div>
-          {data.custom_confirmation_page_text ? (
-            <div
-              className='custom-confirmation-page-text'
-              dangerouslySetInnerHTML={createMarkup(data.custom_confirmation_page_text)}
-            />
-          ) : null}
           {data.disable_referral === false && isReferralEnabled && (
             <>
               <div className="referral_text_image_section">

package/src/components/ticketsContainer/PromoCodeSection.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Button from 'react-bootstrap/Button'
 import SVG from 'react-inlinesvg'
+
 import { getImage } from '../../utils/getImage'
 
 export interface IPromoCodeSectionProps {
@@ -11,6 +12,8 @@ export interface IPromoCodeSectionProps {
   setShowPromoInput: (value: boolean) => void;
   updateTickets: (value: boolean, type: string) => void;
   setCodeIsApplied: (value: boolean) => void;
+  codeIsInvalid: boolean;
+  setCodeIsInvalid: (value: boolean) => void;
 }
 
 export const PromoCodeSection = ({
@@ -20,12 +23,13 @@ export const PromoCodeSection = ({
   setCode,
   setShowPromoInput,
   updateTickets,
-  setCodeIsApplied
+  setCodeIsApplied,
+  codeIsInvalid,
+  setCodeIsInvalid
 }: IPromoCodeSectionProps) => {
   const isPromoCodeHasValue = !!code.trim()
 
-  const renderInputField = () => {
-    return (
+  const renderInputField = () => (
       <div className="promo-code-block">
         <div className="promo-code-block">
           <p className="promo-code-text">Promo code</p>
@@ -56,7 +60,6 @@ export const PromoCodeSection = ({
         </Button>
       </div>
     )
-  }
 
   return (
     <div>
@@ -71,6 +74,14 @@ export const PromoCodeSection = ({
           <p className="promo-code-success">PROMO CODE APPLIED SUCCESSFULLY</p>
         </div>
       ) : null}
+      {codeIsInvalid ? (
+        <div className="alert-info fail">
+          <SVG
+            src={getImage('xmark.svg')}
+          />
+          <p className="promo-code-fail">Invalid Promo Code</p>
+        </div>
+      ) : null}
       {!showPromoInput && (
         <Button
           className="promo-code-button"
@@ -78,6 +89,7 @@ export const PromoCodeSection = ({
           onClick={() => {
             setCodeIsApplied(false)
             setShowPromoInput(true)
+            setCodeIsInvalid(false)
           }}
         >
           Got a promo code? Click here

package/src/components/ticketsContainer/index.tsx

@@ -140,6 +140,7 @@ export const TicketsContainer = ({
   const [code, setCode] = useState(getQueryVariable('r') || queryPromoCode)
   const [showPromoInput, setShowPromoInput] = useState(false)
   const [codeIsApplied, setCodeIsApplied] = useState(false)
+  const [codeIsInvalid, setCodeIsInvalid] = useState(false)
   const [showAccessCodeSection, setShowAccessCodeSection] = useState(
     isAccessCodeEnabled
   )
@@ -207,6 +208,7 @@ export const TicketsContainer = ({
       if (response.data.success) {
         const attributes = _get(response, 'data.data.attributes')
         type === 'promo' && setCodeIsApplied(attributes.ValidPromoCode)
+        type === 'promo' && setCodeIsInvalid(!attributes.ValidPromoCode)
         setTickets(_get(attributes, 'tickets'))
         setShowWaitingList(attributes.showWaitingList)
         onGetTicketsSuccess(response.data)
@@ -501,6 +503,8 @@ export const TicketsContainer = ({
                 setShowPromoInput={setShowPromoInput}
                 setCode={setCode}
                 updateTickets={updateTickets}
+                codeIsInvalid={codeIsInvalid}
+                setCodeIsInvalid={setCodeIsInvalid}
               />
             ) : null}
             {wrappedActionsSectionComponent}

package/src/env.ts

@@ -1,13 +1,13 @@
 // preview
 export const ENV = {
-  EVENT_ID: 12917,
+  EVENT_ID: 13063,
   BASE_URL: 'https://test.ticketfairy.com',
   CLIENT_ID: 'e9d8f8922797b4621e562255afe90dbf',
   CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
   STRIPE_PUBLISHABLE_KEY:
     'pk_test_51H4BkOGqveRD6EShliLrT9vd7mPOBPvQSuqmvc3wIinDqxWsCLeS2N7HonPPn6MhjU35ayYy5v4I6MLlD4jNWrd000NSgAF6UL',
-  BRAND_SLUG: 'mana-onetree-testing-brand',
-  X_SOURCE_ORIGIN: 'manacommon.com',
+  BRAND_SLUG: 'mana-common',
+  X_SOURCE_ORIGIN: 'tickets-staging.manacommon.com',
 }
 
 // prod