@evershop/evershop 1.0.0-beta

package/src/modules/catalog/pages/admin/productGrid/rows/ProductName.js

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function ProductNameRow({ id, url, name }) {
+  return (
+    <td>
+      <div>
+        <a className="hover:underline font-semibold" href={url}>{name}</a>
+      </div>
+    </td>
+  );
+}
+
+ProductNameRow.propTypes = {
+  name: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired
+};

package/src/modules/catalog/pages/admin/productGrid/rows/QtyRow.js

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function QtyRow({ qty }) {
+  return (
+    <td>
+      <div>
+        <span>{qty}</span>
+      </div>
+    </td>
+  );
+}
+
+QtyRow.propTypes = {
+  qty: PropTypes.string.isRequired
+};

package/src/modules/catalog/pages/admin/productGrid/rows/ThumbnailRow.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function ThumbnailRow({ src, name }) {
+  return (
+    <td>
+      <div className="grid-thumbnail text-border border border-divider p-075 rounded flex justify-center" style={{ width: '6rem', height: '6rem' }}>
+        {src && <img className="self-center" src={src} alt={name} />}
+        {!src && (
+          <svg className="self-center" xmlns="http://www.w3.org/2000/svg" width="2rem" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+          </svg>
+        )}
+      </div>
+    </td>
+  );
+}
+
+ThumbnailRow.propTypes = {
+  src: PropTypes.string,
+  name: PropTypes.string
+};

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

@@ -0,0 +1,8 @@
+const { setContextValue } = require("../../../../graphql/services/contextHelper")
+
+module.exports = (request, response) => {
+  setContextValue(request, 'pageInfo', {
+    title: 'Create a new product',
+    description: 'Create a new product'
+  });
+}

package/src/modules/catalog/pages/admin/productNew/route

@@ -0,0 +1,2 @@
+GET
+/products/new

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

