@evershop/evershop 1.1.0 → 1.2.0

package/src/modules/catalog/pages/admin/productEdit+productNew/FormContent.jsx

@@ -9,15 +9,15 @@ export default function FormContent({ gridUrl }) {
   const { state } = useFormContext();
   return (
     <>
-      <div className="grid grid-cols-3 gap-x-2 grid-flow-row ">
-        <div className="col-span-2 grid grid-cols-1 gap-2 auto-rows-max">
+      <div className="grid grid-cols-3 gap-x-8 grid-flow-row ">
+        <div className="col-span-2 grid grid-cols-1 gap-8 auto-rows-max">
           <Area id="leftSide" noOuter />
         </div>
-        <div className="col-span-1 grid grid-cols-1 gap-2 auto-rows-max">
+        <div className="col-span-1 grid grid-cols-1 gap-8 auto-rows-max">
           <Area id="rightSide" noOuter />
         </div>
       </div>
-      <div className="form-submit-button flex border-t border-divider mt-15 pt-15 justify-between">
+      <div className="form-submit-button flex border-t border-divider mt-6 pt-6 justify-between">
         <Button
           title="Cancel"
           variant="critical"

package/src/modules/catalog/pages/admin/productEdit+productNew/General.jsx

@@ -3,12 +3,12 @@ import React from 'react';
 import Area from '@components/common/Area';
 import { Field } from '@components/common/form/Field';
 import { Card } from '@components/admin/cms/Card';
-import CkeditorField from '@components/common/form/fields/Ckeditor';
 import CategoryTree from '@components/admin/catalog/productEdit/category/CategoryTree';
+import Editor from '@components/common/form/fields/Editor';
 
 function SKUPriceWeight({ sku, price, weight, setting }) {
   return (
-    <div className="grid grid-cols-3 gap-1 mt-15">
+    <div className="grid grid-cols-3 gap-4 mt-6">
       <div>
         <Field
           id="sku"
@@ -71,17 +71,17 @@ function Category({ product }) {
   );
 
   return (
-    <div className="mt-15 relative">
-      <div className="mb-1">Category</div>
+    <div className="mt-6 relative">
+      <div className="mb-4">Category</div>
       {category && (
-        <div className="border rounded border-[#c9cccf] mb-1 p-1">
+        <div className="border rounded border-[#c9cccf] mb-4 p-4">
           {category.path.map((item, index) => (
             <span key={item.name} className="text-gray-500">
               {item.name}
               {index < category.path.length - 1 && ' > '}
             </span>
           ))}
-          <span className="text-interactive pl-2">
+          <span className="text-interactive pl-8">
             <a
               href="#"
               onClick={(e) => {
@@ -97,7 +97,7 @@ function Category({ product }) {
                 e.preventDefault();
                 setCategory(null);
               }}
-              className="text-critical ml-2"
+              className="text-critical ml-8"
             >
               Unassign
             </a>
@@ -117,15 +117,13 @@ function Category({ product }) {
         </a>
       )}
       {selecting && (
-        <div className="absolute top-5 left-0 right-0 bg-[#eff2f5] z-50 border rounded border-[#c9cccf] p-[10px]">
-          <CategoryTree
-            selectedCategory={category}
-            setSelectedCategory={(cat) => {
-              setCategory(cat);
-              setSelecting(false);
-            }}
-          />
-        </div>
+        <CategoryTree
+          selectedCategory={category}
+          setSelectedCategory={(cat) => {
+            setCategory(cat);
+            setSelecting(false);
+          }}
+        />
       )}
       {category && (
         <input type="hidden" name="category_id" value={category?.categoryId} />
@@ -229,7 +227,7 @@ export default function General({
               id: 'tax_class'
             },
             {
-              component: { default: CkeditorField },
+              component: { default: Editor },
               props: {
                 id: 'description',
                 name: 'description',

package/src/modules/catalog/pages/admin/productGrid/Grid.jsx

@@ -124,7 +124,7 @@ function Actions({ products = [], selectedIds = [] }) {
       {selectedIds.length > 0 && (
         <td style={{ borderTop: 0 }} colSpan="100">
           <div className="inline-flex border border-divider rounded justify-items-start">
-            <a href="#" className="font-semibold pt-075 pb-075 pl-15 pr-15">
+            <a href="#" className="font-semibold pt-3 pb-3 pl-6 pr-6">
               {selectedIds.length} selected
             </a>
             {actions.map((action) => (
@@ -134,7 +134,7 @@ function Actions({ products = [], selectedIds = [] }) {
                   e.preventDefault();
                   action.onAction();
                 }}
-                className="font-semibold pt-075 pb-075 pl-15 pr-15 block border-l border-divider self-center"
+                className="font-semibold pt-3 pb-3 pl-6 pr-6 block border-l border-divider self-center"
               >
                 <span>{action.name}</span>
               </a>
@@ -174,7 +174,7 @@ export default function ProductGrid({
       <Card.Session
         title={
           <Form submitBtn={false}>
-            <div className="flex gap-2 justify-center items-center">
+            <div className="flex gap-8 justify-center items-center">
               <Area
                 id="productGridFilter"
                 noOuter

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

@@ -15,9 +15,9 @@ export default function SearchInfo() {
 
   return (
     <div className="page-width">
-      <div className="mb-1 md:mb-2">
+      <div className="mb-4 md:mb-8">
         <div className="text-left ">
-          <h1 className="search-name mt-25">
+          <h1 className="search-name mt-10">
             {_('Search results for "${keyword}"', { keyword: key })}
           </h1>
         </div>

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

@@ -7,7 +7,7 @@ export default function Products({ products: { items } }) {
   return (
     <div>
       <ProductList products={items} countPerRow={4} />
-      <span className="product-count italic block mt-2">
+      <span className="product-count italic block mt-8">
         {_('${count} products', { count: items.length })}
       </span>
     </div>

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.scss

@@ -132,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/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

@@ -86,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"
@@ -98,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')}
@@ -211,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) => {

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

@@ -146,7 +146,7 @@ export default function Variants({
   };
 
   return (
-    <div className="variant variant-container grid grid-cols-1 gap-1 mt-2">
+    <div className="variant variant-container grid grid-cols-1 gap-4 mt-8">
       {attributes.map((a, i) => {
         const options = a.options.filter(
           (v, j, s) =>
@@ -164,10 +164,10 @@ export default function Variants({
               type="hidden"
               value={a.selectedOption}
             />
-            <div className="mb-05 text-textSubdued uppercase">
+            <div className="mb-2 text-textSubdued uppercase">
               <span>{a.attribute_name}</span>
             </div>
-            <ul className="variant-option-list flex justify-start gap-05 flex-wrap">
+            <ul className="variant-option-list flex justify-start gap-2 flex-wrap">
               {options.map((o) => {
                 let className = '';
                 if (a.selected && a.selectedOption === o.optionId) {
@@ -240,7 +240,7 @@ Variants.propTypes = {
 
 export const layout = {
   areaId: 'productPageMiddleRight',
-  sortOrder: 40
+  sortOrder: 35
 };
 
 export const query = `

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

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

package/src/modules/catalog/services/AttributeCollection.js

@@ -17,16 +17,16 @@ class AttributeCollection {
     );
 
     attributeCollectionFilters.forEach((filter) => {
-      const check = filters.find((f) => f.key === filter.key);
-      if (check) {
-        if (filter.operation.includes(check.operation)) {
-          filter.callback(
-            this.baseQuery,
-            check.operation,
-            check.value,
-            currentFilters
-          );
-        }
+      const check = filters.find(
+        (f) => f.key === filter.key && filter.operation.includes(f.operation)
+      );
+      if (filter.key === '*' || check) {
+        filter.callback(
+          this.baseQuery,
+          check?.operation,
+          check?.value,
+          currentFilters
+        );
       }
     });
 

package/src/modules/catalog/services/AttributeGroupCollection.js

@@ -58,16 +58,16 @@ class AttributeGroupCollection {
     );
 
     attributeGroupCollectionFilters.forEach((filter) => {
-      const check = filters.find((f) => f.key === filter.key);
-      if (check) {
-        if (filter.operation.includes(check.operation)) {
-          filter.callback(
-            this.baseQuery,
-            check.operation,
-            check.value,
-            currentFilters
-          );
-        }
+      const check = filters.find(
+        (f) => f.key === filter.key && filter.operation.includes(f.operation)
+      );
+      if (filter.key === '*' || check) {
+        filter.callback(
+          this.baseQuery,
+          check?.operation,
+          check?.value,
+          currentFilters
+        );
       }
     });
 

package/src/modules/catalog/services/CategoryCollection.js

@@ -24,16 +24,16 @@ class CategoryCollection {
     );
 
     categoryCollectionFilters.forEach((filter) => {
-      const check = filters.find((f) => f.key === filter.key);
-      if (check) {
-        if (filter.operation.includes(check.operation)) {
-          filter.callback(
-            this.baseQuery,
-            check.operation,
-            check.value,
-            currentFilters
-          );
-        }
+      const check = filters.find(
+        (f) => f.key === filter.key && filter.operation.includes(f.operation)
+      );
+      if (filter.key === '*' || check) {
+        filter.callback(
+          this.baseQuery,
+          check?.operation,
+          check?.value,
+          currentFilters
+        );
       }
     });
 

package/src/modules/catalog/services/CollectionCollection.js

@@ -18,16 +18,16 @@ class CollectionCollection {
     );
 
     collectionCollectionFilters.forEach((filter) => {
-      const check = filters.find((f) => f.key === filter.key);
-      if (check) {
-        if (filter.operation.includes(check.operation)) {
-          filter.callback(
-            this.baseQuery,
-            check.operation,
-            check.value,
-            currentFilters
-          );
-        }
+      const check = filters.find(
+        (f) => f.key === filter.key && filter.operation.includes(f.operation)
+      );
+      if (filter.key === '*' || check) {
+        filter.callback(
+          this.baseQuery,
+          check?.operation,
+          check?.value,
+          currentFilters
+        );
       }
     });
 

package/src/modules/catalog/services/registerCartItemProductUrlField.js

@@ -0,0 +1,35 @@
+const { pool } = require('@evershop/evershop/src/lib/postgres/connection');
+const { buildUrl } = require('@evershop/evershop/src/lib/router/buildUrl');
+const { select } = require('@evershop/postgres-query-builder');
+
+module.exports = exports = {};
+
+exports.registerCartItemProductUrlField = (fields) => {
+  const newFields = fields.concat([
+    {
+      key: 'productUrl',
+      resolvers: [
+        async function resolver() {
+          const product = await this.getProduct();
+          if (!this.getData('product_id')) {
+            return null;
+          }
+          const urlRewrite = await select()
+            .from('url_rewrite')
+            .where('entity_uuid', '=', product.uuid)
+            .and('entity_type', '=', 'product')
+            .load(pool);
+          if (!urlRewrite) {
+            return buildUrl('productView', {
+              uuid: product.uuid
+            });
+          } else {
+            return urlRewrite.request_path;
+          }
+        }
+      ],
+      dependencies: ['product_id']
+    }
+  ]);
+  return newFields;
+};