Fix mobile checkout page on mobile

Author: w3bdesign

README.md

@@ -42,6 +42,7 @@
 - Pretty URLs with builtin Nextjs functionality
 - Tailwind CSS for styling
 - JSDoc comments
+- WooCommerce cart session is automatically deleted after 48 hours to prevent GraphQL session expiration errors
 
 ## TODO
 

components/Checkout/CheckoutForm.component.jsx

@@ -3,6 +3,7 @@ import { useQuery, useMutation } from '@apollo/react-hooks';
 
 import Billing from './Billing.component';
 import OrderDetails from './OrderDetails.component';
+import MobileOrderDetails from './MobileOrderDetails.component';
 import LoadingSpinner from '../LoadingSpinner/LoadingSpinner.component';
 //import Payment from './Payment.component';
 
@@ -18,7 +19,7 @@ import {
 
 const CheckoutForm = () => {
   const [cart, setCart] = useContext(AppContext);
-  
+
   const [orderData, setOrderData] = useState(null);
   const [requestError, setRequestError] = useState(null);
   const [orderCompleted, setorderCompleted] = useState(false);
@@ -73,10 +74,11 @@ const CheckoutForm = () => {
         <div className="container mx-auto">
           {/*	Order*/}
           <OrderDetails cart={cart} />
+          <MobileOrderDetails cart={cart} />
+
           {/*Payment Details*/}
-          <div className="">
-            <Billing onSubmit={onSubmit} />
-          </div>
+          <Billing onSubmit={onSubmit} />
+
           {/* Checkout Loading*/}
           {checkoutLoading && (
             <div className="text-xl text-center">

components/Checkout/MobileOrderDetails.component.jsx

@@ -0,0 +1,44 @@
+import { v4 } from 'uuid';
+
+import MobileOrderDetailsItem from './MobileOrderDetailsItem.component';
+import CheckoutTitle from 'components/Header/CheckoutTitle.component';
+
+const MobileOrderDetails = ({ cart }) => {
+  return (
+    <section className="block py-8 bg-white lg:hidden xl:hidden md:hidden">
+      <div className="flex items-center justify-center">
+        <div className="p-6 mx-auto mt-5">
+          <CheckoutTitle title="Din Ordre" />
+          <table className="flex flex-row flex-no-wrap mx-auto my-5 overflow-hidden rounded-lg sm:bg-white sm:shadow-lg">
+            <thead className="text-black">
+              {cart.products.length &&
+                cart.products.map(() => (
+                  <tr
+                    key={v4()}
+                    className="flex flex-col mb-2 bg-white rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0"
+                  >
+                    <th className="p-3 text-left">Navn</th>
+                    <th className="p-3 text-left">Pris</th>
+                    <th className="p-3 text-left">Antall</th>
+                    <th className="p-3 text-left">Totalpris</th>
+                  </tr>
+                ))}
+            </thead>
+            <tbody className="flex-1 sm:flex-none">
+              {cart.products.length &&
+                cart.products.map((item) => (
+                  <MobileOrderDetailsItem
+                    key={item.productId}
+                    item={item}
+                    products={cart.products}
+                  />
+                ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default MobileOrderDetails;

components/Checkout/MobileOrderDetailsItem.component.jsx

@@ -0,0 +1,19 @@
+const MobileOrderDetailsCartItem = ({ item }) => (
+  <>
+    <tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
+      
+      <td className="h-12 p-3">{item.name}</td>
+      <td className="h-12 p-3">
+        kr{'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
+      </td>
+      <td className="h-12 p-3">{item.qty}</td>
+      <td className="h-12 p-3">
+        {'string' !== typeof item.totalPrice
+          ? item.totalPrice.toFixed(2)
+          : item.totalPrice}
+      </td>
+    </tr>
+  </>
+);
+
+export default MobileOrderDetailsCartItem;

components/Checkout/OrderDetails.component.jsx

@@ -4,14 +4,14 @@ import OrderDetailsCartItem from './OrderDetailsCartItem.component';
 const OrderDetails = ({ cart }) => {
   return (
     <>
-      <section className="py-8 bg-white">
+      <section className="hidden py-8 bg-white xs:hidden md:block lg:block xl:block">
         <div className="container flex flex-wrap items-center mx-auto">
           {cart ? (
             <div className="p-6 mx-auto mt-5">
-              <CheckoutTitle title="Handlekurv" />
+              <CheckoutTitle title="Din Ordre" />
               <table className="table-auto">
                 <thead>
-                  <tr>                   
+                  <tr>
                     <th className="px-4 py-2" scope="col" />
                     <th className="px-4 py-2" scope="col">
                       Produkt
@@ -33,7 +33,7 @@ const OrderDetails = ({ cart }) => {
                       <OrderDetailsCartItem
                         key={item.productId}
                         item={item}
-                        products={cart.products}                       
+                        products={cart.products}
                       />
                     ))}
                 </tbody>