@evershop/evershop 1.0.0-beta.2 → 1.0.0-beta.3

package/README.md

@@ -1,6 +1,6 @@
 <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
 <p align="center">
-  <h1 align="center">Lightweight, modular, extendable React ecommerce platform.</h1>
+  <h1 align="center">Lightweight And Extendable React E-commerce Platform</h1>
 </p>
 <p align="center">
     <a href="https://evershop.io/docs/development/getting-started/introduction">Documentation</a>
@@ -15,49 +15,36 @@
   </a>
 </p>
 
-## Component-Level Data Fetching (Server Side Props)
-
-```javascript
-import React from 'react';
-import Products from './components/Products';
-
-export default function NewArrival({ products }) {
-    return <div>
-      <h2>New Arrival</h2>
-      <Products products={products}/>
-    </div>
-}
-
-// The GraphQL query result will be passed to the page component as props
-export const query = `
-  query NewArrival {
-    products {
-      name
-      price
-      image {
-        alt
-        url
-      }
-      url
-    }
-}
-`
-```
+## Introduction
+
+EverShop is a GraphQL Based and React ecommerce platform with essential commerce features. Built with React, modular and fully customizable.
+
+## Features
+- Catalog management
+  - Product management
+  - Category management
+  - Attribute and attribute group
+  - Variant management
+  - Custom options
+  - Product layered navigation
+- Order management
+- Customer management
+  - Customer group
+  - Customer address
+  - Login, register and my account
+- Advanced coupon management
+- Online payment methods
+  - Stripe
+  - Paypal
 
 ## Demo
 
 Explore our demo store.
 
 <p align="center">
-<!--img alt="EverShop Admin Demo" width="950" src="https://raw.githubusercontent.com/evershopcommerce/evershop/dev/.github/images/evershop-backend-demo.png"/>
-</p-->
-<p align="left">
-  <a href="https://demo.evershop.io/" target="_blank">
-    <img alt="evershop-store-demo" height="35" alt="EverShop Store Demo" src="https://raw.githubusercontent.com/evershopcommerce/evershop/dev/.github/images/evershop-store-front-demo.png"/>
-  </a>
+<img alt="EverShop Admin Demo" width="950" src="https://raw.githubusercontent.com/evershopcommerce/evershop/dev/.github/images/evershop-backend-demo.png"/>
 </p>
-
-<p align="left">
+<p align="center">
   <a href="https://demo.evershop.io/admin" target="_blank">
     <img alt="evershop-backend-demo" height="35" alt="EverShop Admin Demo" src="https://raw.githubusercontent.com/evershopcommerce/evershop/dev/.github/images/evershop-admin-demo.png"/>
   </a>
@@ -66,10 +53,14 @@ Explore our demo store.
 
 Email: demo@gmail.com<br/>
 Password: 123456
-<!--p align="center">
+<p align="center">
 <img alt="EverShop Store Demo" width="950" src="https://raw.githubusercontent.com/evershopcommerce/evershop/dev/.github/images/evershop-product-detail.png"/>
-</p-->
-
+</p>
+<p align="center">
+  <a href="https://demo.evershop.io/" target="_blank">
+    <img alt="evershop-store-demo" height="35" alt="EverShop Store Demo" src="https://raw.githubusercontent.com/evershopcommerce/evershop/dev/.github/images/evershop-store-front-demo.png"/>
+  </a>
+</p>
 
 ## Quick Start
 
