@evershop/evershop 1.0.0 → 1.2.0

package/src/components/common/grid/headers/FromTo.jsx

@@ -32,7 +32,7 @@ export default function FromToColumnHeader({ title, id, currentFilters = [] }) {
         <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: '6rem' }}>
             <Input
               type="text"

package/src/components/common/grid/headers/Sortable.jsx

@@ -0,0 +1,148 @@
+/* eslint-disable no-nested-ternary */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function Up() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 17 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 8.5L8.5 1L16 8.5"
+        stroke="black"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16 14L8.5 21.5L1 14"
+        stroke="#e1e3e5"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function Down() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 17 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 8.5L8.5 1L16 8.5"
+        stroke="#e1e3e5"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16 14L8.5 21.5L1 14"
+        stroke="black"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function None() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 17 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 8.5L8.5 1L16 8.5"
+        stroke="#e1e3e5"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16 14L8.5 21.5L1 14"
+        stroke="#e1e3e5"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default function SortableHeader({ title, name, currentFilters }) {
+  const [currentDirection] = React.useState(() => {
+    const currentOrderBy = currentFilters.find((filter) => filter.key === 'ob');
+    if (!currentOrderBy || currentOrderBy.value !== name) {
+      return null;
+    } else {
+      return (
+        currentFilters.find((filter) => filter.key === 'od')?.value || 'asc'
+      );
+    }
+  });
+  const onChange = () => {
+    const url = new URL(window.location.href);
+    url.searchParams.set('ob', name);
+    // Get the current direction by checking the currentFilters
+    const currentDirection = currentFilters.find(
+      (filter) => filter.key === 'od'
+    );
+    if (!currentDirection || currentDirection.value === 'asc') {
+      url.searchParams.set('od', 'desc');
+    } else {
+      url.searchParams.set('od', 'asc');
+    }
+    window.location.href = url;
+  };
+
+  return (
+    <th className="column">
+      <div className="table-header flex justify-start gap-4 content-center">
+        <div className="font-medium uppercase text-xl">
+          <span>{title}</span>
+        </div>
+        <div className="sort">
+          <button type="button" onClick={onChange}>
+            {currentDirection === 'asc' ? (
+              <Down />
+            ) : currentDirection === 'desc' ? (
+              <Up />
+            ) : (
+              <None />
+            )}
+          </button>
+        </div>
+      </div>
+    </th>
+  );
+}
+
+SortableHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  currentFilters: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      operations: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired
+    })
+  )
+};
+
+SortableHeader.defaultProps = {
+  currentFilters: []
+};

package/src/components/common/grid/rows/StatusRow.jsx

