@evershop/evershop 1.0.0 → 1.2.0

package/src/components/admin/catalog/productEdit/variants/New.jsx

@@ -11,8 +11,8 @@ export function New({ createVariantGroupApi, setGroup }) {
         {action === undefined && (
           <div>
             <div className="justify-center text-center">
-              <div className="mb-4">
-                <span className="pr-1">
+              <div className="mb-16">
+                <span className="pr-4">
                   This product has some variants like color or size?
                 </span>
                 <a

package/src/components/admin/catalog/productEdit/variants/Search.jsx

@@ -30,7 +30,7 @@ export function Search({ addVariant, variants }) {
   };
 
   return (
-    <div className="flex justify-between mt-1">
+    <div className="flex justify-between mt-4">
       <div className="self-center">
         <div className="autocomplete-search">
           <Input

package/src/components/admin/catalog/productEdit/variants/SearchModal.jsx

@@ -174,7 +174,7 @@ export function SearchModal({ keyword, variants, addVariant, searchAPI }) {
           </div>
         )}
         {potentialVariants.length <= 0 && (
-          <div className="flex justify-center p-1">
+          <div className="flex justify-center p-4">
             There is no product to show
           </div>
         )}

package/src/components/admin/catalog/productEdit/variants/Variant.jsx

@@ -22,7 +22,7 @@ export function Variant({
       </td>
       {variant.attributes.map((a) => (
         <td key={a.attributeId}>
-          <label>{a.optionText}</label>
+          <label>{a.optionText || '--'}</label>
         </td>
       ))}
       <td>

package/src/components/admin/catalog/productEdit/variants/VariantModal.jsx

@@ -2,23 +2,68 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useQuery } from 'urql';
 import ProductMediaManager from '@components/admin/catalog/productEdit/media/ProductMediaManager';
 import { Field } from '@components/common/form/Field';
+import { useFormContext } from '@components/common/form/Form';
+import Spinner from '@components/common/Spinner';
+
+const AttributesQuery = `
+  query Query($filters: [FilterInput]) {
+    attributes(filters: $filters) {
+      items {
+        attributeId
+        attributeCode
+        attributeName
+        options {
+          value: attributeOptionId
+          text: optionText
+        }
+      }
+    }
+  }
+`;
 
 export function VariantModal({
   variant,
   variantAttributes,
   productImageUploadUrl
 }) {
+  const formContext = useFormContext();
   const image = variant?.product?.image;
   let gallery = variant?.product?.gallery || [];
 
   if (image) {
     gallery = [image].concat(gallery);
   }
+  const [result] = useQuery({
+    query: AttributesQuery,
+    variables: {
+      filters: [
+        {
+          key: 'code',
+          operation: 'in',
+          value: variantAttributes.map((a) => a.attributeCode).join(',')
+        }
+      ]
+    }
+  });
+
+  const { data, fetching, error } = result;
+  if (fetching) {
+    return (
+      <div className="p-3 flex justify-center items-center border rounded border-divider">
+        <Spinner width={30} height={30} />
+      </div>
+    );
+  }
+
+  if (error) {
+    return <p className="text-critical">{error.message}</p>;
+  }
   return (
-    <div className="variant-item pb-15 border-b border-solid border-divider mb-15 last:border-b-0 last:pb-0">
-      <div className="grid grid-cols-2 gap-x-1">
+    <div className="variant-item pb-6 border-b border-solid border-divider mb-6 last:border-b-0 last:pb-0">
+      <div className="grid grid-cols-2 gap-x-4">
         <div className="col-span-1">
           <ProductMediaManager
             id="images"
@@ -27,30 +72,41 @@ export function VariantModal({
           />
         </div>
         <div className="col-span-1">
-          <div className="grid grid-cols-2 gap-x-1 border-b border-divider pb-15 mb-15">
-            {variantAttributes.map((a) => (
-              <div key={a.attributeId} className="mt-1 col">
+          <div className="grid grid-cols-2 gap-x-4 border-b border-divider pb-6 mb-6">
+            {data?.attributes?.items.map((a, index) => (
+              <div key={a.attributeId} className="mt-4 col">
                 <div>
                   <label>{a.attributeName}</label>
                 </div>
-                <Field
+                <input
+                  type="hidden"
+                  name={`attributes[${index}][attribute_code]`}
+                  value={a.attributeCode}
+                />
+                <input
+                  type="hidden"
                   name={a.attributeCode}
+                  value={
+                    formContext.fields.find(
+                      (f) => f.name === `attributes[${index}][value]`
+                    )?.value
+                  }
+                />
+                <Field
+                  name={`attributes[${index}][value]`}
                   validationRules={['notEmpty']}
                   value={
                     variant?.attributes.find(
                       (v) => v.attributeCode === a.attributeCode
                     )?.optionId
                   }
-                  options={a.options.map((o) => ({
-                    value: o.optionId,
-                    text: o.optionText
-                  }))}
+                  options={a.options}
                   type="select"
                 />
               </div>
             ))}
           </div>
-          <div className="grid grid-cols-3 gap-x-1 border-b border-divider pb-15 mb-15">
+          <div className="grid grid-cols-3 gap-x-4 border-b border-divider pb-6 mb-6">
             <div>
               <div>SKU</div>
               <Field
@@ -72,7 +128,7 @@ export function VariantModal({
               />
             </div>
           </div>
-          <div className="grid grid-cols-3 gap-x-1">
+          <div className="grid grid-cols-3 gap-x-4">
             <div>
               <div>Status</div>
               <Field

package/src/components/admin/catalog/productEdit/variants/Variants.jsx

@@ -4,7 +4,7 @@ import { useQuery } from 'urql';
 import { Card } from '@components/admin/cms/Card';
 import { CreateVariant } from '@components/admin/catalog/productEdit/variants/CreateVariant';
 import Spinner from '@components/common/Spinner';
-import { Variant } from './Variant';
+import { Variant } from '@components/admin/catalog/productEdit/variants/Variant';
 
 export const VariantQuery = `
 query Query($productId: ID!) {

package/src/components/admin/catalog/productGrid/rows/ThumbnailRow.jsx

@@ -5,7 +5,7 @@ export default function ThumbnailRow({ src, name }) {
   return (
     <td>
       <div
-        className="grid-thumbnail text-border border border-divider p-075 rounded flex justify-center"
+        className="grid-thumbnail text-border border border-divider p-3 rounded flex justify-center"
         style={{ width: '6rem', height: '6rem' }}
       >
         {src && <img className="self-center" src={src} alt={name} />}

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

@@ -0,0 +1,130 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { toast } from 'react-toastify';
+import CogIcon from '@heroicons/react/outline/CogIcon';
+import { useModal } from '@components/common/modal/useModal';
+import MethodForm from '@components/admin/checkout/shippingSetting/MethodForm';
+
+function Method({ method, getZones }) {
+  const modal = useModal();
+  return (
+    <>
+      <>
+        <td className="border-none py-4">{method.name}</td>
+        <td className="border-none py-4">
+          {method.isEnabled ? 'Enabled' : 'Disabled'}
+        </td>
+        <td className="border-none py-4">
+          {method.cost?.text || (
+            <a
+              href="#"
+              className="text-interactive"
+              onClick={(e) => {
+                e.preventDefault();
+                modal.openModal();
+              }}
+            >
+              <CogIcon width={22} height={22} />
+            </a>
+          )}
+        </td>
+        <td className="border-none py-4">
+          {method.conditionType
+            ? `${method.min || 0} <= ${method.conditionType} <= ${
+                method.max || '∞'
+              }`
+            : 'None'}
+        </td>
+        <td className="border-none py-4">
+          <a
+            href="#"
+            className="text-interactive"
+            onClick={(e) => {
+              e.preventDefault();
+              modal.openModal();
+            }}
+          >
+            Edit
+          </a>
+          <a
+            href="#"
+            className="text-critical ml-8"
+            onClick={async (e) => {
+              e.preventDefault();
+              try {
+                const response = await fetch(method.deleteApi, {
+                  method: 'DELETE',
+                  headers: {
+                    'Content-Type': 'application/json'
+                  },
+                  credentials: 'include'
+                });
+                if (response.ok) {
+                  await getZones();
+                  // Toast success
+                  toast.success('Method removed successfully');
+                } else {
+                  // Toast error
+                  toast.error('Failed to remove method');
+                }
+              } catch (error) {
+                // Toast error
+                toast.error('Failed to remove method');
+              }
+            }}
+          >
+            Delete
+          </a>
+        </td>
+      </>
+      {modal.state.showing && (
+        <div className={modal.className} onAnimationEnd={modal.onAnimationEnd}>
+          <div
+            className="modal-wrapper flex self-center justify-center items-center"
+            tabIndex={-1}
+            role="dialog"
+          >
+            <div className="modal">
+              <MethodForm
+                saveMethodApi={method.updateApi}
+                closeModal={() => modal.closeModal()}
+                getZones={getZones}
+                method={method}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+Method.propTypes = {
+  method: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    isEnabled: PropTypes.bool.isRequired,
+    cost: PropTypes.shape({
+      text: PropTypes.string.isRequired
+    }),
+    priceBasedCost: PropTypes.arrayOf(
+      PropTypes.shape({
+        minPrice: PropTypes.number.isRequired,
+        cost: PropTypes.number.isRequired
+      })
+    ),
+    weightBasedCost: PropTypes.arrayOf(
+      PropTypes.shape({
+        minWeight: PropTypes.number.isRequired,
+        cost: PropTypes.number.isRequired
+      })
+    ),
+    conditionType: PropTypes.string.isRequired,
+    min: PropTypes.number.isRequired,
+    max: PropTypes.number.isRequired,
+    updateApi: PropTypes.string.isRequired,
+    deleteApi: PropTypes.string.isRequired
+  }).isRequired,
+  getZones: PropTypes.func.isRequired
+};
+
+export default Method;

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")
   }
@@ -25,7 +29,7 @@ function Condition({ method }) {
   const [type, setType] = React.useState(method?.conditionType || 'price');
   return (
     <div>
-      <div className="mb-1">
+      <div className="mb-4">
         <Radio
           name="condition_type"
           options={[
@@ -36,7 +40,7 @@ function Condition({ method }) {
           value={type}
         />
       </div>
-      <div className="grid grid-cols-2 gap-2">
+      <div className="grid grid-cols-2 gap-8">
         <div>
           <Field
             name="min"
@@ -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-4 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"
@@ -209,8 +293,15 @@ function MethodForm({ saveMethodApi, closeModal, getZones, method }) {
           {hasCondition && <Condition method={method} />}
         </Card.Session>
         <Card.Session>
-          <div className="flex justify-end gap-1">
-            <Button title="Cancel" variant="secondary" onAction={closeModal} />
+          <div className="flex justify-end gap-4">
+            <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,13 +1,13 @@
 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();
   return (
-    <div className="my-2">
+    <div className="my-8">
       <table className="border-collapse divide-y">
         <thead>
           <tr>
@@ -19,12 +19,12 @@ export function Methods({ getZones, methods, addMethodApi }) {
           </tr>
         </thead>
         {methods.map((method) => (
-          <tr key={method.methodId} className="border-divider py-2">
+          <tr key={method.methodId} className="border-divider py-8">
             <Method method={method} getZones={getZones} />
           </tr>
         ))}
       </table>
-      <div className="mt-1">
+      <div className="mt-4">
         <a
           href="#"
           className="text-interactive"

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-8">
+      <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-8">
+              <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: []
+};