@evershop/evershop 1.0.0 → 1.2.0

package/src/modules/catalog/pages/frontStore/catalogSearch/[index]filters.js

@@ -1,66 +1,11 @@
 const {
-  translate
-} = require('@evershop/evershop/src/lib/locale/translate/translate');
+  buildFilterFromUrl
+} = require('@evershop/evershop/src/lib/util/buildFilterFromUrl');
 const {
   setContextValue
 } = require('@evershop/evershop/src/modules/graphql/services/contextHelper');
 
 module.exports = (request, response, delegate, next) => {
-  const { query } = request;
-  if (!query) {
-    setContextValue(request, 'filtersFromUrl', []);
-    next();
-  } else {
-    const filtersFromUrl = [];
-
-    const { sortBy } = query;
-    const sortOrder =
-      query.sortOrder && ['ASC', 'DESC'].includes(query.sortOrder.toUpperCase())
-        ? query.sortOrder.toUpperCase()
-        : 'ASC';
-    if (sortBy) {
-      filtersFromUrl.push({
-        key: 'sortBy',
-        operation: '=',
-        value: sortBy
-      });
-    }
-
-    if (sortOrder !== 'ASC') {
-      filtersFromUrl.push({
-        key: 'sortOrder',
-        operation: '=',
-        value: sortOrder
-      });
-    }
-    // Paging
-    const page = Number.isNaN(parseInt(query.page, 10))
-      ? '1'
-      : query.page.toString();
-    if (page !== '1') {
-      filtersFromUrl.push({ key: 'page', operation: '=', value: page });
-    }
-    const limit = Number.isNaN(parseInt(query.limit, 10))
-      ? '20'
-      : query.limit.toString(); // TODO: Get from config
-    if (limit !== '20') {
-      filtersFromUrl.push({ key: 'limit', operation: '=', value: limit });
-    }
-
-    // Remove html tags
-    const {keyword} = query;
-    setContextValue(request, 'pageInfo', {
-      title: translate('Search results for "${keyword}"', { keyword }),
-      description: translate('Search results for "${keyword}"', { keyword })
-    });
-
-    filtersFromUrl.push({
-      key: 'keyword',
-      operation: '=',
-      value: keyword
-    });
-
-    setContextValue(request, 'filtersFromUrl', filtersFromUrl);
-    next();
-  }
+  setContextValue(request, 'filtersFromUrl', buildFilterFromUrl(request));
+  next();
 };

package/src/modules/catalog/pages/frontStore/catalogSearch/index.js

@@ -1,4 +1,10 @@
+const {
+  translate
+} = require('@evershop/evershop/src/lib/locale/translate/translate');
 const { get } = require('@evershop/evershop/src/lib/util/get');
+const {
+  setContextValue
+} = require('@evershop/evershop/src/modules/graphql/services/contextHelper');
 
 module.exports = (request, response, delegate, next) => {
   // Get the keyword from the request query
@@ -7,6 +13,11 @@ module.exports = (request, response, delegate, next) => {
     // Redirect to the home page if no keyword is not provided
     response.redirect('/');
   } else {
+    setContextValue(request, 'pageInfo', {
+      title: translate('Search results for: ${keyword}', { keyword }),
+      description: translate('Search results for: ${keyword}', { keyword }),
+      url: request.url
+    });
     next();
   }
 };

package/src/modules/catalog/pages/frontStore/catalogSearch/route.json

@@ -1,4 +1,5 @@
 {
   "methods": ["GET"],
-  "path": "/search"
+  "path": "/search",
+  "name": "Catalog search page"
 }

package/src/modules/catalog/pages/frontStore/categoryView/CategoryView.jsx

@@ -1,16 +1,33 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Area from '@components/common/Area';
 
