Trying to fix mobile checkout and cleanup unused files and imports

Author: w3bdesign

components/Cart/CartPage/CartItem.component.jsx

@@ -25,7 +25,6 @@ const CartItem = ({
     if (process.browser) {
       event.stopPropagation();
       // Return if the previous update cart mutation request is still processing
-
       if (updateCartProcessing) {
         return;
       }
@@ -67,7 +66,7 @@ const CartItem = ({
       </td>
       <td className="px-4 py-2 border">{item.name}</td>
       <td className="px-4 py-2 border">
-        {'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
+        kr{'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
       </td>
       <td className="px-4 py-2 border">
         <input

components/Cart/CartPage/MobileCart.component.jsx

@@ -1,7 +1,6 @@
 import { v4 } from 'uuid';
 
 import MobileCartItem from './MobileCartItem.component';
-import SVGX from 'components/SVG/SVGX.component';
 
 const MobileCart = ({ cart, handleRemoveProductClick, updateCart }) => {
   return (

components/Cart/CartPage/MobileCartItem.component.jsx

@@ -9,6 +9,7 @@ const MobileCartItem = ({
   products,
   handleRemoveProductClick,
   updateCart,
+  updateCartProcessing,
 }) => {
   const [productCount, setProductCount] = useState(item.qty);
 
@@ -24,10 +25,9 @@ const MobileCartItem = ({
     if (process.browser) {
       event.stopPropagation();
       // Return if the previous update cart mutation request is still processing
-      /*
       if (updateCartProcessing) {
         return;
-      }*/
+      }
       // If the user tries to delete the count of product, set that to 1 by default ( This will not allow him to reduce it less than zero )
       const newQty = event.target.value ? parseInt(event.target.value) : 1;
       // Set the new quantity in state.
@@ -49,32 +49,30 @@ const MobileCartItem = ({
   return (
     <>
       <tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
-        <td className="h-12 p-3 border-2 border-gray-400 ">
-        <SVGX
-          cartKey={item.cartKey}
-          handleRemoveProductClick={handleRemoveProductClick}
-          products={products}
-        />
-        </td>
-        <td className="h-12 p-3 border-l-2 border-r-2 border-gray-400 ">
-          {item.name}
+        <td className="h-12 p-3">
+          <SVGX
+            cartKey={item.cartKey}
+            handleRemoveProductClick={handleRemoveProductClick}
+            products={products}
+          />
         </td>
-        <td className="h-12 p-3 border-2 border-gray-400 ">
-        {'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
+        <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 border-l-2 border-r-2 border-gray-400 ">
-        <input
-          className="w-12"
-          type="number"
-          min="1"
-          defaultValue={productCount}
-          onChange={(event) => handleQuantityChange(event, item.cartKey)}
-        />
+        <td className="h-12 p-3">
+          <input
+            className="w-12"
+            type="number"
+            min="1"
+            defaultValue={productCount}
+            onChange={(event) => handleQuantityChange(event, item.cartKey)}
+          />
         </td>
-        <td className="h-12 p-3 border-2 border-gray-400 ">
-        {'string' !== typeof item.totalPrice
-          ? item.totalPrice.toFixed(2)
-          : item.totalPrice}
+        <td className="h-12 p-3">
+          {'string' !== typeof item.totalPrice
+            ? item.totalPrice.toFixed(2)
+            : item.totalPrice}
         </td>
       </tr>
     </>

components/Checkout/Billing.component.jsx

@@ -34,7 +34,7 @@ const Billing = ({ onSubmit }) => {
     <>
       <section className="relative text-gray-700 body-font">
         <form onSubmit={handleSubmit(onSubmit)}>
-          <div className="container px-5 py-2 mx-auto">
+          <div className="container py-2 mx-auto ml-8">
             <CheckoutTitle title="Betalingsdetaljer" />
             <div className="mx-auto lg:w-1/2 md:w-2/3">
               <div className="flex flex-wrap -m-2">

components/Checkout/CheckoutForm.component.jsx

@@ -8,7 +8,6 @@ import LoadingSpinner from '../LoadingSpinner/LoadingSpinner.component';
 
 import { GET_CART } from 'utils/const/GQL_QUERIES';
 import { CHECKOUT_MUTATION } from 'utils/const/GQL_MUTATIONS';
-import { INITIAL_STATE } from 'utils/const/INITIAL_STATE';
 
 import { AppContext } from 'utils/context/AppContext';
 
@@ -19,7 +18,7 @@ import {
 
 const CheckoutForm = () => {
   const [cart, setCart] = useContext(AppContext);
-  const [input, setInput] = useState(INITIAL_STATE);
+  
   const [orderData, setOrderData] = useState(null);
   const [requestError, setRequestError] = useState(null);
   const [orderCompleted, setorderCompleted] = useState(false);

components/Checkout/OrderDetails.component.jsx

@@ -9,7 +9,6 @@ const OrderDetails = ({ cart }) => {
           {cart ? (
             <div className="p-6 mx-auto mt-5">
               <CheckoutTitle title="Handlekurv" />
-
               <table className="table-auto">
                 <thead>
                   <tr>                   
@@ -34,10 +33,7 @@ const OrderDetails = ({ cart }) => {
                       <OrderDetailsCartItem
                         key={item.productId}
                         item={item}
-                        products={cart.products}
-                        // updateCartProcessing={updateCartProcessing}
-                        // handleRemoveProductClick={handleRemoveProductClick}
-                        // updateCart={updateCart}
+                        products={cart.products}                       
                       />
                     ))}
                 </tbody>

styles/index.css

@@ -2,10 +2,8 @@
 @tailwind components;
 
 #hero {
-  /*background-image: url('https://images.unsplash.com/photo-1422190441165-ec2956dc9ecc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');*/
-  background-image: url("../public/images/hero.jpg");
-  height:385px;
-  /*height: 24rem;*/
+  background-image: url('../public/images/hero.jpg');
+  height: 24rem;
 }
 
 #mobile-menu {
@@ -26,8 +24,8 @@
 
 /* Fix for annoying CSS bug with NavBar moving slightly on front page only */
 /*@media only screen and (min-width: 769px) {*/
-  
- @media only screen and (min-width: 1600px) {
+
+@media only screen and (min-width: 1600px) {
   #navbar-div {
     margin-left: 330px;
   }