@evershop/evershop 1.0.0 → 1.1.0

package/src/components/admin/{oms → checkout}/shippingSetting/MethodForm.jsx

@@ -10,12 +10,16 @@ import CreatableSelect from 'react-select/creatable';
 import Spinner from '@components/common/Spinner';
 import { useQuery } from 'urql';
 import { toast } from 'react-toastify';
+import PriceBasedPrice from '@components/admin/checkout/shippingSetting/PriceBasedPrice';
+import WeightBasedPrice from '@components/admin/checkout/shippingSetting/WeightBasedPrice';
+import { Input } from '@components/common/form/fields/Input';
 
 const MethodsQuery = `
   query Methods {
     shippingMethods {
       value: shippingMethodId
       label: name
+      updateApi
     }
     createShippingMethodApi: url(routeId: "createShippingMethod")
   }
@@ -83,9 +87,18 @@ Condition.defaultProps = {
 };
 
 function MethodForm({ saveMethodApi, closeModal, getZones, method }) {
-  const [type, setType] = React.useState(
-    method?.calculateApi ? 'api' : 'flat_rate'
-  );
+  const [type, setType] = React.useState(() => {
+    if (method?.calculateApi) {
+      return 'api';
+    }
+    if (method?.priceBasedCost) {
+      return 'price_based_rate';
+    }
+    if (method?.weightBasedCost) {
+      return 'weight_based_rate';
+    }
+    return 'flat_rate';
+  });
   const [isLoading, setIsLoading] = React.useState(false);
   const [shippingMethod, setMethod] = React.useState(
     method
@@ -98,6 +111,8 @@ function MethodForm({ saveMethodApi, closeModal, getZones, method }) {
   const [hasCondition, setHasCondition] = React.useState(
     !!method?.conditionType
   );
+  const [name, setName] = React.useState(method?.name || '');
+  const [updatingName, setUpdatingName] = React.useState(false);
 
   const [result, reexecuteQuery] = useQuery({
     query: MethodsQuery
@@ -127,6 +142,10 @@ function MethodForm({ saveMethodApi, closeModal, getZones, method }) {
     );
   }
 
+  const currentMethod = result.data.shippingMethods.find(
+    (m) => m.value === shippingMethod?.value
+  );
+
   return (
     <Card title="Shipping method">
       <Form
@@ -138,21 +157,78 @@ function MethodForm({ saveMethodApi, closeModal, getZones, method }) {
           if (!response.error) {
             await getZones({ requestPolicy: 'network-only' });
             closeModal();
+            toast.success('Shipping method saved successfully');
           } else {
             toast.error(response.error.message);
           }
         }}
       >
         <Card.Session title="Method name">
-          <CreatableSelect
-            isClearable
-            isDisabled={isLoading}
-            isLoading={isLoading}
-            onChange={(newValue) => setMethod(newValue)}
-            onCreateOption={handleCreate}
-            options={result.data.shippingMethods}
-            value={shippingMethod}
-          />
+          {!method ? (
+            <CreatableSelect
+              isClearable
+              isDisabled={isLoading}
+              isLoading={isLoading}
+              onChange={(newValue) => setMethod(newValue)}
+              onCreateOption={handleCreate}
+              options={result.data.shippingMethods}
+              value={shippingMethod}
+            />
+          ) : (
+            <div className="flex gap-1 justify-start items-center">
+              <Input
+                name="name"
+                type="text"
+                placeholder="Method name"
+                validationRules={['notEmpty']}
+                value={name}
+                disabled={!updatingName}
+                suffix={
+                  <a
+                    href="#"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      if (updatingName) setName(method.name);
+                      setUpdatingName(!updatingName);
+                    }}
+                  >
+                    <span className="text-interactive">
+                      {updatingName ? 'Cancel' : 'Edit'}
+                    </span>
+                  </a>
+                }
+                onChange={(e) => setName(e.target.value)}
+              />
+              {updatingName && (
+                <Button
+                  title="Save"
+                  variant="primary"
+                  onAction={async () => {
+                    // Use fetch to call the API (method.updateApi) to update the method name
+                    // The API should accept a PATCH request with the new name as the payload
+                    // The API should return the updated method object
+                    const response = await fetch(currentMethod.updateApi, {
+                      method: 'PATCH',
+                      headers: {
+                        'Content-Type': 'application/json'
+                      },
+                      credentials: 'same-origin',
+                      body: JSON.stringify({
+                        name
+                      })
+                    });
+                    const data = await response.json();
+                    if (response.ok) {
+                      setName(data.name);
+                      setUpdatingName(false);
+                    } else {
+                      toast.error(data.error.message);
+                    }
+                  }}
+                />
+              )}
+            </div>
+          )}
           <Field
             type="hidden"
             name="method_id"
@@ -166,6 +242,8 @@ function MethodForm({ saveMethodApi, closeModal, getZones, method }) {
             name="calculation_type"
             options={[
               { text: 'Flat rate', value: 'flat_rate' },
+              { text: 'Price based rate', value: 'price_based_rate' },
+              { text: 'Weight based rate', value: 'weight_based_rate' },
               { text: 'API calculate', value: 'api' }
             ]}
             defaultValue={method?.calculateApi ? 'api' : 'flat_rate'}
@@ -183,6 +261,12 @@ function MethodForm({ saveMethodApi, closeModal, getZones, method }) {
               value={method?.cost?.value}
             />
           )}
+          {type === 'price_based_rate' && (
+            <PriceBasedPrice lines={method?.priceBasedCost || []} />
+          )}
+          {type === 'weight_based_rate' && (
+            <WeightBasedPrice lines={method?.weightBasedCost || []} />
+          )}
           {type === 'api' && (
             <Field
               name="calculate_api"
@@ -210,7 +294,14 @@ function MethodForm({ saveMethodApi, closeModal, getZones, method }) {
         </Card.Session>
         <Card.Session>
           <div className="flex justify-end gap-1">
-            <Button title="Cancel" variant="secondary" onAction={closeModal} />
+            <Button
+              title="Cancel"
+              variant="secondary"
+              onAction={async () => {
+                await getZones({ requestPolicy: 'network-only' });
+                closeModal();
+              }}
+            />
             <Button
               title="Save"
               variant="primary"
@@ -242,6 +333,26 @@ MethodForm.propTypes = {
     cost: PropTypes.shape({
       value: PropTypes.string
     }),
+    priceBasedCost: PropTypes.arrayOf(
+      PropTypes.shape({
+        minPrice: PropTypes.shape({
+          value: PropTypes.number
+        }),
+        cost: PropTypes.shape({
+          value: PropTypes.number
+        })
+      })
+    ),
+    weightBasedCost: PropTypes.arrayOf(
+      PropTypes.shape({
+        minWeight: PropTypes.shape({
+          value: PropTypes.number
+        }),
+        cost: PropTypes.shape({
+          value: PropTypes.number
+        })
+      })
+    ),
     conditionType: PropTypes.string,
     min: PropTypes.string,
     max: PropTypes.string

package/src/components/admin/{oms → checkout}/shippingSetting/Methods.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useModal } from '@components/common/modal/useModal';
-import Method from './Method';
-import MethodForm from './MethodForm';
+import Method from '@components/admin/checkout/shippingSetting/Method';
+import MethodForm from '@components/admin/checkout/shippingSetting/MethodForm';
 
 export function Methods({ getZones, methods, addMethodApi }) {
   const modal = useModal();

package/src/components/admin/checkout/shippingSetting/PriceBasedPrice.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field } from '@components/common/form/Field';
+
+export default function PriceBasedPrice({ lines }) {
+  // This is a table with 3 columns: Min Price, Shipping Cost, and Action
+  const [rows, setRows] = React.useState(
+    lines.map((line) => ({
+      ...line,
+      key: Math.random().toString(36).substring(7)
+    }))
+  );
+  return (
+    <div className="my-2">
+      <table className="border-collapse divide-y">
+        <thead>
+          <tr>
+            <th className="border-none">Min Price</th>
+            <th className="border-none">Shipping Cost</th>
+            <th className="border-none">Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, index) => (
+            // Create a random key for each row
+            <tr key={row.key} className="border-divider py-2">
+              <td className="border-none">
+                <Field
+                  name={`price_based_cost[${index}][min_price]`}
+                  placeholder="Min Price"
+                  type="text"
+                  value={row.minPrice?.value}
+                  validationRules={['notEmpty', 'number']}
+                />
+              </td>
+              <td className="border-none">
+                <Field
+                  name={`price_based_cost[${index}][cost]`}
+                  placeholder="Shipping Cost"
+                  type="text"
+                  value={row.cost?.value}
+                  validationRules={['notEmpty', 'number']}
+                />
+              </td>
+              <td className="border-none">
+                <a
+                  href="#"
+                  onClick={() => {
+                    setRows(rows.filter((r) => r.key !== row.key));
+                  }}
+                  className="text-critical"
+                >
+                  Delete
+                </a>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colSpan="3" className="border-none">
+              <a
+                href="#"
+                className="text-interactive"
+                onClick={() => {
+                  setRows([
+                    ...rows,
+                    {
+                      min_price: '',
+                      shipping_cost: '',
+                      key: Math.random().toString(36).substring(7)
+                    }
+                  ]);
+                }}
+              >
+                + Add Line
+              </a>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  );
+}
+
+PriceBasedPrice.propTypes = {
+  lines: PropTypes.arrayOf(
+    PropTypes.shape({
+      minPrice: PropTypes.shape({
+        value: PropTypes.number.isRequired
+      }),
+      cost: PropTypes.shape({
+        value: PropTypes.number.isRequired
+      })
+    })
+  )
+};
+
+PriceBasedPrice.defaultProps = {
+  lines: []
+};

package/src/components/admin/checkout/shippingSetting/WeightBasedPrice.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field } from '@components/common/form/Field';
+
+export default function WeightBasedPrice({ lines }) {
+  // This is a table with 3 columns: Min Price, Shipping Cost, and Action
+  const [rows, setRows] = React.useState(
+    lines.map((line) => ({
+      ...line,
+      key: Math.random().toString(36).substring(7)
+    }))
+  );
+  return (
+    <div className="my-2">
+      <table className="border-collapse divide-y">
+        <thead>
+          <tr>
+            <th className="border-none">Min Weight</th>
+            <th className="border-none">Shipping Cost</th>
+            <th className="border-none">Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, index) => (
+            // Create a random key for each row
+            <tr key={row.key} className="border-divider py-2">
+              <td className="border-none">
+                <Field
+                  name={`weight_based_cost[${index}][min_weight]`}
+                  placeholder="Min Weight"
+                  type="text"
+                  value={row.minWeight?.value}
+                  validationRules={['notEmpty', 'number']}
+                />
+              </td>
+              <td className="border-none">
+                <Field
+                  name={`weight_based_cost[${index}][cost]`}
+                  placeholder="Shipping Cost"
+                  type="text"
+                  value={row.cost?.value}
+                  validationRules={['notEmpty', 'number']}
+                />
+              </td>
+              <td className="border-none">
+                <a
+                  href="#"
+                  onClick={() => {
+                    setRows(rows.filter((r) => r.key !== row.key));
+                  }}
+                  className="text-critical"
+                >
+                  Delete
+                </a>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colSpan="3" className="border-none">
+              <a
+                href="#"
+                className="text-interactive"
+                onClick={() => {
+                  setRows([
+                    ...rows,
+                    {
+                      min_price: '',
+                      shipping_cost: '',
+                      key: Math.random().toString(36).substring(7)
+                    }
+                  ]);
+                }}
+              >
+                + Add Line
+              </a>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  );
+}
+
+WeightBasedPrice.propTypes = {
+  lines: PropTypes.arrayOf(
+    PropTypes.shape({
+      minWeight: PropTypes.shape({
+        value: PropTypes.number.isRequired
+      }),
+      cost: PropTypes.shape({
+        value: PropTypes.number.isRequired
+      })
+    })
+  )
+};
+
+WeightBasedPrice.defaultProps = {
+  lines: []
+};

package/src/components/admin/{oms → checkout}/shippingSetting/Zone.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import axios from 'axios';
+import { toast } from 'react-toastify';
 import { Card } from '@components/admin/cms/Card';
 import MapIcon from '@heroicons/react/solid/esm/LocationMarkerIcon';
 import { useModal } from '@components/common/modal/useModal';
-import ZoneForm from './ZoneForm';
-import { Methods } from './Methods';
+import ZoneForm from '@components/admin/checkout/shippingSetting/ZoneForm';
+import { Methods } from '@components/admin/checkout/shippingSetting/Methods';
 
 function Zone({ zone, countries, getZones }) {
   const modal = useModal();
@@ -13,7 +15,7 @@ function Zone({ zone, countries, getZones }) {
       title={
         <div className="flex justify-between items-center gap-2">
           <div>{zone.name}</div>
-          <div>
+          <div className="flex justify-between gap-2">
             <a
               href="#"
               className="text-interactive"
@@ -24,6 +26,33 @@ function Zone({ zone, countries, getZones }) {
             >
               Edit Zone
             </a>
+            <a
+              className="text-critical"
+              href="#"
+              onClick={async (e) => {
+                e.preventDefault();
+                try {
+                  const response = await axios.delete(zone.deleteApi);
+                  if (response.status === 200) {
+                    // Toast success
+                    toast.success('Zone removed successfully');
+                    // Delay for 2 seconds
+                    setTimeout(() => {
+                      // Reload page
+                      window.location.reload();
+                    }, 1500);
+                  } else {
+                    // Toast error
+                    toast.error('Failed to remove zone');
+                  }
+                } catch (error) {
+                  // Toast error
+                  toast.error('Failed to remove zone');
+                }
+              }}
+            >
+              Remove Zone
+            </a>
           </div>
         </div>
       }
@@ -35,7 +64,7 @@ function Zone({ zone, countries, getZones }) {
           </div>
           <div className="flex-grow px-1">
             <div>
-              <b>{zone.country.name}</b>
+              <b>{zone.country?.name || 'Worldwide'}</b>
             </div>
             <div>
               {zone.provinces
@@ -97,6 +126,7 @@ Zone.propTypes = {
       })
     ),
     addMethodApi: PropTypes.string,
+    deleteApi: PropTypes.string,
     updateApi: PropTypes.string
   }).isRequired,
   countries: PropTypes.arrayOf(

package/src/components/admin/{oms → checkout}/shippingSetting/Zones.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Zone from './Zone';
+import Zone from '@components/admin/checkout/shippingSetting/Zone';
 
 export function Zones({ countries, getZones, zones }) {
   return (
     <>
-      {zones.map((zone) => <Zone zone={zone} getZones={getZones} countries={countries} />)}
+      {zones.map((zone) => (
+        <Zone zone={zone} getZones={getZones} countries={countries} />
+      ))}
     </>
   );
 }
@@ -34,7 +36,8 @@ Zones.propTypes = {
           uuid: PropTypes.string.isRequired,
           name: PropTypes.string.isRequired
         })
-      ).isRequired
+      ).isRequired,
+      deleteApi: PropTypes.string.isRequired
     })
   ).isRequired,
   getZones: PropTypes.func.isRequired

package/src/components/admin/promotion/couponEdit/AttributeGroupSelector.jsx

@@ -37,13 +37,13 @@ function AttributeGroupSelector({
     variables: {
       filters: inputValue
         ? [
-            { key: 'name', operation: '=', value: inputValue },
-            { key: 'page', operation: '=', value: page.toString() },
-            { key: 'limit', operation: '=', value: limit.toString() }
+            { key: 'name', operation: 'eq', value: inputValue },
+            { key: 'page', operation: 'eq', value: page.toString() },
+            { key: 'limit', operation: 'eq', value: limit.toString() }
           ]
         : [
-            { key: 'limit', operation: '=', value: limit.toString() },
-            { key: 'page', operation: '=', value: page.toString() }
+            { key: 'limit', operation: 'eq', value: limit.toString() },
+            { key: 'page', operation: 'eq', value: page.toString() }
           ]
     },
     pause: true

package/src/components/admin/promotion/couponEdit/CategorySelector.jsx

@@ -30,13 +30,13 @@ function CategorySelector({ onSelect, onUnSelect, selectedIDs, closeModal }) {
     variables: {
       filters: inputValue
         ? [
-            { key: 'name', operation: '=', value: inputValue },
-            { key: 'page', operation: '=', value: page.toString() },
-            { key: 'limit', operation: '=', value: limit.toString() }
+            { key: 'name', operation: 'eq', value: inputValue },
+            { key: 'page', operation: 'eq', value: page.toString() },
+            { key: 'limit', operation: 'eq', value: limit.toString() }
           ]
         : [
-            { key: 'limit', operation: '=', value: limit.toString() },
-            { key: 'page', operation: '=', value: page.toString() }
+            { key: 'limit', operation: 'eq', value: limit.toString() },
+            { key: 'page', operation: 'eq', value: page.toString() }
           ]
     },
     pause: true

package/src/components/admin/promotion/couponEdit/CollectionSelector.jsx

@@ -30,13 +30,13 @@ function CollectionSelector({ onSelect, onUnSelect, selectedIDs, closeModal }) {
     variables: {
       filters: inputValue
         ? [
-            { key: 'name', operation: '=', value: inputValue },
-            { key: 'page', operation: '=', value: page.toString() },
-            { key: 'limit', operation: '=', value: limit.toString() }
+            { key: 'name', operation: 'eq', value: inputValue },
+            { key: 'page', operation: 'eq', value: page.toString() },
+            { key: 'limit', operation: 'eq', value: limit.toString() }
           ]
         : [
-            { key: 'limit', operation: '=', value: limit.toString() },
-            { key: 'page', operation: '=', value: page.toString() }
+            { key: 'limit', operation: 'eq', value: limit.toString() },
+            { key: 'page', operation: 'eq', value: page.toString() }
           ]
     },
     pause: true

package/src/components/admin/promotion/couponEdit/ProductSkuSelector.jsx

@@ -46,13 +46,13 @@ function ProductSkuSelector({
     variables: {
       filters: inputValue
         ? [
-            { key: 'keyword', operation: '=', value: inputValue },
-            { key: 'page', operation: '=', value: page.toString() },
-            { key: 'limit', operation: '=', value: limit.toString() }
+            { key: 'keyword', operation: 'eq', value: inputValue },
+            { key: 'page', operation: 'eq', value: page.toString() },
+            { key: 'limit', operation: 'eq', value: limit.toString() }
           ]
         : [
-            { key: 'limit', operation: '=', value: limit.toString() },
-            { key: 'page', operation: '=', value: page.toString() }
+            { key: 'limit', operation: 'eq', value: limit.toString() },
+            { key: 'page', operation: 'eq', value: page.toString() }
           ]
     },
     pause: true
@@ -144,7 +144,28 @@ function ProductSkuSelector({
                     className="grid grid-cols-8 gap-2 py-1 border-divider items-center"
                   >
                     <div className="col-span-1">
-                      <img src={product.image?.url} alt={product.name} />
+                      <div className="text-border border border-divider p-075 rounded flex justify-center">
+                        {product.image?.url && (
+                          <img src={product.image?.url} alt={product.name} />
+                        )}
+                        {!product.image?.url && (
+                          <svg
+                            className="self-center"
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="2rem"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                            />
+                          </svg>
+                        )}
+                      </div>
                     </div>
                     <div className="col-span-5">
                       <h3>{product.name}</h3>

package/src/components/common/context/checkout.jsx

@@ -21,16 +21,6 @@ export function CheckoutProvider({
   const [, setError] = useState(null);
 
   // Call api to current url when steps change
-  useEffect(() => {
-    const reload = async () => {
-      const url = new URL(window.location.href, window.location.origin);
-      url.searchParams.append('ajax', true);
-      await AppContextDispatch.fetchPageData(url);
-      url.searchParams.delete('ajax');
-    };
-    reload();
-  }, [steps]);
-
   useEffect(() => {
     const placeOrder = async () => {
       // If order is placed, do nothing
@@ -49,14 +39,18 @@ export function CheckoutProvider({
         setOrderPlaced(true);
         setOrderId(response.data.data.uuid);
         setError(null);
-        // let redirectUrl = response.data.data.redirect || checkoutSuccessUrl;
-
-        // window.location.href = redirectUrl;
       } else {
         setError(response.data.error.message);
       }
     };
-    placeOrder();
+    const reload = async () => {
+      const url = new URL(window.location.href, window.location.origin);
+      url.searchParams.append('ajax', true);
+      await AppContextDispatch.fetchPageData(url);
+      url.searchParams.delete('ajax');
+      await placeOrder();
+    };
+    reload();
   }, [steps]);
 
   const getPaymentMethods = async () => {