Dev

packages/evershop/src/components/frontStore/checkout/checkout/summary/Cart.jsx

@@ -12,7 +12,7 @@ function CartSummary({
   subTotalInclTax,
   grandTotal,
   discountAmount,
-  taxAmount,
+  totalTaxAmount,
   shippingMethodName,
   shippingFeeInclTax,
   coupon,
@@ -25,10 +25,10 @@ function CartSummary({
         total={priceIncludingTax ? subTotalInclTax.text : subTotal.text}
       />
       <Shipping method={shippingMethodName} cost={shippingFeeInclTax.text} />
-      {!priceIncludingTax && <Tax amount={taxAmount.text} />}
+      {!priceIncludingTax && <Tax amount={totalTaxAmount.text} />}
       <Discount code={coupon} discount={discountAmount.text} />
       <Total
-        taxAmount={taxAmount.text}
+        totalTaxAmount={totalTaxAmount.text}
         total={grandTotal.text}
         priceIncludingTax={priceIncludingTax}
       />
@@ -54,7 +54,7 @@ CartSummary.propTypes = {
   subTotalInclTax: PropTypes.shape({
     text: PropTypes.string.isRequired
   }),
-  taxAmount: PropTypes.shape({
+  totalTaxAmount: PropTypes.shape({
     text: PropTypes.string.isRequired
   }),
   totalQty: PropTypes.string,
@@ -79,7 +79,7 @@ CartSummary.defaultProps = {
   subTotalInclTax: {
     text: ''
   },
-  taxAmount: {
+  totalTaxAmount: {
     text: ''
   },
   totalQty: '',

packages/evershop/src/components/frontStore/checkout/checkout/summary/cart/Total.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { _ } from '@evershop/evershop/src/lib/locale/translate';
 
-export function Total({ total, taxAmount, priceIncludingTax }) {
+export function Total({ total, totalTaxAmount, priceIncludingTax }) {
   return (
     <div className="summary-row grand-total flex justify-between">
       {(priceIncludingTax && (
@@ -13,7 +13,7 @@ export function Total({ total, taxAmount, priceIncludingTax }) {
             </div>
             <div>
               <span className="italic">
-                ({_('Inclusive of tax ${taxAmount}', { taxAmount })})
+                ({_('Inclusive of tax ${totalTaxAmount}', { totalTaxAmount })})
               </span>
             </div>
           </div>
@@ -29,7 +29,7 @@ export function Total({ total, taxAmount, priceIncludingTax }) {
 
 Total.propTypes = {
   total: PropTypes.string.isRequired,
-  taxAmount: PropTypes.string.isRequired,
+  totalTaxAmount: PropTypes.string.isRequired,
   priceIncludingTax: PropTypes.bool
 };
 

packages/evershop/src/components/frontStore/checkout/success/summary/order/OrderSummary.jsx

@@ -12,7 +12,7 @@ function OrderSummary({
   subTotalInclTax,
   shippingMethodName,
   shippingFeeInclTax,
-  taxAmount,
+  totalTaxAmount,
   discountAmount,
   coupon,
   grandTotal,
@@ -25,12 +25,12 @@ function OrderSummary({
         total={priceIncludingTax ? subTotalInclTax.text : subTotal.text}
       />
       <Shipping method={shippingMethodName} cost={shippingFeeInclTax.text} />
-      {!priceIncludingTax && <Tax taxClass="" amount={taxAmount.text} />}
+      {!priceIncludingTax && <Tax taxClass="" amount={totalTaxAmount.text} />}
       <Discount code={coupon} discount={discountAmount.text} />
       <Total
         total={grandTotal.text}
         priceIncludingTax={priceIncludingTax}
-        taxAmount={taxAmount.text}
+        totalTaxAmount={totalTaxAmount.text}
       />
     </div>
   );
@@ -64,7 +64,7 @@ OrderSummary.propTypes = {
   subTotalInclTax: PropTypes.shape({
     text: PropTypes.string
   }),
-  taxAmount: PropTypes.shape({
+  totalTaxAmount: PropTypes.shape({
     text: PropTypes.string
   }),
   priceIncludingTax: PropTypes.bool.isRequired
@@ -88,7 +88,7 @@ OrderSummary.defaultProps = {
   subTotalInclTax: {
     text: '0.00'
   },
-  taxAmount: {
+  totalTaxAmount: {
     text: '0.00'
   }
 };

packages/evershop/src/components/frontStore/checkout/success/summary/order/Total.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { _ } from '@evershop/evershop/src/lib/locale/translate';
 
-export function Total({ total, taxAmount, priceIncludingTax }) {
+export function Total({ total, totalTaxAmount, priceIncludingTax }) {
   return (
     <div className="summary-row grand-total">
       {(priceIncludingTax && (
@@ -13,7 +13,7 @@ export function Total({ total, taxAmount, priceIncludingTax }) {
             </div>
             <div>
               <span className="italic">
-                ({_('Inclusive of tax ${taxAmount}', { taxAmount })})
+                ({_('Inclusive of tax ${totalTaxAmount}', { totalTaxAmount })})
               </span>
             </div>
           </div>
@@ -29,6 +29,6 @@ export function Total({ total, taxAmount, priceIncludingTax }) {
 
 Total.propTypes = {
   total: PropTypes.number.isRequired,
-  taxAmount: PropTypes.number.isRequired,
+  totalTaxAmount: PropTypes.number.isRequired,
   priceIncludingTax: PropTypes.bool.isRequired
 };

packages/evershop/src/modules/catalog/bootstrap.js

@@ -96,12 +96,12 @@ module.exports = () => {
     product: {
       image: {
         thumbnail: {
-          width: 100.6,
-          height: 100.5
+          width: 100,
+          height: 100
         },
         listing: {
-          width: 300.5,
-          height: 300.5
+          width: 300,
+          height: 300
         },
         single: {
           width: 500,

packages/evershop/src/modules/checkout/graphql/types/Cart/Cart.graphql

@@ -145,6 +145,7 @@ type Cart implements ShoppingCart {
   coupon: String
   shippingFeeExclTax: Price!
   shippingFeeInclTax: Price!
+  shippingTaxAmount: Price!
   discountAmount: Price!
   subTotal: Price!
   subTotalInclTax: Price!
@@ -154,6 +155,7 @@ type Cart implements ShoppingCart {
   totalWeight: Weight!
   taxAmount: Price!
   taxAmountBeforeDiscount: Price!
+  totalTaxAmount: Price!
   grandTotal: Price!
   shippingMethod: String
   shippingMethodName: String

packages/evershop/src/modules/checkout/migration/Version-1.0.6.js

@@ -180,4 +180,22 @@ module.exports = exports = async (connection) => {
     connection,
     `UPDATE "order" SET sub_total_with_discount_incl_tax = sub_total_with_discount + tax_amount`
   );
+
+  // Add a column 'total_tax_amount' to the cart table if it does not exist
+  await execute(
+    connection,
+    'ALTER TABLE "cart" ADD COLUMN IF NOT EXISTS "total_tax_amount" decimal(12,4)'
+  );
+
+  // Update the value for the new column 'total_tax_amount' on the cart table get value from the `tax_amount` column
+  await execute(connection, `UPDATE "cart" SET total_tax_amount = tax_amount`);
+
+  // Add a column 'total_tax_amount' to the order table if it does not exist
+  await execute(
+    connection,
+    'ALTER TABLE "order" ADD COLUMN IF NOT EXISTS "total_tax_amount" decimal(12,4)'
+  );
+
+  // Update the value for the new column 'total_tax_amount' on the cart table get value from the `tax_amount` column
+  await execute(connection, `UPDATE "order" SET total_tax_amount = tax_amount`);
 };

packages/evershop/src/modules/checkout/pages/frontStore/cart/Summary.jsx

@@ -51,7 +51,7 @@ function Summary({
     totalQty,
     subTotal,
     subTotalInclTax,
-    taxAmount,
+    totalTaxAmount,
     grandTotal,
     coupon,
     discountAmount
@@ -89,7 +89,7 @@ function Summary({
                 default: priceIncludingTax ? () => null : Tax
               },
               props: {
-                amount: taxAmount.text
+                amount: totalTaxAmount.text
               },
               sortOrder: 30,
               id: 'tax'
@@ -101,7 +101,7 @@ function Summary({
               },
               props: {
                 total: grandTotal.text,
-                taxAmount: taxAmount.text,
+                totalTaxAmount: totalTaxAmount.text,
                 priceIncludingTax
               },
               sortOrder: 30,
@@ -129,7 +129,7 @@ Summary.propTypes = {
       value: PropTypes.number,
       text: PropTypes.string
     }),
-    taxAmount: PropTypes.shape({
+    totalTaxAmount: PropTypes.shape({
       value: PropTypes.number,
       text: PropTypes.string
     }),
@@ -172,7 +172,7 @@ export const query = `
         text
       }
 
-      taxAmount {
+      totalTaxAmount {
         value
         text
       }

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

@@ -1,38 +1,69 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
-import { Form } from '@components/common/form/Form';
-import { Field } from '@components/common/form/Field';
 import { useAppDispatch } from '@components/common/context/app';
 import { _ } from '@evershop/evershop/src/lib/locale/translate';
+import Button from '@components/common/form/Button';
 
 export default function ShippingNote({
   setting: { showShippingNote },
   cart: { shippingNote, addNoteApi }
 }) {
   const AppContextDispatch = useAppDispatch();
+  const [note, setNote] = React.useState(shippingNote);
+  const [submitting, setSubmitting] = React.useState(false);
   return showShippingNote ? (
     <div className="shipping-note mt-8">
-      <Form
-        id="shippingNoteForm"
-        action={addNoteApi}
-        onSuccess={async (response) => {
-          if (response.error) {
-            toast.error(response.error.message);
-          } else {
-            const url = new URL(window.location.href);
-            url.searchParams.set('ajax', true);
-            await AppContextDispatch.fetchPageData(url);
-          }
-        }}
-      >
-        <Field
-          name="note"
-          type="textarea"
-          value={shippingNote}
-          placeholder={_('Add a note to your order')}
+      <div className="form-field-container null">
+        <div className="field-wrapper flex flex-grow">
+          <textarea
+            type="text"
+            className="form-field"
+            id="note"
+            name="note"
+            placeholder={_('Add a note to your order')}
+            onChange={(e) => setNote(e.target.value)}
+          >
+            {note}
+          </textarea>
+          <div className="field-border" />
+        </div>
+      </div>
+      <div className="mt-3">
+        <Button
+          title="Save"
+          variant="primary"
+          isLoading={submitting}
+          onAction={() => {
+            setSubmitting(true);
+            // Use fetch to send the note to the server
+            fetch(addNoteApi, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify({ note }),
+              credentials: 'include'
+            })
+              .then(async (response) => {
+                if (response.ok) {
+                  const url = new URL(window.location.href);
+                  url.searchParams.set('ajax', true);
+                  await AppContextDispatch.fetchPageData(url);
+                  toast.success(_('Note saved successfully'));
+                } else {
+                  toast.error(_('Failed to save note'));
+                }
+              })
+              .catch(() => {
+                toast.error(_('Failed to save note'));
+              })
+              .finally(() => {
+                setSubmitting(false);
+              });
+          }}
         />
-      </Form>
+      </div>
     </div>
   ) : null;
 }

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

@@ -60,7 +60,7 @@ Summary.propTypes = {
     discountAmount: PropTypes.shape({
       text: PropTypes.string
     }),
-    taxAmount: PropTypes.shape({
+    totalTaxAmount: PropTypes.shape({
       text: PropTypes.string
     }),
     shippingFeeInclTax: PropTypes.shape({
@@ -99,7 +99,7 @@ export const query = `
         value
         text
       }
-      taxAmount {
+      totalTaxAmount {
         value
         text
       }

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

@@ -57,7 +57,7 @@ Summary.propTypes = {
     discountAmount: PropTypes.shape({
       text: PropTypes.string
     }),
-    taxAmount: PropTypes.shape({
+    totalTaxAmount: PropTypes.shape({
       text: PropTypes.string
     }),
     shippingFeeInclTax: PropTypes.shape({
@@ -96,7 +96,7 @@ export const query = `
         value
         text
       }
-      taxAmount {
+      totalTaxAmount {
         value
         text
       }

packages/evershop/src/modules/checkout/pages/frontStore/checkoutSuccess/Summary.jsx

@@ -64,7 +64,7 @@ Summary.propTypes = {
     subTotalInclTax: PropTypes.shape({
       text: PropTypes.string
     }),
-    taxAmount: PropTypes.shape({
+    totalTaxAmount: PropTypes.shape({
       text: PropTypes.string
     }),
     coupon: PropTypes.string
@@ -93,7 +93,7 @@ export const query = `
         value
         text
       }
-      taxAmount {
+      totalTaxAmount {
         value
         text
       }