initial commit (#61)

hygraph · Jan 10, 2020 · cfee1fa · cfee1fa
1 parent 6945fd9
commit cfee1fa
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 32 deletions.
diff --git a/src/components/Checkout.js b/src/components/Checkout.js
@@ -23,13 +23,13 @@ function Checkout() {
 
   return (
     <Elements>
-      <div className="md:flex -mx-4">
-        <div className="md:w-1/2 lg:w-2/5 px-4 order-last">
-          <div className="md:sticky md:top-0">
+      <div className="lg:flex -mx-4">
+        <div className="lg:w-1/2 lg:w-2/5 px-4 order-last">
+          <div className="lg:sticky lg:top-0">
             <CheckoutItemList />
           </div>
         </div>
-        <div className="md:w-1/2 lg:w-3/5 px-4 order-first">
+        <div className="lg:w-1/2 lg:w-3/5 px-4 order-first">
           <CheckoutForm />
         </div>
       </div>

diff --git a/src/components/CheckoutForm.js b/src/components/CheckoutForm.js
@@ -424,6 +424,21 @@ function CheckoutPage({ elements, stripe }) {
           Pay
         </h3>
 
+        <div className="mb-3 md:mb-6">
+          <p className="leading-relaxed text-slategray">
+            <strong>This is a test checkout</strong>. You can simulate
+            transactions using any valid expiry date, CVC code and{' '}
+            <code className="text-black bg-gainsboro rounded-lg p-1">
+              4242 4242 4242 4242
+            </code>
+            , or{' '}
+            <code className="text-black bg-gainsboro rounded-lg p-1">
+              4000 0000 0000 3220
+            </code>{' '}
+            if you want trigger 3D Secure 2 authentication.
+          </p>
+        </div>
+
         <div className="mb-3 md:mb-6">
           <CardElement
             className="appearance-none bg-white border-2 border-gainsboro px-4 py-3 pr-8 focus:outline-none focus:border-slategray focus:bg-white text-slategray focus:outline-none w-full rounded-lg"
@@ -443,15 +458,90 @@ function CheckoutPage({ elements, stripe }) {
         {checkoutState.error && (
           <p className="text-red">{checkoutState.error}</p>
         )}
-        {checkoutState.processing && 'loading'}
-        {checkoutState.success && 'success'}
+        {checkoutState.processing && 'Please wait. Processing order.'}
+        {checkoutState.success && 'Order successfully received.'}
         <div className="flex items-center justify-end">
           <button
             type="submit"
             className="bg-primary rounded-lg text-white px-3 py-2 h-10 focus:outline-none font-bold"
             disabled={isSubmitting}
           >
-            Pay for order
+            {isSubmitting ? (
+              <svg
+                className="fill-current h-3"
+                viewBox="0 0 120 30"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle cx="15" cy="15" r="15">
+                  <animate
+                    attributeName="r"
+                    from="15"
+                    to="15"
+                    begin="0s"
+                    dur="0.8s"
+                    values="15;9;15"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                  />
+                  <animate
+                    attributeName="fill-opacity"
+                    from="1"
+                    to="1"
+                    begin="0s"
+                    dur="0.8s"
+                    values="1;.5;1"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                  />
+                </circle>
+                <circle cx="60" cy="15" r="9" fill-opacity="0.3">
+                  <animate
+                    attributeName="r"
+                    from="9"
+                    to="9"
+                    begin="0s"
+                    dur="0.8s"
+                    values="9;15;9"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                  />
+                  <animate
+                    attributeName="fill-opacity"
+                    from="0.5"
+                    to="0.5"
+                    begin="0s"
+                    dur="0.8s"
+                    values=".5;1;.5"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                  />
+                </circle>
+                <circle cx="105" cy="15" r="15">
+                  <animate
+                    attributeName="r"
+                    from="15"
+                    to="15"
+                    begin="0s"
+                    dur="0.8s"
+                    values="15;9;15"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                  />
+                  <animate
+                    attributeName="fill-opacity"
+                    from="1"
+                    to="1"
+                    begin="0s"
+                    dur="0.8s"
+                    values="1;.5;1"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                  />
+                </circle>
+              </svg>
+            ) : (
+              'Pay for order'
+            )}
           </button>
         </div>
       </div>

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -3,8 +3,8 @@ import React from 'react';
 function Footer() {
   return (
     <div className="container mx-auto px-6">
-      <div className="md:flex items-center justify-between border-t-2 border-gainsboro py-6">
-        <p className="text-lightgray">
+      <div className="flex flex-col md:flex-row items-center md:justify-between border-t-2 border-gainsboro py-6">
+        <p className="text-lightgray mb-3 md:mb-0">
           Powered by GraphCMS, Printful, Gatsby &amp; Stripe
         </p>
 
@@ -76,22 +76,6 @@ function Footer() {
               </svg>
             </a>
           </li>
-          <li className="my-1">
-            <a
-              href="https://www.facebook.com/GraphCMS"
-              target="_blank"
-              className="text-lightgray hover:text-primary text-sm"
-              rel="noopener noreferrer"
-            >
-              <svg
-                className="fill-current w-5 h-5"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="m23.9981 11.9991c0-6.62694-5.3721-11.9991-11.999-11.9991-6.62694 0-11.9991 5.37216-11.9991 11.9991 0 5.9891 4.38789 10.9531 10.1242 11.8533v-8.3848h-3.04662v-3.4685h3.04662v-2.64357c0-3.00727 1.7914-4.66839 4.5322-4.66839 1.3128 0 2.686.23435 2.686.23435v2.9529h-1.513c-1.4906 0-1.9555.92494-1.9555 1.87385v2.25086h3.3279l-.532 3.4685h-2.7959v8.3848c5.7364-.9002 10.1242-5.8642 10.1242-11.8533z" />
-              </svg>
-            </a>
-          </li>
         </ul>
       </div>
     </div>

diff --git a/src/pages/cart.js b/src/pages/cart.js
@@ -8,7 +8,9 @@ function CartPage() {
     <React.Fragment>
       <SEO pageTitle="Cart" />
       <div className="mb-6">
-        <h1 className="font-bold text-6xl mb-3 text-primary">Cart</h1>
+        <h1 className="font-bold text-3xl md:text-6xl mb-3 text-primary">
+          Cart
+        </h1>
 
         <hr className="border-b border-gainsboro w-10" />
       </div>

diff --git a/src/pages/checkout.js b/src/pages/checkout.js
@@ -8,7 +8,9 @@ function CheckoutPage() {
     <React.Fragment>
       <SEO pageTitle="Checkout" />
       <div className="mb-6">
-        <h1 className="font-bold text-6xl mb-3 text-primary">Checkout</h1>
+        <h1 className="font-bold text-3xl md:text-6xl mb-3 text-primary">
+          Checkout
+        </h1>
         <hr className="border-b border-gainsboro w-10" />
       </div>
       <Checkout />

diff --git a/src/pages/success.js b/src/pages/success.js
@@ -20,7 +20,9 @@ function SuccessPage({ location }) {
     return (
       <React.Fragment>
         <div className="mb-6">
-          <h1 className="font-bold text-6xl mb-3 text-primary">Oops!</h1>
+          <h1 className="font-bold text-3xl md:text-6xl mb-3 text-primary">
+            Oops!
+          </h1>
 
           <hr className="border-b border-gainsboro w-10" />
         </div>
@@ -32,7 +34,9 @@ function SuccessPage({ location }) {
     <React.Fragment>
       <SEO pageTitle="Thank you for your order" />
       <div className="mb-6">
-        <h1 className="font-bold text-6xl mb-3 text-primary">Thank you!</h1>
+        <h1 className="font-bold text-3xl md:text-6xl mb-3 text-primary">
+          Thank you!
+        </h1>
 
         <hr className="border-b border-gainsboro w-10" />
       </div>

diff --git a/src/templates/CategoryPage.js b/src/templates/CategoryPage.js
@@ -12,7 +12,9 @@ function CategoryPage({
   return (
     <React.Fragment>
       <SEO pageTitle={category.name} />
-      <h1 className="font-bold text-6xl mb-3 text-primary">{category.name}</h1>
+      <h1 className="font-bold text-3xl md:text-6xl mb-3 text-primary">
+        {category.name}
+      </h1>
       <hr className="border-b border-gainsboro w-10" />
 
       <ProductGrid products={category.products} />

diff --git a/src/templates/CollectionPage.js b/src/templates/CollectionPage.js
@@ -12,7 +12,7 @@ function CollectionPage({
   return (
     <React.Fragment>
       <SEO pageTitle={collection.name} />
-      <h1 className="font-bold text-6xl mb-3 text-primary">
+      <h1 className="font-bold text-3xl md:text-6xl mb-3 text-primary">
         {collection.name}
       </h1>
       <hr className="border-b border-gainsboro w-10" />

diff --git a/src/templates/ProductsPage.js b/src/templates/ProductsPage.js
@@ -12,7 +12,9 @@ function ProductsPage({
   return (
     <React.Fragment>
       <SEO pageTitle="Products" />
-      <h1 className="font-bold text-6xl mb-3 text-primary">Latest</h1>
+      <h1 className="font-bold text-3xl md:text-6xl mb-3 text-primary">
+        Latest
+      </h1>
 
       <hr className="border-b border-gainsboro w-10" />