@@ -0,0 +1,269 @@
+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({
+  activeFilters, updateFilter, priceFilter
+}) {
+  const currency = get(context, 'currency', 'USD');
+  const language = get(context, 'language', 'en');
+
+  // Get the min price
+  const minPrice = priceFilter.options[0]
+
+  const firstRender = React.useRef(true);
+  const [from, setFrom] = React.useState(() => {
+    const index = activeFilters.findIndex((f) => f.key === 'price');
+    if (index === -1) { return minPrice; } else {
+      return activeFilters[index].value.split('-')[0] ? activeFilters[index].value.split('-')[0] : minPrice;
+    }
+  });
+
+  const [to, setTo] = React.useState(() => {
+    const index = activeFilters.findIndex((f) => f.key === 'price');
+    if (index === -1) { return maxPrice; } else {
+      return activeFilters[index].value.split('-')[1] ? activeFilters[index].value.split('-')[1] : maxPrice;
+    }
+  });
+
+  React.useLayoutEffect(() => {
+    const timeoutID = setTimeout(() => {
+      if (firstRender.current) {
+        firstRender.current = false;
+      } else {
+        let value = '';
+        if (from === minPrice) value = `-${to}`;
+        else if (to === maxPrice) value = `${from}-`;
+        else value = `${from}-${to}`;
+        const index = activeFilters.findIndex((f) => f.key === 'price');
+        if (index === -1) updateFilter(activeFilters.concat({ key: 'price', value }));
+        else {
+          updateFilter(activeFilters.map((f) => {
+            if (f.key !== 'price') return f;
+            else return { key: 'price', value };
+          }));
+        }
+      }
+    }, 1000);
+
+    return () => clearTimeout(timeoutID);
+  }, [from, to]);
+
+  const onChange = (e, direction) => {
+    e.persist();
+    const { value } = e.target;
+    if (direction === 'min') {
+      if (value > to - 5) { setFrom(to - 5); } else { setFrom(value); }
+    }
+
+    if (direction === 'max') {
+      if (value - 5 < from) { setTo(from + 5); } else { setTo(value); }
+    }
+  };
+
+  const f = new Intl.NumberFormat(language, { style: 'currency', currency }).format(minPrice);
+  const t = new Intl.NumberFormat(language, { style: 'currency', currency }).format(maxPrice);
+
+  return (
+    <div className="price-filter">
+      <div className="filter-item-title">Price</div>
+      <div className="rangeslider">
+        <input
+          className="min"
+          type="range"
+          min={minPrice}
+          max={maxPrice}
+          value={from}
+          onChange={(e) => onChange(e, 'min')}
+        />
+        <input
+          className="max"
+          type="range"
+          min={minPrice}
+          max={maxPrice}
+          value={to}
+          onChange={(e) => onChange(e, 'max')}
+        />
+        <span className="range_min light left">{f}</span>
+        <span className="range_max light right">{t}</span>
+      </div>
+    </div>
+  );
+}
+
+Price.propTypes = {
+  activeFilters: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    value: PropTypes.string
+  })).isRequired,
+  maxPrice: PropTypes.number.isRequired,
+  minPrice: PropTypes.number.isRequired,
+  updateFilter: PropTypes.func.isRequired
+};
+
+function Attributes({ currentFilters, attributes, updateFilter }) {
+  const onChange = (e, attributeCode, optionId, isChecked) => {
+    e.preventDefault();
+    if (isChecked === true) {
+      updateFilter(
+        currentFilters.filter(
+          (f) => f.key !== attributeCode
+            || (f.key === attributeCode && parseInt(f.value, 10) !== parseInt(optionId, 10))
+        )
+      );
+    } else {
+      updateFilter(currentFilters.concat({ key: attributeCode, value: optionId }));
+    }
+  };
+
+  return (
+    <>
+      {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">
+            {a.options.map((o) => {
+              const isChecked = currentFilters.find(
+                (f) => f.key === a.attributeCode
+                  && parseInt(f.value, 10) === parseInt(o.optionId, 10)
+              );
+              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>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      ))}
+    </>
+  );
+}
+
+Attributes.propTypes = {
+  currentFilters: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    value: PropTypes.string
+  })).isRequired,
+  attributes: PropTypes.arrayOf(PropTypes.shape({
+    attributeName: PropTypes.string,
+    attributeCode: PropTypes.string
+  })).isRequired,
+  updateFilter: PropTypes.func.isRequired
+};
+
+export default function Filter({ category: { availableFilters, products: { currentFilters } } }) {
+
+  const [filtering, setFiltering] = useState(false);
+
+  const updateFilter = (newFilters) => {
+    const currentUrl = window.location.href;
+    const url = new URL(currentUrl, window.location.origin);
+    for (let i = 0; i < currentFilters.length; i += 1) {
+      url.searchParams.delete(currentFilters[i].key);
+    }
+
+    for (let i = 0; i < newFilters.length; i += 1) {
+      url.searchParams.append(newFilters[i].key, newFilters[i].value);
+    }
+    window.location.href = url;
+  };
+
+  const cleanFilter = () => {
+    const currentUrl = window.location.href;
+    const url = new URL(currentUrl, window.location.origin);
+    for (let i = 0; i < currentFilters.length; i += 1) {
+      url.searchParams.delete(currentFilters[i].key);
+    }
+
+    window.location.href = url;
+  };
+
+  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">
+              <Area
+                id="productFilter"
+                updateFilter={updateFilter}
+                cleanFilter={cleanFilter}
+                currentFilters={currentFilters}
+                noOuter
+                coreComponents={[
+                  {
+                    component: { default: Attributes },
+                    props: { currentFilters, updateFilter, attributes: availableFilters },
+                    sortOrder: 20,
+                    id: 'filterAttributes'
+                  }
+                ]}
+              />
+            </div>
+          )}
+        </div>
+        {filtering === false && (
+          <div>
+            <Sorting currentFilters={currentFilters} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export const layout = {
+  areaId: "content",
+  sortOrder: 1
+}
+
+export const query = `
+query Query {
+  category (id: getContextValue('categoryId')) {
+    products (filters: getContextValue('filtersFromUrl')) {
+      currentFilters {
+        key
+        operation
+        value
+      }
+    }
+    availableFilters {
+      attributeCode
+      attributeName
+      options {
+        optionId
+        optionText
+      }
+    }
+  }
+}
+`

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

@@ -0,0 +1,99 @@
+.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;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid var(--divider);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+    .field-border {
+        border: none !important;
+    }
+}
+.filter-option {
+    border: 1px solid var(--divider);
+    display: block;
+    padding: 0.5rem 1.5rem;
+    border-radius: 2px;
+    &.checked {
+        border: 2px solid var(--text);
+    }
+}
+
+.filter-heading {
+    svg {
+        align-self: center;
+        width: 2rem;
+        height: 2rem;
+    }
+}
+.close-filter {
+    svg {
+        width: 2rem;
+        height: 2rem;
+    }
+}
+.product-sorting {
+    svg {
+        width: 2rem;
+        height: 2rem;
+    }
+}
+input[type="range"] {
+    width: 100%;
+    height: 30px;
+    overflow: hidden;
+    cursor: pointer;
+    outline: none;
+}
+input[type="range"],
+input[type="range"]::-webkit-slider-runnable-track,
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background: none;
+}
+input[type="range"]::-webkit-slider-runnable-track {
+    width: 200px;
+    height: 1px;
+    background: #003d7c;
+}
+input[type="range"]:nth-child(2)::-webkit-slider-runnable-track {
+    background: none;
+}
+input[type="range"]::-webkit-slider-thumb {
+    position: relative;
+    height: 15px;
+    width: 15px;
+    margin-top: -7px;
+    background: #fff;
+    border: 1px solid #003d7c;
+    border-radius: 25px;
+    z-index: 1;
+}
+input[type="range"]:nth-child(1)::-webkit-slider-thumb {
+    z-index: 2;
+}
+.rangeslider {
+    position: relative;
+    height: 60px;
+    width: 100%;
+    display: inline-block;
+}
+.rangeslider input {
+    position: absolute;
+}
+.rangeslider span {
+    position: absolute;
+    margin-top: 30px;
+    left: 0;
+}
+.rangeslider .right {
+    position: relative;
+    float: right;
+    margin-right: -5px;
+}

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Area from '../../../../../lib/components/Area';
+
+function Name({ name }) {
+  return <h1 className="category-name text-center mt-25 mb-15">{name}</h1>;
+}
+
+Name.propTypes = {
+  name: PropTypes.string
+};
+
+Name.defaultProps = {
+  name: ''
+};
+
+function Description({ description }) {
+  // eslint-disable-next-line react/no-danger
+  return <div className="category-description" dangerouslySetInnerHTML={{ __html: description }} />;
+}
+
+Description.defaultProps = {
+  description: ''
+};
+
+Description.propTypes = {
+  description: PropTypes.string
+};
+
+export default function CategoryInfo({ category: { name } }) {
+  return (
+    <div className="page-width">
+      <Area
+        id="category-general-info"
+        className="category-general-info"
+        coreComponents={[
+          {
+            component: { default: Name },
+            props: { name: name },
+            sortOrder: 10,
+            id: 'category-name'
+          }
+        ]}
+      />
+    </div>
+  );
+}
+
+export const layout = {
+  areaId: "content",
+  sortOrder: 15
+};
+
+export const query = `
+  query Query {
+    category(id: getContextValue('categoryId')) {
+      name
+      description
+    }
+}`

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

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Pagination } from '../../../components/product/list/Pagination';
+
+export default function PaginationWrapper({ products: { products: { total, currentFilters } } }) {
+  const page = currentFilters.find((filter) => filter.key === 'page');
+  console.log(page)
+  const limit = currentFilters.find((filter) => filter.key === 'limit');
+  return <Pagination total={total} limit={parseInt(limit.value)} currentPage={parseInt(page.value)} />;
+}
+
+export const layout = {
+  areaId: "content",
+  sortOrder: 20
+};
+
+export const query = `
+  query Query {
+    products: category(id: getContextValue('categoryId')) {
+      products(filters: getContextValue('filtersFromUrl')) {
+        total
+        currentFilters {
+          key
+          operation
+          value
+        }
+      }
+    }
+  }`;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import ProductList from '../../../components/product/list/List';
+
+export default function Products({ products: { products: { items } } }) {
+  return (
+    <div className="page-width">
+      <span className="product-count italic block mb-2">
+        {`${items.length} products`}
+      </span>
+      <ProductList products={items} countPerRow={3} />
+    </div>
+  );
+}
+
+export const layout = {
+  areaId: "content",
+  sortOrder: 15
+};
+
+export const query = `
+  query Query {
+    products: category(id: getContextValue('categoryId')) {
+      products(filters: getContextValue('filtersFromUrl')) {
+        items {
+          ...Product
+        }
+      }
+    }
+  }`;
+
+export const fragments = `
+  fragment Product on Product {
+    productId
+    name
+    sku
+    price {
+      regular {
+        value
+        text
+      }
+      special {
+        value
+        text
+      }
+    }
+    image {
+      alt
+      url: listing
+    }
+    url
+  }
+`;

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

