@evershop/evershop 1.0.0 → 1.2.0

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-8">
+      <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-8">
+              <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,19 +1,21 @@
 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();
   return (
     <Card.Session
       title={
-        <div className="flex justify-between items-center gap-2">
+        <div className="flex justify-between items-center gap-8">
           <div>{zone.name}</div>
-          <div>
+          <div className="flex justify-between gap-8">
             <a
               href="#"
               className="text-interactive"
@@ -24,18 +26,45 @@ 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>
       }
     >
       <div className="divide-y border rounded border-divider">
-        <div className="flex justify-start items-center border-divider mt-2">
-          <div className="p-2">
+        <div className="flex justify-start items-center border-divider mt-8">
+          <div className="p-8">
             <MapIcon width={25} height={25} fill="#008060" />
           </div>
-          <div className="flex-grow px-1">
+          <div className="flex-grow px-4">
             <div>
-              <b>{zone.country.name}</b>
+              <b>{zone.country?.name || 'Worldwide'}</b>
             </div>
             <div>
               {zone.provinces
@@ -46,8 +75,8 @@ function Zone({ zone, countries, getZones }) {
             </div>
           </div>
         </div>
-        <div className="flex justify-start items-center border-divider mt-2">
-          <div className="flex-grow px-1">
+        <div className="flex justify-start items-center border-divider mt-8">
+          <div className="flex-grow px-4">
             <Methods
               methods={zone.methods}
               getZones={getZones}
@@ -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/ZoneForm.jsx

@@ -84,7 +84,7 @@ function ZoneForm({
           />
         </Card.Session>
         <Card.Session>
-          <div className="flex justify-end gap-1">
+          <div className="flex justify-end gap-4">
             <Button title="Cancel" variant="secondary" onAction={closeModal} />
             <Button
               title="Save"

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/cms/Card.jsx

@@ -9,7 +9,7 @@ function Card({ title, actions = [], subdued = false, children }) {
         <div className="flex justify-between card-header">
           {title && <h2 className="card-title">{title}</h2>}
           {actions.length > 0 && (
-            <div className="flex space-x-075">
+            <div className="flex space-x-3">
               {actions.map((action, index) => {
                 const className = {
                   primary: 'text-primary',
@@ -69,10 +69,10 @@ const Session = function Session({ actions = [], title, children }) {
   return (
     <div className="card-section border-b box-border">
       {(title || actions.length > 0) && (
-        <div className="flex justify-between card-section-header mb-1">
+        <div className="flex justify-between card-section-header mb-4">
           {title && <h3 className="card-session-title">{title}</h3>}
           {actions.length > 0 && (
-            <div className="flex space-x-075">
+            <div className="flex space-x-3">
               {actions.map((action, index) => {
                 const className = {
                   primary: 'text-primary',

package/src/components/admin/cms/PageHeading.jsx

@@ -8,7 +8,7 @@ function BreadcrumbIcon({ backUrl }) {
   return (
     <a
       href={backUrl}
-      className="breadcrum-icon border block border-border rounded mr-075"
+      className="breadcrum-icon border block border-border rounded mr-3"
     >
       <span className="flex items-center justify-center">
         <svg
@@ -51,7 +51,7 @@ function PageHeading({ backUrl, heading }) {
 
   return (
     <div className="page-heading flex justify-between items-center">
-      <div className="flex justify-start space-x-1 items-center">
+      <div className="flex justify-start space-x-4 items-center">
         <Area
           id="pageHeadingLeft"
           noOuter
@@ -75,7 +75,7 @@ function PageHeading({ backUrl, heading }) {
           ]}
         />
       </div>
-      <div className="flex justify-end space-x-1 items-center">
+      <div className="flex justify-end space-x-4 items-center">
         <Area id="pageHeadingRight" noOuter coreComponents={[]} />
       </div>
     </div>

package/src/components/admin/cms/widget/WidgetTypes.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function WidgetTypes({ types }) {
+  return (
+    <div className="grid grid-cols-3 gap-4">
+      {types.map((type) => (
+        <a
+          key={type.code}
+          href={type.createWidgetUrl}
+          className="border border-gray-200 rounded p-4 text-center"
+        >
+          <div className="text-lg font-bold">{type.name}</div>
+        </a>
+      ))}
+    </div>
+  );
+}
+
+WidgetTypes.propTypes = {
+  types: PropTypes.arrayOf(
+    PropTypes.shape({
+      code: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      createWidgetUrl: PropTypes.string.isRequired
+    })
+  ).isRequired
+};

package/src/components/admin/cms/widget/grid/WidgetTypeRow.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function WidgetTypeRow({ code, types }) {
+  const type = types.find((t) => t.code === code);
+  if (!type) {
+    return (
+      <td>
+        <div>Unknown</div>
+      </td>
+    );
+  } else {
+    return (
+      <td>
+        <div>{type.name}</div>
+      </td>
+    );
+  }
+}
+
+WidgetTypeRow.propTypes = {
+  code: PropTypes.string.isRequired,
+  types: PropTypes.arrayOf(
+    PropTypes.shape({
+      code: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
+    })
+  ).isRequired
+};

package/src/components/admin/oms/orderEdit/items/ItemVariantOptions.jsx

@@ -7,7 +7,7 @@ export function ItemVariantOptions({ options = [] }) {
   }
 
   return (
-    <div className="cart-item-variant-options mt-05">
+    <div className="cart-item-variant-options mt-2">
       <ul>
         {options.map((o, i) => (
           // eslint-disable-next-line react/no-array-index-key

package/src/components/admin/oms/orderEdit/items/Name.jsx

@@ -13,7 +13,7 @@ export function Name({ name, productSku, productUrl, variantOptions = [] }) {
             <a href={productUrl}>{name}</a>
           </span>
         </div>
-        <div className="text-sm text-gray-500">
+        <div className="text-gray-500">
           <span className="font-semibold">SKU: </span>
           <span>{productSku}</span>
         </div>

package/src/components/admin/oms/orderGrid/headers/OrderDateColumnHeader.jsx

@@ -50,7 +50,7 @@ export default function FromToColumnHeader({ title, id }) {
         <div className="title" style={{ marginBottom: '1rem' }}>
           <span>{title}</span>
         </div>
-        <div className="flex space-x-1">
+        <div className="flex space-x-4">
           <div style={{ width: '10rem' }}>
             <Date
               ref={filterFrom}

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
@@ -101,7 +101,7 @@ function AttributeGroupSelector({
       <div className="modal-content">
         <Card.Session>
           <div>
-            <div className="border rounded border-divider mb-2">
+            <div className="border rounded border-divider mb-8">
               <input
                 type="text"
                 value={inputValue}
@@ -128,7 +128,7 @@ function AttributeGroupSelector({
                 {data.attributeGroups.items.map((group) => (
                   <div
                     key={group.uuid}
-                    className="grid grid-cols-8 gap-2 py-1 border-divider items-center"
+                    className="grid grid-cols-8 gap-8 py-4 border-divider items-center"
                   >
                     <div className="col-span-5">
                       <h3>{group.groupName}</h3>
@@ -167,7 +167,7 @@ function AttributeGroupSelector({
         </Card.Session>
       </div>
       <Card.Session>
-        <div className="flex justify-between gap-2">
+        <div className="flex justify-between gap-8">
           <SimplePageination
             total={data?.attributeGroups.total}
             count={data?.attributeGroups?.items?.length || 0}

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

@@ -226,7 +226,7 @@ export function BuyXGetY({ requireProducts, discountType }) {
             ))}
           </tbody>
         </table>
-        <div className="mt-1 flex justify-start">
+        <div className="mt-4 flex justify-start">
           <div className="items-center flex">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -244,7 +244,7 @@ export function BuyXGetY({ requireProducts, discountType }) {
               />
             </svg>
           </div>
-          <div className="pl-1">
+          <div className="pl-4">
             <a href="#" onClick={(e) => addProduct(e)}>
               <span>Add product</span>
             </a>

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: 'like', 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
@@ -72,11 +72,11 @@ function CategorySelector({ onSelect, onUnSelect, selectedIDs, closeModal }) {
   }
 
   return (
-    <Card title="Select Products">
+    <Card title="Select categories">
       <div className="modal-content">
         <Card.Session>
           <div>
-            <div className="border rounded border-divider mb-2">
+            <div className="border rounded border-divider mb-8">
               <input
                 type="text"
                 value={inputValue}
@@ -105,12 +105,12 @@ function CategorySelector({ onSelect, onUnSelect, selectedIDs, closeModal }) {
                 {data.categories.items.map((cat) => (
                   <div
                     key={cat.uuid}
-                    className="grid grid-cols-8 gap-2 py-1 border-divider items-center"
+                    className="grid grid-cols-8 gap-8 py-4 border-divider items-center"
                   >
                     <div className="col-span-5">
                       <h3>{cat.name}</h3>
                     </div>
-                    <div className="col-span-2 text-right">
+                    <div className="col-span-3 text-right">
                       {!selectedIDs.includes(cat.categoryId) && (
                         <button
                           type="button"
@@ -144,7 +144,7 @@ function CategorySelector({ onSelect, onUnSelect, selectedIDs, closeModal }) {
         </Card.Session>
       </div>
       <Card.Session>
-        <div className="flex justify-between gap-2">
+        <div className="flex justify-between gap-8">
           <SimplePageination
             total={data?.categories.total}
             count={data?.categories?.items?.length || 0}

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
@@ -76,7 +76,7 @@ function CollectionSelector({ onSelect, onUnSelect, selectedIDs, closeModal }) {
       <div className="modal-content">
         <Card.Session>
           <div>
-            <div className="border rounded border-divider mb-2">
+            <div className="border rounded border-divider mb-8">
               <input
                 type="text"
                 value={inputValue}
@@ -105,7 +105,7 @@ function CollectionSelector({ onSelect, onUnSelect, selectedIDs, closeModal }) {
                 {data.collections.items.map((collection) => (
                   <div
                     key={collection.uuid}
-                    className="grid grid-cols-8 gap-2 py-1 border-divider items-center"
+                    className="grid grid-cols-8 gap-8 py-4 border-divider items-center"
                   >
                     <div className="col-span-5">
                       <h3>{collection.name}</h3>
@@ -144,7 +144,7 @@ function CollectionSelector({ onSelect, onUnSelect, selectedIDs, closeModal }) {
         </Card.Session>
       </div>
       <Card.Session>
-        <div className="flex justify-between gap-2">
+        <div className="flex justify-between gap-8">
           <SimplePageination
             total={data?.collections.total}
             count={data?.collections?.items?.length || 0}

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
@@ -109,7 +109,7 @@ function ProductSkuSelector({
       <div className="modal-content">
         <Card.Session>
           <div>
-            <div className="border rounded border-divider mb-2">
+            <div className="border rounded border-divider mb-8">
               <input
                 type="text"
                 value={inputValue}
@@ -141,10 +141,31 @@ function ProductSkuSelector({
                 {data.products.items.map((product) => (
                   <div
                     key={product.uuid}
-                    className="grid grid-cols-8 gap-2 py-1 border-divider items-center"
+                    className="grid grid-cols-8 gap-8 py-4 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-3 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>
@@ -192,7 +213,7 @@ function ProductSkuSelector({
         </Card.Session>
       </div>
       <Card.Session>
-        <div className="flex justify-between gap-2">
+        <div className="flex justify-between gap-8">
           <SimplePageination
             total={data?.products.total}
             count={data?.products?.items?.length || 0}

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

@@ -394,7 +394,7 @@ export function RequiredProducts({ requiredProducts }) {
           ))}
         </tbody>
       </table>
-      <div className="mt-1 flex justify-start">
+      <div className="mt-4 flex justify-start">
         <div className="items-center flex">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -412,7 +412,7 @@ export function RequiredProducts({ requiredProducts }) {
             />
           </svg>
         </div>
-        <div className="pl-1">
+        <div className="pl-4">
           <a href="#" onClick={(e) => addProduct(e)}>
             <span>Add product</span>
           </a>

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

@@ -4,7 +4,7 @@ import { Field } from '@components/common/form/Field';
 
 export function Setting({ discountAmount, startDate, endDate }) {
   return (
-    <div className="grid grid-cols-3 gap-2 form-field-container">
+    <div className="grid grid-cols-3 gap-8 form-field-container">
       <div>
         <Field
           type="text"