@evershop/evershop 1.1.0 → 1.2.1

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

@@ -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,7 +30,7 @@ function CategorySelector({ onSelect, onUnSelect, selectedIDs, closeModal }) {
     variables: {
       filters: inputValue
         ? [
-            { key: 'name', operation: 'eq', value: inputValue },
+            { key: 'name', operation: 'like', value: inputValue },
             { key: 'page', operation: 'eq', value: page.toString() },
             { key: 'limit', operation: 'eq', value: limit.toString() }
           ]
@@ -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

@@ -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

@@ -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,10 @@ 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">
-                      <div className="text-border border border-divider p-075 rounded flex justify-center">
+                      <div className="text-border border border-divider p-3 rounded flex justify-center">
                         {product.image?.url && (
                           <img src={product.image?.url} alt={product.name} />
                         )}
@@ -213,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"

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

@@ -65,8 +65,8 @@ function Products({ targetProducts, maxQty }) {
 
   return (
     <div>
-      <div className="mb-1 mt-1">
-        <div className="flex justify-start items-center mb-3">
+      <div className="mb-4 mt-4">
+        <div className="flex justify-start items-center mb-12">
           <div>Maximum</div>
           <div style={{ width: '70px', padding: '0 1rem' }}>
             <Field
@@ -392,7 +392,7 @@ function Products({ targetProducts, maxQty }) {
           ))}
         </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"
@@ -410,7 +410,7 @@ function Products({ targetProducts, maxQty }) {
             />
           </svg>
         </div>
-        <div className="pl-1">
+        <div className="pl-4">
           <a href="#" onClick={(e) => addProduct(e)} className="">
             <span>Add product</span>
           </a>

package/src/components/admin/tax/taxSetting/Rate.jsx

@@ -8,11 +8,11 @@ function Rate({ rate, getTaxClasses }) {
   return (
     <>
       <>
-        <td className="border-none py-1">{rate.name}</td>
-        <td className="border-none py-1">{rate.rate}%</td>
-        <td className="border-none py-1">{rate.isCompound ? 'Yes' : 'No'}</td>
-        <td className="border-none py-1">{rate.priority}</td>
-        <td className="border-none py-1">
+        <td className="border-none py-4">{rate.name}</td>
+        <td className="border-none py-4">{rate.rate}%</td>
+        <td className="border-none py-4">{rate.isCompound ? 'Yes' : 'No'}</td>
+        <td className="border-none py-4">{rate.priority}</td>
+        <td className="border-none py-4">
           <a
             href="#"
             className="text-interactive"
@@ -25,7 +25,7 @@ function Rate({ rate, getTaxClasses }) {
           </a>
           <a
             href="#"
-            className="text-critical ml-2"
+            className="text-critical ml-8"
             onClick={async (e) => {
               e.preventDefault();
               await fetch(rate.deleteApi, {

package/src/components/admin/tax/taxSetting/RateForm.jsx

@@ -50,7 +50,7 @@ function MethodForm({ saveRateApi, closeModal, getTaxClasses, rate }) {
         }}
       >
         <Card.Session title="Basic">
-          <div className="grid grid-cols-2 gap-2">
+          <div className="grid grid-cols-2 gap-8">
             <div>
               <Field
                 name="name"
@@ -75,7 +75,7 @@ function MethodForm({ saveRateApi, closeModal, getTaxClasses, rate }) {
           </div>
         </Card.Session>
         <Card.Session title="Setup shipping cost">
-          <div className="grid grid-cols-3 gap-2">
+          <div className="grid grid-cols-3 gap-8">
             <div>
               <Field
                 name="country"
@@ -107,7 +107,7 @@ function MethodForm({ saveRateApi, closeModal, getTaxClasses, rate }) {
               />
             </div>
           </div>
-          <div className="grid grid-cols-2 gap-2 mt-2">
+          <div className="grid grid-cols-2 gap-8 mt-8">
             <div>
               <Toggle
                 name="is_compound"
@@ -117,7 +117,7 @@ function MethodForm({ saveRateApi, closeModal, getTaxClasses, rate }) {
             </div>
             <div />
           </div>
-          <div className="grid grid-cols-2 gap-2 mt-2">
+          <div className="grid grid-cols-2 gap-8 mt-8">
             <div>
               <Field
                 name="priority"
@@ -132,7 +132,7 @@ function MethodForm({ saveRateApi, closeModal, getTaxClasses, rate }) {
           </div>
         </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/tax/taxSetting/Rates.jsx

@@ -7,7 +7,7 @@ import RateForm from './RateForm';
 export function Rates({ getTaxClasses, rates, addRateApi }) {
   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 Rates({ getTaxClasses, rates, addRateApi }) {
           </tr>
         </thead>
         {rates.map((rate) => (
-            <tr key={rate.uuid} className="border-divider py-2">
-              <Rate rate={rate} getTaxClasses={getTaxClasses} />
-            </tr>
-          ))}
+          <tr key={rate.uuid} className="border-divider py-8">
+            <Rate rate={rate} getTaxClasses={getTaxClasses} />
+          </tr>
+        ))}
       </table>
-      <div className="mt-1">
+      <div className="mt-4">
         <a
           href="#"
           className="text-interactive"

package/src/components/admin/tax/taxSetting/TaxClass.jsx

@@ -7,14 +7,14 @@ function TaxClass({ taxClass, getTaxClasses }) {
   return (
     <Card.Session
       title={
-        <div className="flex justify-between items-center gap-2">
+        <div className="flex justify-between items-center gap-8">
           <div>{taxClass.name}</div>
         </div>
       }
     >
       <div className="divide-y border rounded border-divider">
-        <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">
             <Rates
               rates={taxClass.rates}
               addRateApi={taxClass.addRateApi}

package/src/components/admin/tax/taxSetting/TaxClassForm.jsx

@@ -28,7 +28,7 @@ function TaxClassForm({ saveTaxClassApi, closeModal, getTaxClasses }) {
           />
         </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"