Dev

packages/evershop/src/components/frontStore/checkout/checkout/payment/paymentStep/StepContent.jsx

@@ -11,6 +11,7 @@ import { useCheckout } from '@components/common/context/checkout';
 import { Field } from '@components/common/form/Field';
 import Button from '@components/common/form/Button';
 import { _ } from '@evershop/evershop/src/lib/locale/translate';
+import Spinner from '@components/common/Spinner';
 
 const QUERY = `
   query Query($cartId: String) {
@@ -78,15 +79,16 @@ export function StepContent({
   });
   const { data, fetching, error } = result;
 
-  if (fetching) return <p>Loading .....</p>;
-  if (error) {
+  if (fetching) {
     return (
-      <p>
-        Oh no...
-        {error.message}
-      </p>
+      <div className="flex justify-center items-center p-3">
+        <Spinner width={25} height={25} />
+      </div>
     );
   }
+  if (error) {
+    return <div className="p-2 text-critical">{error.message}</div>;
+  }
   return (
     <div>
       <Form
@@ -160,6 +162,7 @@ export function StepContent({
             {_('No payment method available')}
           </div>
         )}
+        <Area id="beforePlaceOrderButton" noOuter />
         <div className="form-submit-button">
           <Button
             onAction={() => {

packages/evershop/src/components/frontStore/stripe/checkout/CheckoutForm.jsx

@@ -5,6 +5,7 @@ import { useQuery } from 'urql';
 import { useCheckout } from '@components/common/context/checkout';
 import './CheckoutForm.scss';
 import { Field } from '@components/common/form/Field';
+import { _ } from '@evershop/evershop/src/lib/locale/translate';
 import TestCards from './TestCards';
 
 const cartQuery = `
@@ -101,7 +102,11 @@ export default function CheckoutForm({ stripePublishableKey }) {
         })
         .then((res) => res.json())
         .then((data) => {
-          setClientSecret(data.data.clientSecret);
+          if (data.error) {
+            setError(_('Some error occurred. Please try again later.'));
+          } else {
+            setClientSecret(data.data.clientSecret);
+          }
         });
     }
   }, [orderId]);

packages/evershop/src/modules/catalog/pages/frontStore/productView/Form.jsx

@@ -11,6 +11,7 @@ import Button from '@components/common/form/Button';
 import './Form.scss';
 import { useAppDispatch, useAppState } from '@components/common/context/app';
 import { _ } from '@evershop/evershop/src/lib/locale/translate';
+import ProductNoThumbnail from '@components/common/ProductNoThumbnail';
 
 function ToastMessage({ thumbnail, name, qty, count, cartUrl, toastId }) {
   return (
@@ -43,8 +44,12 @@ function ToastMessage({ thumbnail, name, qty, count, cartUrl, toastId }) {
         </div>
       </div>
       <div className="item-line flex justify-between">
-        <div className="popup-thumbnail flex justify-center">
-          <img src={thumbnail} alt={name} />
+        <div className="popup-thumbnail flex justify-center items-center">
+          {thumbnail ? (
+            <img src={thumbnail} alt={name} />
+          ) : (
+            <ProductNoThumbnail width={25} height={25} />
+          )}
         </div>
         <div className="item-info flex justify-between">
           <div className="name">
@@ -151,7 +156,7 @@ export default function ProductForm({ product, action }) {
             qty={response.data.item.qty}
             count={response.data.count}
             cartUrl="/cart"
-            toastId={`${toastId  }-${  Math.random().toString(36).slice(2)}`}
+            toastId={`${toastId}-${Math.random().toString(36).slice(2)}`}
           />,
           { closeButton: false }
         )

packages/evershop/src/modules/checkout/pages/frontStore/checkout/SummaryMobile.jsx

@@ -0,0 +1,132 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Items } from '@components/frontStore/checkout/checkout/summary/Items';
+import { CartSummary } from '@components/frontStore/checkout/checkout/summary/Cart';
+import Area from '@components/common/Area';
+import './SummaryMobile.scss';
+
+export default function Summary({
+  cart,
+  setting: { displayCheckoutPriceIncludeTax }
+}) {
+  return (
+    <Area
+      id="checkoutSummary"
+      className="checkout-summary checkout__summary__mobile md:hidden divide-y border rounded border-divider px-2 mb-2"
+      coreComponents={[
+        {
+          component: { default: Items },
+          props: { items: cart.items, displayCheckoutPriceIncludeTax },
+          sortOrder: 20,
+          id: 'checkoutOrderSummaryItems'
+        },
+        {
+          component: { default: CartSummary },
+          props: { ...cart, displayCheckoutPriceIncludeTax },
+          sortOrder: 30,
+          id: 'checkoutOrderSummaryCart'
+        }
+      ]}
+    />
+  );
+}
+
+Summary.propTypes = {
+  cart: PropTypes.shape({
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        thumbnail: PropTypes.string,
+        productName: PropTypes.string,
+        variantOptions: PropTypes.string,
+        qty: PropTypes.number,
+        total: PropTypes.shape({
+          text: PropTypes.string
+        }),
+        subTotal: PropTypes.shape({
+          text: PropTypes.string
+        })
+      })
+    ),
+    totalQty: PropTypes.number,
+    subTotal: PropTypes.shape({
+      text: PropTypes.string
+    }),
+    subTotalInclTax: PropTypes.shape({
+      text: PropTypes.string
+    }),
+    grandTotal: PropTypes.shape({
+      text: PropTypes.string
+    }),
+    discountAmount: PropTypes.shape({
+      text: PropTypes.string
+    }),
+    taxAmount: PropTypes.shape({
+      text: PropTypes.string
+    }),
+    shippingFeeInclTax: PropTypes.shape({
+      text: PropTypes.string
+    }),
+    shippingMethodName: PropTypes.string,
+    coupon: PropTypes.string
+  }).isRequired,
+  setting: PropTypes.shape({
+    displayCheckoutPriceIncludeTax: PropTypes.bool
+  }).isRequired
+};
+
+export const layout = {
+  areaId: 'beforePlaceOrderButton',
+  sortOrder: 10
+};
+
+export const query = `
+  query Query {
+    cart {
+      totalQty
+      subTotal {
+        value
+        text
+      }
+      subTotalInclTax {
+        value
+        text
+      }
+      grandTotal {
+        value
+        text
+      }
+      discountAmount {
+        value
+        text
+      }
+      taxAmount {
+        value
+        text
+      }
+      shippingFeeInclTax {
+        value
+        text
+      }
+      shippingMethodName
+      coupon
+      items {
+        thumbnail
+        productName
+        productSku
+        qty
+        variantOptions
+        total {
+          value
+          text
+        }
+        subTotal {
+          value
+          text
+        }
+      }
+    }
+    setting {
+      displayCheckoutPriceIncludeTax
+    }
+  }
+`;

packages/evershop/src/modules/checkout/pages/frontStore/checkout/SummaryMobile.scss

@@ -0,0 +1,7 @@
+.checkout-summary.checkout__summary__mobile {
+  min-height: auto;
+  &::after {
+    display: none;
+    background-color: none
+  }
+}