@evershop/evershop 1.1.0 → 1.2.0

package/src/modules/checkout/pages/frontStore/checkout/Summary.jsx

@@ -5,24 +5,21 @@ import { CartSummary } from '@components/frontStore/checkout/checkout/summary/Ca
 import Area from '@components/common/Area';
 import './Summary.scss';
 
-export default function Summary({
-  cart,
-  setting: { displayCheckoutPriceIncludeTax }
-}) {
+export default function Summary({ cart, setting: { priceIncludingTax } }) {
   return (
     <Area
       id="checkoutSummary"
-      className="checkout-summary hidden md:block"
+      className="checkout-summary h-full hidden md:block"
       coreComponents={[
         {
           component: { default: Items },
-          props: { items: cart.items, displayCheckoutPriceIncludeTax },
+          props: { items: cart.items, priceIncludingTax },
           sortOrder: 20,
           id: 'checkoutOrderSummaryItems'
         },
         {
           component: { default: CartSummary },
-          props: { ...cart, displayCheckoutPriceIncludeTax },
+          props: { ...cart, priceIncludingTax },
           sortOrder: 30,
           id: 'checkoutOrderSummaryCart'
         }
@@ -42,7 +39,10 @@ Summary.propTypes = {
         total: PropTypes.shape({
           text: PropTypes.string
         }),
-        subTotal: PropTypes.shape({
+        lineTotal: PropTypes.shape({
+          text: PropTypes.string
+        }),
+        lineTotalInclTax: PropTypes.shape({
           text: PropTypes.string
         })
       })
@@ -60,7 +60,7 @@ Summary.propTypes = {
     discountAmount: PropTypes.shape({
       text: PropTypes.string
     }),
-    taxAmount: PropTypes.shape({
+    totalTaxAmount: PropTypes.shape({
       text: PropTypes.string
     }),
     shippingFeeInclTax: PropTypes.shape({
@@ -70,7 +70,7 @@ Summary.propTypes = {
     coupon: PropTypes.string
   }).isRequired,
   setting: PropTypes.shape({
-    displayCheckoutPriceIncludeTax: PropTypes.bool
+    priceIncludingTax: PropTypes.bool
   }).isRequired
 };
 
@@ -99,7 +99,7 @@ export const query = `
         value
         text
       }
-      taxAmount {
+      totalTaxAmount {
         value
         text
       }
@@ -115,18 +115,18 @@ export const query = `
         productSku
         qty
         variantOptions
-        total {
+        lineTotalInclTax {
           value
           text
         }
-        subTotal {
+        lineTotal {
           value
           text
         }
       }
     }
     setting {
-      displayCheckoutPriceIncludeTax
+      priceIncludingTax
     }
   }
 `;

package/src/modules/checkout/pages/frontStore/checkout/SummaryMobile.jsx

@@ -5,24 +5,21 @@ import { CartSummary } from '@components/frontStore/checkout/checkout/summary/Ca
 import Area from '@components/common/Area';
 import './SummaryMobile.scss';
 
-export default function Summary({
-  cart,
-  setting: { displayCheckoutPriceIncludeTax }
-}) {
+export default function Summary({ cart, setting: { priceIncludingTax } }) {
   return (
     <Area
       id="checkoutSummary"
-      className="checkout-summary checkout__summary__mobile md:hidden divide-y border rounded border-divider px-2 mb-2"
+      className="checkout-summary checkout__summary__mobile md:hidden divide-y border rounded border-divider px-8 mb-8"
       coreComponents={[
         {
           component: { default: Items },
-          props: { items: cart.items, displayCheckoutPriceIncludeTax },
+          props: { items: cart.items, priceIncludingTax },
           sortOrder: 20,
           id: 'checkoutOrderSummaryItems'
         },
         {
           component: { default: CartSummary },
-          props: { ...cart, displayCheckoutPriceIncludeTax },
+          props: { ...cart, priceIncludingTax },
           sortOrder: 30,
           id: 'checkoutOrderSummaryCart'
         }
@@ -39,10 +36,10 @@ Summary.propTypes = {
         productName: PropTypes.string,
         variantOptions: PropTypes.string,
         qty: PropTypes.number,
-        total: PropTypes.shape({
+        lineTotalInclTax: PropTypes.shape({
           text: PropTypes.string
         }),
-        subTotal: PropTypes.shape({
+        lineTotal: PropTypes.shape({
           text: PropTypes.string
         })
       })
@@ -60,7 +57,7 @@ Summary.propTypes = {
     discountAmount: PropTypes.shape({
       text: PropTypes.string
     }),
-    taxAmount: PropTypes.shape({
+    totalTaxAmount: PropTypes.shape({
       text: PropTypes.string
     }),
     shippingFeeInclTax: PropTypes.shape({
@@ -70,7 +67,7 @@ Summary.propTypes = {
     coupon: PropTypes.string
   }).isRequired,
   setting: PropTypes.shape({
-    displayCheckoutPriceIncludeTax: PropTypes.bool
+    priceIncludingTax: PropTypes.bool
   }).isRequired
 };
 
@@ -99,7 +96,7 @@ export const query = `
         value
         text
       }
-      taxAmount {
+      totalTaxAmount {
         value
         text
       }
@@ -115,18 +112,18 @@ export const query = `
         productSku
         qty
         variantOptions
-        total {
+        lineTotalInclTax {
           value
           text
         }
-        subTotal {
+        lineTotal {
           value
           text
         }
       }
     }
     setting {
-      displayCheckoutPriceIncludeTax
+      priceIncludingTax
     }
   }
 `;

package/src/modules/checkout/pages/frontStore/checkout/route.json

@@ -1,4 +1,5 @@
 {
   "methods": ["GET"],
-  "path": "/checkout"
+  "path": "/checkout",
+  "name": "Checkout page"
 }

package/src/modules/checkout/pages/frontStore/checkoutSuccess/CheckoutSuccess.jsx

@@ -4,7 +4,7 @@ import './CheckoutSuccess.scss';
 
 export default function CheckoutSuccessPage() {
   return (
-    <div className="page-width grid grid-cols-1 md:grid-cols-2 gap-3">
+    <div className="page-width grid grid-cols-1 md:grid-cols-2 gap-12">
       <Area id="checkoutSuccessPageLeft" />
       <Area id="checkoutSuccessPageRight" />
     </div>

package/src/modules/checkout/pages/frontStore/checkoutSuccess/CheckoutSuccess.scss

@@ -43,3 +43,7 @@
     padding: 0.5rem;
   }
 }
+
+.breadcrumb {
+  display: none;
+}

package/src/modules/checkout/pages/frontStore/checkoutSuccess/CustomerInfo.jsx

@@ -16,7 +16,7 @@ export default function CustomerInfo({
 }) {
   return (
     <div className="checkout-success-customer-info">
-      <h3 className="thank-you flex justify-start space-x-2">
+      <h3 className="thank-you flex justify-start space-x-8">
         <div className="check flex justify-center self-center text-interactive">
           <svg
             style={{ width: '3rem', height: '3rem' }}
@@ -46,41 +46,37 @@ export default function CustomerInfo({
         </div>
       </h3>
 
-      <div className="customer-info mt-3 mb-2">
-        <div className="grid grid-cols-2 gap-3">
-          <div className="grid grid-cols-1 gap-3">
-            <div className="mb-2">
-              <div className="mb-075">
-                <h3>{_('Contact information')}</h3>
-              </div>
-              <div className="text-textSubdued">
-                {customerFullName || billingAddress?.fullName}
-              </div>
-              <div className="text-textSubdued">{customerEmail}</div>
+      <div className="customer-info mt-12 mb-8">
+        <div className="grid grid-cols-2 gap-12">
+          <div>
+            <div className="mb-3">
+              <h3>{_('Contact information')}</h3>
+            </div>
+            <div className="text-textSubdued">
+              {customerFullName || billingAddress?.fullName}
+            </div>
+            <div className="text-textSubdued">{customerEmail}</div>
+          </div>
+          <div>
+            <div className="mb-3">
+              <h3>{_('Shipping Address')}</h3>
             </div>
-            <div>
-              <div className="mb-075">
-                <h3>{_('Shipping Address')}</h3>
-              </div>
-              <div className="text-textSubdued">
-                <AddressSummary address={shippingAddress} />
-              </div>
+            <div className="text-textSubdued">
+              <AddressSummary address={shippingAddress} />
             </div>
           </div>
-          <div className="grid grid-cols-1 gap-3">
-            <div className="mb-2">
-              <div className="mb-075">
-                <h3>{_('Payment Method')}</h3>
-              </div>
-              <div className="text-textSubdued">{paymentMethodName}</div>
+          <div>
+            <div className="mb-3">
+              <h3>{_('Payment Method')}</h3>
+            </div>
+            <div className="text-textSubdued">{paymentMethodName}</div>
+          </div>
+          <div>
+            <div className="mb-3">
+              <h3>{_('Billing Address')}</h3>
             </div>
-            <div>
-              <div className="mb-075">
-                <h3>{_('Billing Address')}</h3>
-              </div>
-              <div className="text-textSubdued">
-                <AddressSummary address={billingAddress} />
-              </div>
+            <div className="text-textSubdued">
+              <AddressSummary address={billingAddress} />
             </div>
           </div>
         </div>
@@ -96,6 +92,7 @@ CustomerInfo.propTypes = {
     customerFullName: PropTypes.string,
     customerEmail: PropTypes.string.isRequired,
     paymentMethodName: PropTypes.string.isRequired,
+    shippingNote: PropTypes.string,
     shippingAddress: PropTypes.shape({
       fullName: PropTypes.string,
       postcode: PropTypes.string,
@@ -143,6 +140,7 @@ export const query = `
       customerFullName
       customerEmail
       paymentMethodName
+      shippingNote
       shippingAddress {
         fullName
         postcode

package/src/modules/checkout/pages/frontStore/checkoutSuccess/ShippingNote.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function ShippingNote({
+  setting: { showShippingNote },
+  order: { shippingNote }
+}) {
+  return showShippingNote ? (
+    <div className="shipping-note mt-8">
+      <p className="italic">{shippingNote}</p>
+    </div>
+  ) : null;
+}
+
+ShippingNote.propTypes = {
+  setting: PropTypes.shape({
+    showShippingNote: PropTypes.bool
+  }),
+  order: PropTypes.shape({
+    shippingNote: PropTypes.string
+  })
+};
+
+ShippingNote.defaultProps = {
+  setting: {
+    showShippingNote: false
+  },
+  order: {
+    shippingNote: ''
+  }
+};
+
+export const layout = {
+  areaId: 'checkoutSuccessSummary',
+  sortOrder: 50
+};
+
+export const query = `
+  query Query {
+    order (uuid: getContextValue('orderId')) {
+      shippingNote
+    }
+    setting {
+      showShippingNote
+    }
+  }
+`;

package/src/modules/checkout/pages/frontStore/checkoutSuccess/Summary.jsx

@@ -5,24 +5,21 @@ import Area from '@components/common/Area';
 import { OrderSummary } from '@components/frontStore/checkout/success/summary/order/OrderSummary';
 import './Summary.scss';
 
-export default function Summary({
-  order,
-  setting: { displayCheckoutPriceIncludeTax }
-}) {
+export default function Summary({ order, setting: { priceIncludingTax } }) {
   return (
     <Area
       id="checkoutSuccessSummary"
-      className="checkout-summary hidden md:block"
+      className="checkout-summary h-full hidden md:block"
       coreComponents={[
         {
           component: { default: Items },
-          props: { items: order.items, displayCheckoutPriceIncludeTax },
+          props: { items: order.items, priceIncludingTax },
           sortOrder: 20,
           id: 'checkoutSuccessOrderSummaryItems'
         },
         {
           component: { default: OrderSummary },
-          props: { ...order, displayCheckoutPriceIncludeTax },
+          props: { ...order, priceIncludingTax },
           sortOrder: 30,
           id: 'checkoutSuccessOrderSummary'
         }
@@ -43,10 +40,10 @@ Summary.propTypes = {
         }).isRequired,
         thumbnail: PropTypes.string.isRequired,
         variantOptions: PropTypes.string.isRequired,
-        total: PropTypes.shape({
+        lineTotalInclTax: PropTypes.shape({
           text: PropTypes.string.isRequired
         }).isRequired,
-        subTotal: PropTypes.shape({
+        lineTotal: PropTypes.shape({
           text: PropTypes.string.isRequired
         }).isRequired
       })
@@ -67,13 +64,13 @@ Summary.propTypes = {
     subTotalInclTax: PropTypes.shape({
       text: PropTypes.string
     }),
-    taxAmount: PropTypes.shape({
+    totalTaxAmount: PropTypes.shape({
       text: PropTypes.string
     }),
     coupon: PropTypes.string
   }).isRequired,
   setting: PropTypes.shape({
-    displayCheckoutPriceIncludeTax: PropTypes.bool
+    priceIncludingTax: PropTypes.bool
   }).isRequired
 };
 
@@ -96,7 +93,7 @@ export const query = `
         value
         text
       }
-      taxAmount {
+      totalTaxAmount {
         value
         text
       }
@@ -118,18 +115,18 @@ export const query = `
         productSku
         qty
         variantOptions
-        total {
+        lineTotalInclTax {
           value
           text
         }
-        subTotal {
+        lineTotal {
           value
           text
         }
       }
     }
     setting {
-      displayCheckoutPriceIncludeTax
+      priceIncludingTax
     }
   }
 `;

package/src/modules/checkout/pages/frontStore/checkoutSuccess/route.json

@@ -1,4 +1,5 @@
 {
   "methods": ["GET"],
-  "path": "/checkout/success/:orderId?"
+  "path": "/checkout/success/:orderId?",
+  "name": "Checkout success page"
 }

package/src/modules/checkout/services/cart/Cart.js

@@ -6,14 +6,11 @@ const {
 } = require('@evershop/evershop/src/lib/util/registry');
 const { select } = require('@evershop/postgres-query-builder');
 const { pool } = require('@evershop/evershop/src/lib/postgres/connection');
-const { v4: uuidv4, validate } = require('uuid');
+const { v4: uuidv4 } = require('uuid');
 const {
   translate
 } = require('@evershop/evershop/src/lib/locale/translate/translate');
 const { DataObject } = require('./DataObject');
-const {
-  getProductsBaseQuery
-} = require('../../../catalog/services/getProductsBaseQuery');
 // eslint-disable-next-line no-multi-assign
 module.exports = exports = {};
 
@@ -22,19 +19,17 @@ class Item extends DataObject {
 
   #product;
 
-  constructor(theCart, initialData = {}) {
+  constructor(cart, initialData = {}) {
     super(getValueSync('cartItemFields', []), initialData);
-    this.#cart = theCart;
+    this.#cart = cart;
   }
 
   async getProduct() {
     if (this.#product) {
       return this.#product;
     }
-    const productQuery = getProductsBaseQuery();
-    const product = await productQuery
-      .where('product_id', '=', this.getData('product_id'))
-      .load(pool);
+    const loaderFunction = getValueSync('cartItemProductLoaderFunction');
+    const product = await loaderFunction(this.getData('product_id'));
     this.#product = product;
     return product;
   }
@@ -67,7 +62,7 @@ class Cart extends DataObject {
 
   /**
    *
-   * @param {string} productID | product_id, sku, or uuid
+   * @param {string} productID | product_id
    * @param {number} qty
    * @returns
    */
@@ -118,27 +113,36 @@ class Cart extends DataObject {
     }
   }
 
-  async createItem(productID, qty) {
-    // Make sure the qty is a number and greater than 0
-    if (typeof qty !== 'number' || qty <= 0) {
-      throw new Error('Invalid quantity');
+  async updateItemQty(uuid, qty, action) {
+    if (['increase', 'decrease'].indexOf(action) === -1) {
+      throw new Error('Invalid action');
+    }
+    const item = this.getItem(uuid);
+    if (!item) {
+      throw new Error('Item not found');
     }
-    const productQuery = getProductsBaseQuery();
-    if (validate(productID)) {
-      productQuery.where('product.uuid', '=', productID);
-    } else if (/^\d+$/.test(productID)) {
-      productQuery
-        .where('product.product_id', '=', productID)
-        .or('product.sku', '=', productID);
+    if (action === 'increase') {
+      await item.setData('qty', item.getData('qty') + parseInt(qty, 10));
     } else {
-      productQuery.where('product.sku', '=', productID);
+      const currentQty = item.getData('qty');
+      const newQty = Math.max(currentQty - parseInt(qty, 10), 0);
+      if (newQty === 0) {
+        await this.removeItem(uuid);
+      } else {
+        await item.setData('qty', newQty);
+      }
     }
-    const product = await productQuery.load(pool);
-    if (!product) {
-      throw new Error(translate('Product not found'));
+    await this.build();
+    return item;
+  }
+
+  async createItem(productId, qty) {
+    // Make sure the qty is a number, not NaN and greater than 0
+    if (typeof qty !== 'number' || Number.isNaN(qty) || qty <= 0) {
+      throw new Error(translate('Invalid quantity'));
     }
     const item = new Item(this, {
-      product_id: product.product_id,
+      product_id: productId,
       qty
     });
     await item.build();