@@ -5,7 +5,7 @@ import Dot from '@components/common/Dot';
 export default function StatusRow({ id, areaProps }) {
   return (
     <td>
-      <div className="flex justify-center">
+      <div>
         {parseInt(areaProps.row[id], 10) === 0 && (
           <Dot variant="default" size="1.2rem" />
         )}

package/src/components/common/grid/rows/ThumbnailRow.jsx

@@ -5,7 +5,7 @@ export default function ThumbnailRow({ id, areaProps }) {
   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' }}
       >
         {areaProps.row[id] && (

package/src/components/common/list/Filter.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Filter.scss';
+
+export default function Filter({ title, options, selectedOption }) {
+  const [show, setShow] = React.useState(false);
+
+  return (
+    <div className="filter-container">
+      <button
+        type="button"
+        onClick={() => setShow(!show)}
+        className="flex gap-4 justify-center items-center"
+      >
+        <span>{selectedOption || title}</span>
+        {!show && (
+          <svg
+            width="6"
+            height="5"
+            viewBox="0 0 118 106"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M54.6478 2.69522C56.5621 -0.689529 61.4379 -0.689535 63.3522 2.69521L117.134 97.7885C119.019 101.122 116.611 105.25 112.782 105.25H5.21828C1.38899 105.25 -1.01899 101.122 0.866121 97.7886L54.6478 2.69522Z"
+              fill="#2F2F2F"
+            />
+          </svg>
+        )}
+
+        {show && (
+          <svg
+            width="6"
+            height="5"
+            viewBox="0 0 118 106"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M63.3522 103.305C61.4379 106.69 56.5621 106.69 54.6478 103.305L0.866142 8.21144C-1.01897 4.8783 1.38901 0.749989 5.2183 0.749989L112.782 0.749998C116.611 0.749999 119.019 4.8783 117.134 8.21144L63.3522 103.305Z"
+              fill="#2F2F2F"
+            />
+          </svg>
+        )}
+      </button>
+      {show && (
+        <ul>
+          {options.map((option) => (
+            <li key={option.value}>
+              <a
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  option.onSelect();
+                }}
+              >
+                {option.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+Filter.propTypes = {
+  title: PropTypes.string,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.string,
+      onSelect: PropTypes.func
+    })
+  ),
+  selectedOption: PropTypes.string
+};
+
+Filter.defaultProps = {
+  title: '',
+  options: [],
+  selectedOption: ''
+};

package/src/components/common/list/Filter.scss

@@ -0,0 +1,39 @@
+.filter-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  position: relative;
+}
+
+.filter-container button {
+    background: none;
+    border-bottom: 1px solid #ccc;
+    color: var(--color-text);
+    font-size: 1.5rem;
+    text-align: left;
+    font-size: 12px;
+    padding: 0 5px;
+    text-transform: capitalize;
+}
+
+.filter-container ul {
+  list-style: none;
+  padding: 10px;
+  position: absolute;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
+  z-index: 1;
+  top: 100%;
+  left: 0;
+  width: max-content;
+}
+
+.filter-container ul li {
+  padding: 3px 5px;
+  text-transform: capitalize;
+  &:hover {
+    background: #f9f9f9;
+  }
+}

package/src/components/common/modal/Alert.jsx

@@ -118,7 +118,7 @@ function Alert({ children }) {
                   {(alert.primaryAction !== undefined ||
                     alert.secondaryAction !== undefined) && (
                     <Card.Session>
-                      <div className="flex justify-end space-x-1">
+                      <div className="flex justify-end space-x-4">
                         {alert.primaryAction && (
                           <Button {...alert.primaryAction} />
                         )}

package/src/components/common/modal/Modal.jsx

@@ -17,7 +17,7 @@ function Modal({ modal, title, children, primaryAction }) {
             <Card title={title}>
               <div className="modal-content">{children}</div>
               <Card.Session>
-                <div className="flex justify-end gap-2">
+                <div className="flex justify-end gap-8">
                   <Button
                     title="Close"
                     variant="secondary"

package/src/components/frontStore/catalog/categoryView/filter/AttributeFilter.jsx

@@ -24,8 +24,15 @@ export function AttributeFilter({
           // Update the filter
           updateFilter(
             currentFilters.map((f) => {
-              if (f.key !== attributeCode) return f;
-              else return { key: attributeCode, value: value.join(',') };
+              if (f.key !== attributeCode) {
+                return f;
+              } else {
+                return {
+                  key: attributeCode,
+                  operation: 'in',
+                  value: value.join(',')
+                };
+              }
             })
           );
         }
@@ -33,18 +40,25 @@ export function AttributeFilter({
         // Add the option to the filter
         updateFilter(
           currentFilters.map((f) => {
-            if (f.key !== attributeCode) return f;
-            else
+            if (f.key !== attributeCode) {
+              return f;
+            } else {
               return {
                 key: attributeCode,
+                operation: 'in',
                 value: value.concat(optionId).join(',')
               };
+            }
           })
         );
       }
     } else {
       updateFilter(
-        currentFilters.concat({ key: attributeCode, value: optionId })
+        currentFilters.concat({
+          key: attributeCode,
+          operation: 'in',
+          value: optionId
+        })
       );
     }
   };
@@ -52,7 +66,7 @@ export function AttributeFilter({
   return (
     <>
       {availableAttributes.map((a) => (
-        <div key={a.attributeCode} className="attribute-filter mt-2">
+        <div key={a.attributeCode} className="attribute-filter mt-8">
           <div className="filter-item-title">
             <span className="font-medium">{a.attributeName}</span>
           </div>
@@ -65,7 +79,7 @@ export function AttributeFilter({
               );
 
               return (
-                <li key={o.optionId} className="mt-05 mr-05">
+                <li key={o.optionId} className="mt-2 mr-2">
                   <a
                     href="#"
                     className="flex justify-start items-center"

package/src/components/frontStore/catalog/categoryView/filter/CategoryFilter.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import './CategoryFilter.scss';
 import { _ } from '@evershop/evershop/src/lib/locale/translate';
 
 export function CategoryFilter({ currentFilters, categories, updateFilter }) {
@@ -24,7 +25,7 @@ export function CategoryFilter({ currentFilters, categories, updateFilter }) {
               if (f.key !== 'cat') {
                 return f;
               } else {
-                return { key: 'cat', value: value.join(',') };
+                return { key: 'cat', operation: 'in', value: value.join(',') };
               }
             })
           );
@@ -38,6 +39,7 @@ export function CategoryFilter({ currentFilters, categories, updateFilter }) {
             } else {
               return {
                 key: 'cat',
+                operation: 'in',
                 value: value.concat(categoryId).join(',')
               };
             }
@@ -45,7 +47,13 @@ export function CategoryFilter({ currentFilters, categories, updateFilter }) {
         );
       }
     } else {
-      updateFilter(currentFilters.concat({ key: 'cat', value: categoryId }));
+      updateFilter(
+        currentFilters.concat({
+          key: 'cat',
+          operation: 'in',
+          value: categoryId
+        })
+      );
     }
   };
 
@@ -54,60 +62,60 @@ export function CategoryFilter({ currentFilters, categories, updateFilter }) {
   }
 
   return (
-    <div className="category-filter mt-2">
-        <div className="filter-item-title">
-          <span className="font-medium">{_('Category')}</span>
-        </div>
-        <ul className="filter-option-list">
-          {categories.map((c) => {
-            const isChecked = currentFilters.find(
-              (f) =>
-                f.key === 'cat' &&
-                f.value.split(',').includes(c.categoryId.toString())
-            );
+    <div className="category-filter mt-8">
+      <div className="filter-item-title">
+        <span className="font-medium">{_('Category')}</span>
+      </div>
+      <ul className="filter-option-list">
+        {categories.map((c) => {
+          const isChecked = currentFilters.find(
+            (f) =>
+              f.key === 'cat' &&
+              f.value.split(',').includes(c.categoryId.toString())
+          );
 
-            return (
-              <li key={c.uuid} className="mt-05 mr-05">
-                <a
-                  href="#"
-                  className="flex justify-start items-center"
-                  onClick={(e) => onChange(e, c.categoryId)}
-                >
-                  {isChecked && (
-                    <svg width="24px" height="24px" viewBox="0 0 24 24">
-                      <g
-                        stroke="none"
-                        strokeWidth="1"
-                        fill="none"
-                        fillRule="evenodd"
-                      >
-                        <g fill="#212121" fillRule="nonzero">
-                          <path d="M18,3 C19.6568542,3 21,4.34314575 21,6 L21,18 C21,19.6568542 19.6568542,21 18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,6 C3,4.34314575 4.34314575,3 6,3 L18,3 Z M16.4696699,7.96966991 L10,14.4393398 L7.53033009,11.9696699 C7.23743687,11.6767767 6.76256313,11.6767767 6.46966991,11.9696699 C6.1767767,12.2625631 6.1767767,12.7374369 6.46966991,13.0303301 L9.46966991,16.0303301 C9.76256313,16.3232233 10.2374369,16.3232233 10.5303301,16.0303301 L17.5303301,9.03033009 C17.8232233,8.73743687 17.8232233,8.26256313 17.5303301,7.96966991 C17.2374369,7.6767767 16.7625631,7.6767767 16.4696699,7.96966991 Z" />
-                        </g>
+          return (
+            <li key={c.uuid} className="mt-2 mr-2">
+              <a
+                href="#"
+                className="flex justify-start items-center"
+                onClick={(e) => onChange(e, c.categoryId)}
+              >
+                {isChecked && (
+                  <svg width="24px" height="24px" viewBox="0 0 24 24">
+                    <g
+                      stroke="none"
+                      strokeWidth="1"
+                      fill="none"
+                      fillRule="evenodd"
+                    >
+                      <g fill="#212121" fillRule="nonzero">
+                        <path d="M18,3 C19.6568542,3 21,4.34314575 21,6 L21,18 C21,19.6568542 19.6568542,21 18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,6 C3,4.34314575 4.34314575,3 6,3 L18,3 Z M16.4696699,7.96966991 L10,14.4393398 L7.53033009,11.9696699 C7.23743687,11.6767767 6.76256313,11.6767767 6.46966991,11.9696699 C6.1767767,12.2625631 6.1767767,12.7374369 6.46966991,13.0303301 L9.46966991,16.0303301 C9.76256313,16.3232233 10.2374369,16.3232233 10.5303301,16.0303301 L17.5303301,9.03033009 C17.8232233,8.73743687 17.8232233,8.26256313 17.5303301,7.96966991 C17.2374369,7.6767767 16.7625631,7.6767767 16.4696699,7.96966991 Z" />
                       </g>
-                    </svg>
-                  )}
-                  {!isChecked && (
-                    <svg width="24px" height="24px" viewBox="0 0 24 24">
-                      <g
-                        stroke="none"
-                        strokeWidth="1"
-                        fill="none"
-                        fillRule="evenodd"
-                      >
-                        <g fill="#212121" fillRule="nonzero">
-                          <path d="M5.75,3 L18.25,3 C19.7687831,3 21,4.23121694 21,5.75 L21,18.25 C21,19.7687831 19.7687831,21 18.25,21 L5.75,21 C4.23121694,21 3,19.7687831 3,18.25 L3,5.75 C3,4.23121694 4.23121694,3 5.75,3 Z M5.75,4.5 C5.05964406,4.5 4.5,5.05964406 4.5,5.75 L4.5,18.25 C4.5,18.9403559 5.05964406,19.5 5.75,19.5 L18.25,19.5 C18.9403559,19.5 19.5,18.9403559 19.5,18.25 L19.5,5.75 C19.5,5.05964406 18.9403559,4.5 18.25,4.5 L5.75,4.5 Z" />
-                        </g>
+                    </g>
+                  </svg>
+                )}
+                {!isChecked && (
+                  <svg width="24px" height="24px" viewBox="0 0 24 24">
+                    <g
+                      stroke="none"
+                      strokeWidth="1"
+                      fill="none"
+                      fillRule="evenodd"
+                    >
+                      <g fill="#212121" fillRule="nonzero">
+                        <path d="M5.75,3 L18.25,3 C19.7687831,3 21,4.23121694 21,5.75 L21,18.25 C21,19.7687831 19.7687831,21 18.25,21 L5.75,21 C4.23121694,21 3,19.7687831 3,18.25 L3,5.75 C3,4.23121694 4.23121694,3 5.75,3 Z M5.75,4.5 C5.05964406,4.5 4.5,5.05964406 4.5,5.75 L4.5,18.25 C4.5,18.9403559 5.05964406,19.5 5.75,19.5 L18.25,19.5 C18.9403559,19.5 19.5,18.9403559 19.5,18.25 L19.5,5.75 C19.5,5.05964406 18.9403559,4.5 18.25,4.5 L5.75,4.5 Z" />
                       </g>
-                    </svg>
-                  )}
-                  <span className="filter-option">{c.name}</span>
-                </a>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
+                    </g>
+                  </svg>
+                )}
+                <span className="filter-option">{c.name}</span>
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
   );
 }
 

package/src/components/frontStore/catalog/categoryView/filter/CategoryFilter.scss

@@ -0,0 +1,5 @@
+@media (max-width: 639px) {
+    .category-filter {
+        padding-bottom: 2.5rem;
+    }
+}

package/src/components/frontStore/catalog/categoryView/filter/PriceFilter.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import './PriceFilter.scss';
+import { _ } from '@evershop/evershop/src/lib/locale/translate';
 
 export function PriceFilter({
   priceRange: { min: minPrice, max: maxPrice },
@@ -10,7 +11,7 @@ export function PriceFilter({
 }) {
   const firstRender = React.useRef(true);
   const [from, setFrom] = React.useState(() => {
-    const minPriceFilter = currentFilters.find((f) => f.key === 'minPrice');
+    const minPriceFilter = currentFilters.find((f) => f.key === 'min_price');
     if (minPriceFilter) {
       return minPriceFilter.value;
     } else {
@@ -19,7 +20,7 @@ export function PriceFilter({
   });
 
   const [to, setTo] = React.useState(() => {
-    const maxPriceFilter = currentFilters.find((f) => f.key === 'maxPrice');
+    const maxPriceFilter = currentFilters.find((f) => f.key === 'max_price');
     if (maxPriceFilter) {
       return maxPriceFilter.value;
     } else {
@@ -30,7 +31,7 @@ export function PriceFilter({
   React.useEffect(() => {
     firstRender.current = true;
     setFrom(() => {
-      const minPriceFilter = currentFilters.find((f) => f.key === 'minPrice');
+      const minPriceFilter = currentFilters.find((f) => f.key === 'min_price');
       if (minPriceFilter) {
         return minPriceFilter.value;
       } else {
@@ -38,7 +39,7 @@ export function PriceFilter({
       }
     });
     setTo(() => {
-      const maxPriceFilter = currentFilters.find((f) => f.key === 'maxPrice');
+      const maxPriceFilter = currentFilters.find((f) => f.key === 'max_price');
       if (maxPriceFilter) {
         return maxPriceFilter.value;
       } else {
@@ -62,13 +63,13 @@ export function PriceFilter({
         }
         if (minValue || maxValue) {
           const newFilters = currentFilters.map((f) => {
-            if (f.key === 'minPrice' && minValue) {
+            if (f.key === 'min_price' && minValue) {
               return {
                 ...f,
                 value: minValue
               };
             }
-            if (f.key === 'maxPrice' && maxValue) {
+            if (f.key === 'max_price' && maxValue) {
               return {
                 ...f,
                 value: maxValue
@@ -78,17 +79,25 @@ export function PriceFilter({
           });
           // Check if the minPrice filter is already in the filter
           const minPriceIndex = currentFilters.findIndex(
-            (f) => f.key === 'minPrice'
+            (f) => f.key === 'min_price'
           );
           if (minPriceIndex === -1 && minValue) {
-            newFilters.push({ key: 'minPrice', value: minValue });
+            newFilters.push({
+              key: 'min_price',
+              operation: 'eq',
+              value: minValue
+            });
           }
           // Check if the maxPrice filter is already in the filter
           const maxPriceIndex = currentFilters.findIndex(
-            (f) => f.key === 'maxPrice'
+            (f) => f.key === 'max_price'
           );
           if (maxPriceIndex === -1 && maxValue) {
-            newFilters.push({ key: 'maxPrice', value: maxValue });
+            newFilters.push({
+              key: 'max_price',
+              operation: 'eq',
+              value: maxValue
+            });
           }
 
           updateFilter(newFilters);
@@ -131,7 +140,7 @@ export function PriceFilter({
 
   return (
     <div className="price-filter">
-      <div className="filter-item-title">Price</div>
+      <div className="filter-item-title">{_('Price')}</div>
       <div className="rangeslider">
         <input
           className="min"

package/src/components/frontStore/catalog/product/list/List.jsx

@@ -19,16 +19,16 @@ export default function ProductList({ products = [], countPerRow = 3 }) {
   let className;
   switch (countPerRow) {
     case 3:
-      className = 'grid grid-cols-2 md:grid-cols-3 gap-2';
+      className = 'grid grid-cols-2 md:grid-cols-3 gap-8';
       break;
     case 4:
-      className = 'grid grid-cols-2 md:grid-cols-4 gap-2';
+      className = 'grid grid-cols-2 md:grid-cols-4 gap-8';
       break;
     case 5:
-      className = 'grid grid-cols-2 md:grid-cols-5 gap-2';
+      className = 'grid grid-cols-2 md:grid-cols-5 gap-8';
       break;
     default:
-      className = 'grid grid-cols-2 md:grid-cols-3 gap-2';
+      className = 'grid grid-cols-2 md:grid-cols-3 gap-8';
   }
 
   return (

package/src/components/frontStore/catalog/product/list/Pagination.jsx

@@ -67,7 +67,7 @@ export function Pagination({ total, limit, currentPage }) {
 
   return (
     <div className="products-pagination">
-      <ul className="pagination flex justify-center space-x-1">
+      <ul className="pagination flex justify-center space-x-4">
         {currentPage > 1 && (
           <li className="page-item prev self-center">
             <button