@@ -0,0 +1,92 @@
+const { setContextValue, getContextValue } = require('../../../../graphql/services/contextHelper');
+const { getFilterableAttributes } = require('../../../services/getFilterableAttributes');
+const { getPriceRange } = require('../../../services/getPriceRange');
+
+module.exports = async (request, response, delegate, next) => {
+  const filterableAttributes = await getFilterableAttributes(getContextValue(request, 'categoryId'));
+
+  // Set the filterable attributes to the context so that we can use it in the graphql query
+  setContextValue(request, 'filterableAttributes', filterableAttributes);
+  setContextValue(request, 'priceRange', await getPriceRange(getContextValue(request, 'categoryId')));
+
+  const query = request.query;
+  if (!query) {
+    setContextValue(request, 'filtersFromUrl', []);
+    next();
+  } else {
+    const filtersFromUrl = [];
+
+    // Price filter 
+    // const priceFilter = query.price;
+    // if (priceFilter) {
+    //   const [min, max] = priceFilter.value.split('-').map((v) => parseFloat(v));
+    //   let currentPriceFilter;
+    //   if (isNaN(min) === false) {
+    //     currentPriceFilter = { key: 'price', value: `${min}` };
+    //   }
+
+    //   if (isNaN(max) === false) {
+    //     currentPriceFilter = { key: 'price', value: `${currentPriceFilter.value}-${max}` };
+    //   }
+    //   if (currentPriceFilter) {
+    //     filtersFromUrl.push(currentPriceFilter);
+    //   }
+    // }
+
+    // Attribute filters
+    Object.keys(query).forEach((key) => {
+      const filter = query[key];
+      const attribute = filterableAttributes.find((a) => a.attributeCode === key);
+      if (attribute) {
+        if (Array.isArray(filter)) {
+          const values = filter
+            .map((v) => parseInt(v))
+            .filter((v) => isNaN(v) === false);
+          if (values.length > 0) {
+            filtersFromUrl.push({
+              key: key,
+              operation: "=",
+              value: values.join(',')
+            });
+          }
+        } else {
+          filtersFromUrl.push({
+            key: key,
+            operation: "=",
+            value: filter
+          });
+        }
+      }
+    });
+
+    const sortBy = query.sortBy;
+    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 = isNaN(parseInt(query.page)) ? "1" : query.page.toString();
+    if (page !== "1") {
+      filtersFromUrl.push({ key: 'page', operation: '=', value: page });
+    }
+    const limit = isNaN(parseInt(query.limit)) ? "20" : query.limit.toString();// TODO: Get from config
+    if (limit !== "20") {
+      filtersFromUrl.push({ key: 'limit', operation: '=', value: limit });
+    }
+    console.log('filtersFromUrl', filtersFromUrl)
+    setContextValue(request, 'filtersFromUrl', filtersFromUrl);
+    next();
+  }
+};