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

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/bin/lib/app.js

@@ -13,7 +13,8 @@ const { getEnabledExtensions } = require('../extension');
 module.exports.createApp = () => {
   /** Create express app */
   const app = express();
-
+  // Enable trust proxy
+  app.enable('trust proxy');
   /* Loading modules and initilize routes, components and services */
   const modules = getCoreModules();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evershop/evershop",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "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/graphql/types/Category/Category.resolvers.js

@@ -1,8 +1,9 @@
-const { select } = require('@evershop/mysql-query-builder');
+const { select, node } = require('@evershop/mysql-query-builder');
 const { buildUrl } = require('../../../../../lib/router/buildUrl');
 const { camelCase } = require('../../../../../lib/util/camelCase');
 const uniqid = require('uniqid');
-const { getProductsQuery } = require('../../../services/getProductsQuery');
+const { getProductsBaseQuery } = require('../../../services/getProductsBaseQuery');
+const { pool } = require('../../../../../lib/mysql/connection');
 
 module.exports = {
   Query: {
@@ -198,7 +199,7 @@ module.exports = {
   },
   Category: {
     products: async (category, { filters = [] }, { filterableAttributes, priceRange }) => {
-      const query = await getProductsQuery(category.categoryId);
+      const query = await getProductsBaseQuery(category.categoryId);
       const currentFilters = [];
       // Price filter 
       const priceFilter = filters.find((f) => f.key === 'price');
@@ -271,6 +272,39 @@ module.exports = {
           value: sortOrder.value
         });
       }
+
+      // Visibility. For variant group
+      const copy = query.clone();
+      // Get all group that have at lease 1 item visibile
+      const visibleGroups = (await select('variant_group_id')
+        .from('variant_group')
+        .where('visibility', '=', 1)
+        .execute(pool)).map((v) => v.variant_group_id);
+
+      if (visibleGroups) {
+        // Get all invisible variants from current query
+        copy.select('SUM(product.`visibility`)', 'sumv')
+          .select('product.`product_id`')
+          .andWhere('product.`variant_group_id`', 'IN', visibleGroups);
+        copy.groupBy('product.`variant_group_id`')
+          .having('sumv', '=', 0);
+
+        const invisibleIds = (await copy.execute(pool)).map((v) => v.product_id);
+        if (invisibleIds.length > 0) {
+          const n = node('AND');
+          n.addLeaf('AND', 'product.`product_id`', 'IN', invisibleIds)
+            .addNode(
+              node('OR')
+                .addLeaf('OR', 'product.`visibility`', '=', 1)
+            );
+          query.getWhere().addNode(n);
+        } else {
+          query.andWhere('product.`visibility`', '=', 1);
+        }
+      } else {
+        query.andWhere('product.`visibility`', '=', 1);
+      }
+
       // Clone the main query for getting total right before doing the paging
       const cloneQuery = query.clone();
       cloneQuery.select('COUNT(product.`product_id`)', 'total');

package/src/modules/catalog/graphql/types/FeaturedProduct/FeaturedProduct.resolvers.js

@@ -17,6 +17,7 @@ module.exports = {
       query.leftJoin('cart_item')
         .on('cart_item.`product_id`', '=', 'product.`product_id`');
       query.where('product.`status`', '=', 1);
+      query.andWhere('product.`visibility`', '=', 1);
       query.groupBy('product.`product_id`');
       query.orderBy('soldQty', 'desc');
       query.limit(0, 4);

package/src/modules/catalog/migration/Version-1.0.1.js

@@ -0,0 +1,8 @@
+const { execute } = require('@evershop/mysql-query-builder');
+const { pool } = require('../../../lib/mysql/connection');
+
+// eslint-disable-next-line no-multi-assign
+module.exports = exports = async () => {
+  await execute(pool, `UPDATE product SET visibility = 1 WHERE visibility IS NULL`);
+  await execute(pool, `ALTER TABLE product MODIFY COLUMN visibility smallint(2) NOT NULL DEFAULT 1`);
+};

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/admin/productEdit+productNew/VariantGroup.js

@@ -53,6 +53,7 @@ query Query {
           name
           sku
           status
+          visibility
           price {
             regular {
               value

package/src/modules/catalog/pages/admin/productEdit+productNew/variants/Variant.js

@@ -122,7 +122,7 @@ export function Variant({
               <Field
                 name={`variant_group[variants][${variant.id}][visibility]`}
                 formId="product-edit-form"
-                value={variant.visibility}
+                value={variant.product?.visibility}
                 type="toggle"
               />
             </div>

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
+}