@@ -85,22 +76,14 @@ npx create-evershop-app my-app --playAround
 
 - [Theme development](https://evershop.io/docs/development/theme/theme-overview).
 
-## Features
-- Catalog management(with product attribute, custom option and variants)
-- Order management
-- Customer management
-- Coupon management
-- Tax
-- Online payment (For now using Stripe)
-- Basic CMS pages management
-- Easy to customize by developing extensions
+
 
 ## Support
 
 If you like my work, feel free to:
 
-- ⭐ this repository. It is a big motivation for me to continue working on this project.
-- [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)][tweet] about EverShop
+- ⭐ this repository. It helps.
+- [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)][tweet] about EverShop. Please accept my gratitude.
 
 [tweet]: https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fevershopcommerce%2Fevershop&text=Awesome%20React%20Ecommerce%20Project&hashtags=react,ecommerce,expressjs,graphql
 ### Ask a question about EverShop

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evershop/evershop",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "The React Ecommerce platform. Built with React and MySQL. Open-source and free. Fast and customizable.",
   "files": [
     "bin",

package/src/lib/components/Area.js

@@ -34,7 +34,7 @@ function Area(props) {
 
   return (
     <WrapperComponent {...areaWrapperProps}>
-      {areaComponents.map((w) => {
+      {areaComponents.map((w, index) => {
         const C = w.component.default;
         const id = w.id;
         const propsMap = context.propsMap;
@@ -48,8 +48,8 @@ function Area(props) {
         if (w.props) {
           Object.assign(componentProps, w.props);
         }
-        if (typeof C === 'string') return <C key={w.id} {...componentProps} />;
-        return <C key={w.id} areaProps={props} {...componentProps} />;
+        if (typeof C === 'string') return <C key={index} {...componentProps} />;
+        return <C key={index} areaProps={props} {...componentProps} />;
       })}
     </WrapperComponent>
   );

package/src/lib/components/form/Form.js

@@ -50,10 +50,22 @@ export function Form(props) {
     const errors = {};
     fields.forEach((f) => {
       f.validationRules.forEach((r) => {
-        const rule = validator.getRule(r);
-        if (rule === undefined) return;
-        if (!rule.handler.call(fields, f.value)) {
-          errors[f.name] = rule.errorMessage;
+        let rule;
+        // Check if r is a string or an object
+        if (typeof r === 'string') {
+          rule = r;
+        } else {
+          rule = r.rule;
+        }
+
+        const ruleValidator = validator.getRule(rule);
+        if (ruleValidator === undefined) return;
+        if (!ruleValidator.handler.call(fields, f.value)) {
+          if (r.message) {
+            errors[f.name] = r.message;
+          } else {
+            errors[f.name] = ruleValidator.errorMessage;
+          }
         }
       });
     });
@@ -119,7 +131,9 @@ export function Form(props) {
         // Get the first element with the name of the field with error
         const firstElementWithError = document.getElementsByName(firstFieldWithError)[0];
         // Focus on the first element with error
-        firstElementWithError.focus();
+        if (firstElementWithError) {
+          firstElementWithError.focus();
+        }
       }
     } catch (error) {
       if (onError) {

package/src/lib/components/form/fields/Hidden.js

@@ -1,16 +1,20 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Error from './Error';
 
-export function Hidden({ name, value }) {
+export function Hidden({ name, value, error }) {
   return (
-    <input
-      type="text"
-      id={name}
-      name={name}
-      value={value}
-      readOnly
-      style={{ display: 'none' }}
-    />
+    <>
+      {error && <Error error={error} />}
+      <input
+        type="text"
+        id={name}
+        name={name}
+        value={value}
+        readOnly
+        style={{ display: 'none' }}
+      />
+    </>
   );
 }
 

package/src/lib/components/form/fields/Radio.js

@@ -66,7 +66,7 @@ Radio.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     text: PropTypes.string
   })).isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 
 Radio.defaultProps = {

package/src/modules/base/graphql/types/Country/Country.graphql

@@ -1,8 +1,10 @@
 type Country {
   name: String!
   code: String!
+  provinces: [Province]
 }
 
 extend type Query {
   countries (countries: [String]) : [Country]
+  allowedCountries : [Country]
 }

package/src/modules/base/graphql/types/Country/Country.resolvers.js

@@ -1,4 +1,6 @@
-const { contries } = require("../../../../../lib/locale/countries")
+const { contries } = require("../../../../../lib/locale/countries");
+const { getSetting } = require("../../../../setting/services/setting");
+const { provinces } = require("../../../../../lib/locale/provinces");
 
 module.exports = {
   Query: {
@@ -9,6 +11,11 @@ module.exports = {
       } else {
         return contries.filter((c) => list.includes(c.code));
       }
+    },
+    allowedCountries: async () => {
+      const allowedCountries = await getSetting("allowedCountries", '["US"]');
+      let list = JSON.parse(allowedCountries);
+      return contries.filter((c) => list.includes(c.code));
     }
   },
   Country: {
@@ -26,6 +33,9 @@ module.exports = {
       } else {
         return country;
       }
+    },
+    provinces: (country) => {
+      return provinces.filter((p) => p.countryCode === country.code);
     }
   }
 }

package/src/modules/catalog/components/product/list/List.js

@@ -6,7 +6,7 @@ import { Price } from './item/Price';
 import Area from '../../../../../lib/components/Area';
 import { get } from '../../../../../lib/util/get';
 
-export default function ProductList({ products = [] }) {
+export default function ProductList({ products = [], countPerRow = 3 }) {
   if (products.length === 0) {
     return (
       <div className="product-list">
@@ -14,8 +14,24 @@ export default function ProductList({ products = [] }) {
       </div>
     );
   }
+
+  let className;
+  switch (countPerRow) {
+    case 3:
+      className = 'grid grid-cols-2 md:grid-cols-3 gap-2';
+      break;
+    case 4:
+      className = 'grid grid-cols-2 md:grid-cols-4 gap-2';
+      break;
+    case 5:
+      className = 'grid grid-cols-2 md:grid-cols-5 gap-2';
+      break;
+    default:
+      className = 'grid grid-cols-2 md:grid-cols-3 gap-2';
+  }
+
   return (
-    <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+    <div className={className}>
       {
         products.map((p) => (
           <Area

package/src/modules/catalog/pages/admin/attributeEdit/index.js

@@ -15,8 +15,8 @@ module.exports = async (request, response, delegate, next) => {
     } else {
       setContextValue(request, 'attributeId', attribute.attribute_id);
       setContextValue(request, 'pageInfo', {
-        title: attribute.name,
-        description: attribute.name
+        title: attribute.attribute_name,
+        description: attribute.attribute_name
       });
       next();
     }

package/src/modules/catalog/pages/admin/attributeEdit+attributeNew/General.js

@@ -57,7 +57,7 @@ function Groups({ groups, addGroupUrl }) {
     <div className='grid gap-2 grid-cols-2'>
       <div>
         <Select
-          name='groups'
+          name='groups[]'
           options={data.attributeGroups}
           hideSelectedOptions={true}
           isMulti={true}

package/src/modules/catalog/pages/admin/attributeGrid/rows/GroupRow.js

@@ -21,11 +21,12 @@ export default function GroupRow({ groups, saveAttributeGroupUrl }) {
           onSuccess={() => {
             location.reload();
           }}
+          isJSON={true}
         >
           <Field
             formId="group-edit"
             type="text"
-            name="groupName"
+            name="group_name"
             value={group.groupName}
           />
           <Field

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+
+export default function CategoryView() {
+  return (
+    <div className="page-width grid grid-cols-1 md:grid-cols-4 gap-2">
+      <Area
+        id="leftColumn"
+        className="md:col-span-1"
+      />
+      <Area
+        id="rightColumn"
+        className="md:col-span-3"
+      />
+    </div>
+  );
+}
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 10
+}

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

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import Area from '../../../../../lib/components/Area';
 import { get } from '../../../../../lib/util/get';
-import Sorting from '../../../components/product/list/Sorting';
 import './Filter.scss';
 
 function Price({
@@ -109,10 +108,16 @@ function Attributes({ currentFilters, attributes, updateFilter }) {
     e.preventDefault();
     if (isChecked === true) {
       updateFilter(
-        currentFilters.filter(
-          (f) => f.key !== attributeCode
-            || (f.key === attributeCode && parseInt(f.value, 10) !== parseInt(optionId, 10))
-        )
+        currentFilters.map(
+          (f) => {
+            if (f.key !== attributeCode) {
+              return f
+            } else {
+              const value = f.value.split(',').filter((v) => parseInt(v) !== parseInt(optionId));
+              return { key: attributeCode, value: value.join(',') };
+            }
+          }
+        ).filter((f) => f.value !== '')
       );
     } else {
       updateFilter(currentFilters.concat({ key: attributeCode, value: optionId }));
@@ -124,21 +129,31 @@ function Attributes({ currentFilters, attributes, updateFilter }) {
       {attributes.map((a) => (
         <div key={a.attributeCode}>
           <div className="filter-item-title"><span className="font-medium">{a.attributeName}</span></div>
-          <ul className="flex flex-wrap filter-option-list">
+          <ul className="filter-option-list">
             {a.options.map((o) => {
               const isChecked = currentFilters.find(
                 (f) => f.key === a.attributeCode
-                  && parseInt(f.value, 10) === parseInt(o.optionId, 10)
+                  && f.value.split(',').includes(o.optionId.toString())
               );
               return (
                 <li key={o.optionId} className="mt-05 mr-05">
-                  <button
-                    type="button"
-                    className={isChecked ? 'checked text-center filter-option link-button' : 'text-center filter-option link-button'}
-                    onClick={(e) => onChange(e, a.attributeCode, o.optionId, !!isChecked)}
-                  >
-                    {o.optionText}
-                  </button>
+                  <a href="#" className='flex justify-start items-center' onClick={(e) => onChange(e, a.attributeCode, o.optionId, !!isChecked)}>
+                    {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" ></path>
+                        </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"></path>
+                        </g>
+                      </g>
+                    </svg>}
+                    <span className='filter-option'>{o.optionText}</span>
+                  </a>
                 </li>
               );
             })}
@@ -162,8 +177,7 @@ Attributes.propTypes = {
 };
 
 export default function Filter({ category: { availableFilters, products: { currentFilters } } }) {
-
-  const [filtering, setFiltering] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const updateFilter = (newFilters) => {
     const currentUrl = window.location.href;
@@ -189,30 +203,14 @@ export default function Filter({ category: { availableFilters, products: { curre
   };
 
   return (
-    <div className="product-filter-tool">
-      <div className="page-width flex justify-between">
-        <div className="self-center">
-          <div className="filter-heading">
-            {filtering === false && (
-              <button type="button" className="link-button flex justify-start space-x-05" onClick={(e) => { e.preventDefault(); setFiltering(true); }}>
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
-                </svg>
-                <span className="font-light">FILTER BY</span>
-              </button>
-            )}
-            {filtering === true && (
-              <div className="close-filter mb-1">
-                <button type="button" onClick={(e) => { e.preventDefault(); setFiltering(false); }} className="link-button">
-                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                    <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
-                  </svg>
-                </button>
-              </div>
-            )}
-          </div>
-          {filtering === true && (
-            <div className="filter-table md:grid md:grid-cols-4 gap-2">
+    <>
+      <div className={`product-filter-tool hidden md:block ${isOpen ? 'opening' : 'closed'}`}>
+        <div className="">
+          <div className="self-center">
+            <div className="filter-heading">
+              <span className="font-bold ">SHOP BY</span>
+            </div>
+            <div className='mt-1 grid grid-cols-1 gap-2'>
               <Area
                 id="productFilter"
                 updateFilter={updateFilter}
@@ -229,20 +227,25 @@ export default function Filter({ category: { availableFilters, products: { curre
                 ]}
               />
             </div>
-          )}
-        </div>
-        {filtering === false && (
-          <div>
-            <Sorting currentFilters={currentFilters} />
           </div>
-        )}
+        </div>
+        <a className='filter-closer flex md:hidden' href="#" onClick={(e) => { e.preventDefault(); setIsOpen(!isOpen) }}>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
+          </svg>
+        </a>
       </div>
-    </div>
+      <a className='filter-opener flex md:hidden' href="#" onClick={(e) => { e.preventDefault(); setIsOpen(!isOpen) }}>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
+        </svg>
+      </a>
+    </>
   );
 }
 
 export const layout = {
-  areaId: "content",
+  areaId: "leftColumn",
   sortOrder: 1
 }
 

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

@@ -1,8 +1,6 @@
 .product-filter-tool {
     padding-top: 1rem;
     padding-bottom: 1rem;
-    border-top: 1px solid var(--divider);
-    border-bottom: 1px solid var(--divider);
     margin-bottom: 1.5rem;
     .filter-item-title {
         margin-bottom: 0.5rem;
@@ -16,13 +14,8 @@
     }
 }
 .filter-option {
-    border: 1px solid var(--divider);
-    display: block;
-    padding: 0.5rem 1.5rem;
+    padding: 0rem 0.8rem;
     border-radius: 2px;
-    &.checked {
-        border: 2px solid var(--text);
-    }
 }
 
 .filter-heading {
@@ -97,3 +90,45 @@ input[type="range"]:nth-child(1)::-webkit-slider-thumb {
     float: right;
     margin-right: -5px;
 }
+
+.filter-opener, .filter-closer {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    width: 35px;
+    height: 35px;
+}
+
+.filter-opener, .filter-closer {
+    z-index: 998;
+    background: #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 10px rgba(0,0,0,0.2);
+    justify-content: center;
+    align-items: center;
+    svg {
+        width: 20px;
+        height: 20px;
+    }
+}
+
+@media (max-width: 639px) {
+    .product-filter-tool.opening {
+        display: block;
+        position: fixed;
+        // Make full screen
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 999;
+        background-color: #fff;
+        padding: 20px;
+        box-sizing: border-box;
+    }
+
+        .filter-opener,
+        .filter-closer {
+            display: flex;
+        }
+}