-export default function CategoryView() {
+export default function CategoryView({ category }) {
+  if (!category.showProducts) {
+    return null;
+  }
   return (
-    <div className="page-width grid grid-cols-1 md:grid-cols-4 gap-2">
+    <div className="page-width grid grid-cols-1 md:grid-cols-4 gap-8">
       <Area id="leftColumn" className="md:col-span-1" />
       <Area id="rightColumn" className="md:col-span-3" />
     </div>
   );
 }
 
+CategoryView.propTypes = {
+  category: PropTypes.shape({
+    showProducts: PropTypes.number
+  }).isRequired
+};
+
 export const layout = {
   areaId: 'content',
   sortOrder: 10
 };
+
+export const query = `
+  query Query {
+    category(id: getContextValue('categoryId')) {
+      showProducts
+    }
+}`;

package/src/modules/catalog/pages/frontStore/categoryView/Filter.jsx

@@ -30,24 +30,40 @@ export default function Filter({
       if (
         currentFilters[i].key === 'page' ||
         currentFilters[i].key === 'limit' ||
-        currentFilters[i].key === 'sortBy' ||
-        currentFilters[i].key === 'sortOrder'
+        currentFilters[i].key === 'ob' ||
+        currentFilters[i].key === 'od'
       ) {
         continue;
       }
-      url.searchParams.delete(currentFilters[i].key);
+      if (currentFilters[i].operation === 'eq') {
+        url.searchParams.delete(currentFilters[i].key);
+      } else {
+        url.searchParams.delete(`${currentFilters[i].key}[operation]`);
+        url.searchParams.delete(`${currentFilters[i].key}[value]`);
+      }
     }
 
     for (let i = 0; i < newFilters.length; i += 1) {
       if (
         newFilters[i].key === 'page' ||
         newFilters[i].key === 'limit' ||
-        newFilters[i].key === 'sortBy' ||
-        newFilters[i].key === 'sortOrder'
+        newFilters[i].key === 'ob' ||
+        newFilters[i].key === 'od'
       ) {
         continue;
       }
-      url.searchParams.append(newFilters[i].key, newFilters[i].value);
+      if (newFilters[i].operation === 'eq') {
+        url.searchParams.append(newFilters[i].key, newFilters[i].value);
+      } else {
+        url.searchParams.append(
+          `${newFilters[i].key}[operation]`,
+          newFilters[i].operation
+        );
+        url.searchParams.append(
+          `${newFilters[i].key}[value]`,
+          newFilters[i].value
+        );
+      }
     }
     // window.location.href = url;
     url.searchParams.delete('ajax', true);

package/src/modules/catalog/pages/frontStore/categoryView/Filter.scss

@@ -50,7 +50,9 @@ input[type='range'] {
 input[type='range'],
 input[type='range']::-webkit-slider-runnable-track,
 input[type='range']::-webkit-slider-thumb {
+  appearance: none;
   -webkit-appearance: none;
+  -moz-appearance: auto;
   background: none;
 }
 input[type='range']::-webkit-slider-runnable-track {
@@ -130,6 +132,7 @@ input[type='range']:nth-child(1)::-webkit-slider-thumb {
     background-color: #fff;
     padding: 20px;
     box-sizing: border-box;
+    overflow: auto;
   }
 
   .filter-opener,

package/src/modules/catalog/pages/frontStore/categoryView/General.jsx

@@ -2,23 +2,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import './General.scss';
-import { CKEditor } from '@components/common/CKEditor';
+import Editor from '@components/common/Editor';
 
 export default function CategoryInfo({
   category: { name, description, image }
 }) {
   return (
     <div className="page-width">
-      <div className="mb-1 md:mb-2 category__general">
+      <div className="mb-4 md:mb-8 category__general">
         {image && (
           <img src={image.url} alt={name} className="category__image" />
         )}
-        <div className="category__info">
-          <div>
-            <h1 className="category__name">{name}</h1>
-            <div className="category__description">
-              <CKEditor content={description} />
-            </div>
+        <div className="category__info prose prose-base max-w-none">
+          <h1 className="category__name">{name}</h1>
+          <div className="category__description">
+            <Editor rows={description} />
           </div>
         </div>
       </div>

package/src/modules/catalog/pages/frontStore/categoryView/General.scss

@@ -20,8 +20,6 @@
     padding: 50px;
   }
   .category__info {
-    color: black;
-    display: flex;
     align-items: center;
   }
 }

package/src/modules/catalog/pages/frontStore/categoryView/Pagination.jsx

@@ -4,9 +4,13 @@ import { Pagination } from '@components/frontStore/catalog/product/list/Paginati
 
 export default function PaginationWrapper({
   products: {
+    showProducts,
     products: { total, currentFilters }
   }
 }) {
+  if (!showProducts) {
+    return null;
+  }
   const page = currentFilters.find((filter) => filter.key === 'page');
   const limit = currentFilters.find((filter) => filter.key === 'limit');
 
@@ -21,6 +25,7 @@ export default function PaginationWrapper({
 
 PaginationWrapper.propTypes = {
   products: PropTypes.shape({
+    showProducts: PropTypes.number.isRequired,
     products: PropTypes.shape({
       total: PropTypes.number.isRequired,
       currentFilters: PropTypes.arrayOf(
@@ -42,6 +47,7 @@ export const layout = {
 export const query = `
   query Query($filters: [FilterInput]) {
     products: category(id: getContextValue('categoryId')) {
+      showProducts
       products(filters: $filters) {
         total
         currentFilters {

package/src/modules/catalog/pages/frontStore/categoryView/Products.jsx

@@ -5,13 +5,17 @@ import { _ } from '@evershop/evershop/src/lib/locale/translate';
 
 export default function Products({
   products: {
+    showProducts,
     products: { items }
   }
 }) {
+  if (!showProducts) {
+    return null;
+  }
   return (
     <div>
       <ProductList products={items} countPerRow={3} />
-      <span className="product-count italic block mt-2">
+      <span className="product-count italic block mt-8">
         {_('${count} products', { count: items.length })}
       </span>
     </div>
@@ -20,6 +24,7 @@ export default function Products({
 
 Products.propTypes = {
   products: PropTypes.shape({
+    showProducts: PropTypes.number,
     products: PropTypes.shape({
       items: PropTypes.arrayOf(
         PropTypes.shape({
@@ -48,6 +53,7 @@ Products.propTypes = {
 
 Products.defaultProps = {
   products: {
+    showProducts: 1,
     products: {
       items: []
     }
@@ -62,6 +68,7 @@ export const layout = {
 export const query = `
   query Query($filters: [FilterInput]) {
     products: category(id: getContextValue('categoryId')) {
+      showProducts
       products(filters: $filters) {
         items {
           ...Product

package/src/modules/catalog/pages/frontStore/categoryView/[index]filters.js

@@ -1,111 +1,11 @@
-const { select } = require('@evershop/postgres-query-builder');
-const { pool } = require('@evershop/evershop/src/lib/postgres/connection');
+const {
+  buildFilterFromUrl
+} = require('@evershop/evershop/src/lib/util/buildFilterFromUrl');
 const {
   setContextValue
 } = require('../../../../graphql/services/contextHelper');
 
 module.exports = async (request, response, delegate, next) => {
-  const filterableAttributes = await select()
-    .from('attribute')
-    .where('type', '=', 'select')
-    .and('is_filterable', '=', 1)
-    .execute(pool);
-
-  const { query } = request;
-  if (!query) {
-    setContextValue(request, 'filtersFromUrl', []);
-    next();
-  } else {
-    const filtersFromUrl = [];
-
-    // Price filter
-    // const priceFilter = query.price;
-    const minPrice = Object.keys(query).find((key) => key === 'minPrice');
-    const maxPrice = Object.keys(query).find((key) => key === 'maxPrice');
-    if (minPrice) {
-      filtersFromUrl.push({
-        key: 'minPrice',
-        operation: '=',
-        value: `${query[minPrice]}`
-      });
-    }
-    if (maxPrice) {
-      filtersFromUrl.push({
-        key: 'maxPrice',
-        operation: '=',
-        value: `${query[maxPrice]}`
-      });
-    }
-
-    // Category filter
-    const categoryFilter = Object.keys(query).find((key) => key === 'cat');
-    if (categoryFilter) {
-      filtersFromUrl.push({
-        key: 'cat',
-        operation: '=',
-        value: `${query[categoryFilter]}`
-      });
-    }
-    // Attribute filters
-    Object.keys(query).forEach((key) => {
-      const filter = query[key];
-      const attribute = filterableAttributes.find(
-        (a) => a.attribute_code === key
-      );
-      if (attribute) {
-        if (Array.isArray(filter)) {
-          const values = filter
-            .map((v) => parseInt(v, 10))
-            .filter((v) => Number.isNaN(v) === false);
-          if (values.length > 0) {
-            filtersFromUrl.push({
-              key,
-              operation: '=',
-              value: values.join(',')
-            });
-          }
-        } else {
-          filtersFromUrl.push({
-            key,
-            operation: '=',
-            value: filter
-          });
-        }
-      }
-    });
-
-    const { sortBy } = query;
-    const sortOrder =
-      query.sortOrder && ['ASC', 'DESC'].includes(query.sortOrder.toUpperCase())
-        ? query.sortOrder.toUpperCase()
-        : 'ASC';
-    if (sortBy) {
-      filtersFromUrl.push({
-        key: 'sortBy',
-        operation: '=',
-        value: sortBy.toString()
-      });
-    }
-
-    filtersFromUrl.push({
-      key: 'sortOrder',
-      operation: '=',
-      value: sortOrder
-    });
-    // Paging
-    const page = Number.isNaN(parseInt(query.page, 10))
-      ? '1'
-      : query.page.toString();
-    if (page !== '1') {
-      filtersFromUrl.push({ key: 'page', operation: '=', value: page });
-    }
-    const limit = Number.isNaN(parseInt(query.limit, 10))
-      ? '20'
-      : query.limit.toString(); // TODO: Get from config
-    if (limit !== '20') {
-      filtersFromUrl.push({ key: 'limit', operation: '=', value: limit });
-    }
-    setContextValue(request, 'filtersFromUrl', filtersFromUrl);
-    next();
-  }
+  setContextValue(request, 'filtersFromUrl', buildFilterFromUrl(request));
+  next();
 };

package/src/modules/catalog/pages/frontStore/categoryView/route.json

@@ -1,4 +1,5 @@
 {
   "methods": ["GET"],
-  "path": "/category/:uuid"
+  "path": "/category/:uuid",
+  "name": "Category page"
 }

package/src/modules/catalog/pages/frontStore/productView/Description.jsx

@@ -1,13 +1,13 @@
 /* eslint-disable react/no-danger */
-import { CKEditor } from '@components/common/CKEditor';
+import Editor from '@components/common/Editor';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 export default function Description({ product: { description } }) {
   return (
-    <div className="mt-2 md:mt-3">
+    <div className="mt-8 md:mt-12">
       <div className="product-description">
-        <CKEditor content={description} />
+        <Editor rows={description} />
       </div>
     </div>
   );

package/src/modules/catalog/pages/frontStore/productView/Form.jsx

@@ -11,6 +11,7 @@ import Button from '@components/common/form/Button';
 import './Form.scss';
 import { useAppDispatch, useAppState } from '@components/common/context/app';
 import { _ } from '@evershop/evershop/src/lib/locale/translate';
+import ProductNoThumbnail from '@components/common/ProductNoThumbnail';
 
 function ToastMessage({ thumbnail, name, qty, count, cartUrl, toastId }) {
   return (
@@ -43,8 +44,12 @@ function ToastMessage({ thumbnail, name, qty, count, cartUrl, toastId }) {
         </div>
       </div>
       <div className="item-line flex justify-between">
-        <div className="popup-thumbnail flex justify-center">
-          <img src={thumbnail} alt={name} />
+        <div className="popup-thumbnail flex justify-center items-center">
+          {thumbnail ? (
+            <img src={thumbnail} alt={name} />
+          ) : (
+            <ProductNoThumbnail width={25} height={25} />
+          )}
         </div>
         <div className="item-info flex justify-between">
           <div className="name">
@@ -81,7 +86,7 @@ ToastMessage.propTypes = {
 
 function AddToCart({ stockAvaibility, loading = false, error }) {
   return (
-    <div className="add-to-cart mt-2">
+    <div className="add-to-cart mt-8">
       <div style={{ width: '8rem' }}>
         <Field
           type="text"
@@ -93,8 +98,8 @@ function AddToCart({ stockAvaibility, loading = false, error }) {
           formId="productForm"
         />
       </div>
-      {error && <div className="text-critical mt-1">{error}</div>}
-      <div className="mt-1">
+      {error && <div className="text-critical mt-4">{error}</div>}
+      <div className="mt-4">
         {stockAvaibility === true && (
           <Button
             title={_('ADD TO CART')}
@@ -151,7 +156,7 @@ export default function ProductForm({ product, action }) {
             qty={response.data.item.qty}
             count={response.data.count}
             cartUrl="/cart"
-            toastId={toastId}
+            toastId={`${toastId}-${Math.random().toString(36).slice(2)}`}
           />,
           { closeButton: false }
         )
@@ -206,7 +211,7 @@ ProductForm.propTypes = {
 
 export const layout = {
   areaId: 'productPageMiddleRight',
-  sortOrder: 20
+  sortOrder: 45
 };
 
 export const query = `

package/src/modules/catalog/pages/frontStore/productView/Form.scss

@@ -21,6 +21,7 @@
   padding: 2rem;
   border: 1px solid var(--divider);
   box-shadow: 1px 1px 10px 2px #ebebeb80;
+  background-color: #fff;
   .top-head {
     grid-template-columns: 4fr 1fr;
     padding-bottom: 1rem;

package/src/modules/catalog/pages/frontStore/productView/GeneralInfo.jsx

@@ -10,7 +10,7 @@ export default function GeneralInfo({ product }) {
   return (
     <Area
       id="productViewGeneralInfo"
-      className="flex flex-col gap-1"
+      className="flex flex-col gap-4"
       coreComponents={[
         {
           component: { default: Name },

package/src/modules/catalog/pages/frontStore/productView/Images.jsx

@@ -51,7 +51,7 @@ export default function Images({ product: { uuid, image, gallery = [] } }) {
   return (
     <div className="product-single-media">
       <Current image={current} />
-      <ul className="more-view-thumbnail product-gallery mt-2 grid grid-cols-4 gap-1">
+      <ul className="more-view-thumbnail product-gallery mt-8 grid grid-cols-4 gap-4">
         {thumbs.map((i, j) => (
           <li key={j} className="flex justify-center items-center">
             <a

package/src/modules/catalog/pages/frontStore/productView/Layout.jsx

@@ -6,7 +6,7 @@ export default function ProductPageLayout() {
     <div className="product-detail">
       <Area id="productPageTop" className="product-page-top" />
       <div className="product-page-middle page-width">
-        <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+        <div className="grid grid-cols-1 gap-12 md:grid-cols-2">
           <Area id="productPageMiddleLeft" />
           <Area id="productPageMiddleRight" />
         </div>

package/src/modules/catalog/pages/frontStore/productView/Options.jsx

@@ -10,8 +10,8 @@ export default function Options({ options = [] }) {
   }
 
   return (
-    <div className="product-single-options mt-4 mb-4">
-      <div className="product-single-options-title mb-2">
+    <div className="product-single-options mt-16 mb-16">
+      <div className="product-single-options-title mb-8">
         <strong>Options</strong>
       </div>
       {options.map((o, i) => {