@evershop/evershop 1.0.0-beta

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

@@ -0,0 +1,29 @@
+const { select } = require('@evershop/mysql-query-builder');
+const { pool } = require('../../../../../lib/mysql/connection');
+const { setContextValue } = require('../../../../graphql/services/contextHelper');
+
+module.exports = async (request, response, stack, next) => {
+  try {
+    const query = select();
+    query.from('category')
+      .leftJoin('category_description')
+      .on('category.`category_id`', '=', 'category_description.`category_description_category_id`');
+
+    query.where('category_description.`url_key`', '=', request.params.url_key);
+    const category = await query.load(pool);
+    if (category === null) {
+      response.status(404);
+      next();
+    } else {
+      setContextValue(request, 'categoryId', category.category_id);
+      setContextValue(request, 'pageInfo', {
+        title: category.meta_title || category.name,
+        description: category.meta_description || category.short_description,
+        url: request.url
+      });
+      next();
+    }
+  } catch (e) {
+    next(e);
+  }
+};

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

@@ -0,0 +1,2 @@
+GET
+/category/:url_key

package/src/modules/catalog/pages/frontStore/homepage/FeaturedCategories.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import Button from '../../../../cms/components/frontStore/Button';
+
+export default function FeaturedCategories() {
+  return (
+    <div className="mt-15">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-2 page-width">
+        <div>
+          <div className="text-center">
+            <img src="/assets/homepage/banner/men-shoes.jpeg" alt="" />
+          </div>
+          <h3 className="h6 mt-1 mb-1">Men shoes collection</h3>
+          <div className="mb-1">
+            <p>
+              Constructed from luxury nylons,
+              leathers, and custom hardware,
+              featuring sport details such as hidden breathing vents,
+              waterproof + antimicrobial linings, and more.
+            </p>
+          </div>
+          <Button url="/category/kids" title="Shop kids" variant="primary" />
+        </div>
+        <div>
+          <div>
+            <img src="/assets/homepage/banner/women-shoes.jpeg" alt="" />
+          </div>
+          <h3 className="h6 mt-1 mb-1">Women shoes collection</h3>
+          <div className="mb-1">
+            <p>
+              Constructed from luxury nylons,
+              leathers, and custom hardware,
+              featuring sport details such as hidden breathing vents,
+              waterproof + antimicrobial linings, and more.
+            </p>
+          </div>
+          <Button url="/category/women" title="Shop women" variant="primary" />
+        </div>
+        <div>
+          <div>
+            <img src="/assets/homepage/banner/kid-shoes.jpeg" alt="" />
+          </div>
+          <h3 className="h6 mt-1 mb-1">Men shoes collection</h3>
+          <div className="mb-1">
+            <p>
+              Constructed from luxury nylons,
+              leathers, and custom hardware,
+              featuring sport details such as hidden breathing vents,
+              waterproof + antimicrobial linings, and more.
+            </p>
+          </div>
+          <Button url="/category/men" title="Shop men" variant="primary" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 10
+}

package/src/modules/catalog/pages/frontStore/homepage/FeaturedProducts.js

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types'
+import React from 'react';
+import ProductList from '../../../components/product/list/List';
+
+export default function FeaturedProducts({ featuredProducts }) {
+  return (
+    <div className="pt-3">
+      <div className="page-width">
+        <h3 className="mt-3 mb-3 text-center uppercase h5 tracking-widest">Featured collection</h3>
+        <ProductList products={featuredProducts} />
+      </div>
+    </div>
+  );
+}
+
+FeaturedProducts.propTypes = {
+  featuredProducts: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    productId: PropTypes.number,
+    url: PropTypes.string,
+    price: PropTypes.shape({
+      regular: PropTypes.shape({
+        value: PropTypes.float,
+        text: PropTypes.string
+      }),
+      special: PropTypes.shape({
+        value: PropTypes.float,
+        text: PropTypes.string
+      })
+    }),
+    image: PropTypes.shape({
+      alt: PropTypes.string,
+      listing: PropTypes.string
+    })
+  }))
+}
+
+export const layout = {
+  areaId: "content",
+  sortOrder: 15
+}
+
+export const query = `
+  query query {
+    featuredProducts {
+      productId
+      name
+      price {
+        regular {
+          value
+          text
+        }
+        special {
+          value
+          text
+        }
+      }
+      image {
+        alt
+        url: listing
+      }
+      url
+    }
+  }
+`

package/src/modules/catalog/pages/frontStore/productView/Attributes.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+function Attributes({ attributes, areaProps }) {
+  React.useEffect(() => {
+    areaProps.registerTab({ name: 'Specification', id: 'specification' });
+  }, []);
+
+  return areaProps.currentTab === 'specification' ? (
+    <div className="specification">
+      <ul className="list-basic">
+        {attributes.map((attribute) => (
+          <li key={attribute.attribute_code}>
+            <strong>
+              {attribute.attribute_name}
+              {' '}
+              :
+              {' '}
+            </strong>
+            {' '}
+            <span>{attribute.option_text}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  ) : (null);
+}
+
+Attributes.propTypes = {
+  areaProps: PropTypes.shape({
+    currentTab: PropTypes.string,
+    registerTab: PropTypes.func
+  }).isRequired,
+  attributes: PropTypes.arrayOf(PropTypes.shape({
+    attribute_name: PropTypes.string,
+    attribute_code: PropTypes.string,
+    option_text: PropTypes.string
+  })).isRequired
+};
+export default Attributes;

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

@@ -0,0 +1,10 @@
+/* eslint-disable react/no-danger */
+import React from 'react';
+
+export default function Description({ description }) {
+  return (
+    <div className="mt-2 md:mt-3">
+      <div className="product-description" dangerouslySetInnerHTML={{ __html: description }} />
+    </div>
+  );
+}

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

@@ -0,0 +1,185 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { toast } from 'react-toastify';
+import produce from 'immer';
+import Area from '../../../../../lib/components/Area';
+import { Form } from '../../../../../lib/components/form/Form';
+import { Field } from '../../../../../lib/components/form/Field';
+import Button from '../../../../../lib/components/form/Button';
+import './Form.scss';
+import { useAppDispatch, useAppState } from '../../../../../lib/context/app';
+
+function ToastMessage({
+  thumbnail, name, qty, count, cartUrl, toastId
+}) {
+  return (
+    <div className="toast-mini-cart">
+      <div className="top-head grid grid-cols-2">
+        <div className="self-center">
+          JUST ADDED TO YOUR CART
+        </div>
+        <div className="self-center close flex justify-end">
+          <a href="#" onClick={(e) => { e.preventDefault(); toast.dismiss(toastId); }}>
+            <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="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </a>
+        </div>
+      </div>
+      <div className="item-line flex justify-between">
+        <div className="popup-thumbnail flex justify-center">
+          <img src={thumbnail} alt={name} />
+        </div>
+        <div className="item-info flex justify-between">
+          <div className="name">
+            <span className="font-bold">{name}</span>
+          </div>
+          <div>
+            Qty:
+            {qty}
+          </div>
+        </div>
+      </div>
+      <a className="add-cart-popup-button" href={cartUrl}>
+        VIEW CART (
+        {count}
+        )
+      </a>
+      <a className="add-cart-popup-continue text-center underline block" href="#" onClick={(e) => { e.preventDefault(); toast.dismiss(toastId); }}>Continue shopping</a>
+    </div>
+  );
+}
+
+ToastMessage.propTypes = {
+  cartUrl: PropTypes.string.isRequired,
+  count: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  qty: PropTypes.number.isRequired,
+  thumbnail: PropTypes.string.isRequired,
+  toastId: PropTypes.string.isRequired
+};
+
+function AddToCart({ stockAvaibility, loading = false, error }) {
+  return (
+    <div className="add-to-cart mt-2">
+      <div style={{ width: '8rem' }}>
+        <Field type="text" value="1" validationRules={['notEmpty']} className="qty" name="qty" placeholder="Qty" formId="productForm" />
+      </div>
+      {error && <div className="text-critical mt-1">{error}</div>}
+      <div className="mt-1">
+        {stockAvaibility === true && (
+          <Button
+            title="ADD TO CART"
+            outline
+            isLoading={loading}
+            onAction={
+              () => { document.getElementById('productForm').dispatchEvent(new Event('submit', { cancelable: true, bubbles: true })); }
+            }
+          />
+        )}
+        {stockAvaibility === false && <Button title="SOLD OUT" onAction={() => { }} />}
+      </div>
+    </div>
+  );
+}
+
+AddToCart.propTypes = {
+  error: PropTypes.string,
+  loading: PropTypes.bool.isRequired,
+  stockAvaibility: PropTypes.bool.isRequired
+};
+
+AddToCart.defaultProps = {
+  error: undefined
+};
+
+export default function ProductForm({ product, action, cart }) {
+  const [loading, setLoading] = useState(false);
+  const [toastId, setToastId] = useState();
+  const [error, setError] = useState();
+  const appContext = useAppState();
+  const dispatch = useAppDispatch();
+
+  const onSuccess = (response) => {
+    if (response.success === true) {
+      dispatch(produce(appContext, (draff) => {
+        // eslint-disable-next-line no-param-reassign
+        draff.cart = appContext.cart || {};
+        draff.cart.totalQty = response.data.count;
+        draff.cart.uuid = response.data.cartId;
+      }));
+      setToastId(toast(<ToastMessage
+        thumbnail={response.data.item.thumbnail}
+        name={product.name}
+        qty={1}
+        count={response.data.count}
+        cartUrl="/cart"
+        toastId={toastId}
+      />, { closeButton: false }));
+    } else {
+      setError(response.message);
+    }
+  };
+
+  return (
+    <Form
+      id="productForm"
+      action={action}
+      method="POST"
+      submitBtn={false}
+      onSuccess={onSuccess}
+      onStart={() => setLoading(true)}
+      onComplete={() => setLoading(false)}
+      onError={(e) => setError(e.message)}
+      isJSON={true}
+    >
+      <input type="hidden" name="productId" value={product.productId} />
+      {(appContext.cart?.uuid || cart?.uuid) && <input type="hidden" name="cartId" value={appContext.cart?.uuid || cart?.uuid} />}
+
+      <Area
+        id="productSinglePageForm"
+        coreComponents={[
+          {
+            component: { default: AddToCart },
+            props: {
+              stockAvaibility: product.inventory.isInStock,
+              loading,
+              error
+            },
+            sortOrder: 50,
+            id: 'productSingleBuyButton'
+          }
+        ]}
+      />
+    </Form>
+  );
+}
+
+ProductForm.propTypes = {
+  action: PropTypes.string.isRequired
+};
+
+export const layout = {
+  areaId: "productPageMiddleRight",
+  sortOrder: 20
+}
+
+export const query = `
+  query Query {
+    product(id: getContextValue('productId')) {
+      productId
+      name
+      gallery {
+        thumb
+      }
+      inventory {
+        isInStock
+      }
+    }
+    cart(id: getContextValue('cartId', null)) {
+      uuid
+    }
+    action:url (routeId: "addToCart")
+  }
+`

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

@@ -0,0 +1,70 @@
+#productForm {
+    .add-to-cart {
+        .button {
+            display: block;
+            background-color: #fff;
+            color: #3a3a3a;
+            border: 1px solid #3a3a3a;
+            border-radius: 2px;
+            padding: 10px 18px;
+            font-size: 13px;
+            width: 100%;
+            background-color: #fff;
+            box-shadow: none;
+        }
+        .field-error {
+            display: none;
+        }
+    }
+}
+.toast-mini-cart {
+    padding: 2rem;
+    border: 1px solid var(--divider);
+    box-shadow: 1px 1px 10px 2px #ebebeb80;
+    .top-head {
+        grid-template-columns: 4fr 1fr;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid var(--divider);
+        margin-bottom: 1rem;
+    }
+    .close {
+        color: var(--textSubdued);
+        svg {
+            width: 3rem;
+            height: 3rem;
+        }
+    }
+    .popup-thumbnail {
+        width: 6rem;
+        height: 6rem;
+        text-align: center;
+        display: flex;
+        background-color: #fafafa;
+        margin-right: 1.5rem;
+        img {
+            align-self: center;
+            display: block;
+        }
+    }
+    .item-info {
+        flex-basis: 100%;
+        .name {
+            font-size: 1.6rem;
+        }
+    }
+    .add-cart-popup-button {
+        display: block;
+        background-color: #fff;
+        color: #3a3a3a;
+        border: 1px solid #3a3a3a;
+        border-radius: 2px;
+        padding: 12px 18px;
+        font-size: 13px;
+        width: 100%;
+        background-color: #fff;
+        box-shadow: none;
+        text-align: center;
+        margin-bottom: 1rem;
+        margin-top: 1rem;
+    }
+}

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

@@ -0,0 +1,115 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+import './GeneralInfo.scss';
+
+function Name({ name }) {
+  return <h1 className="product-single-name">{name}</h1>;
+}
+
+Name.propTypes = {
+  name: PropTypes.string.isRequired
+};
+
+function Price({ regular, special }) {
+
+  return (
+    <h4 className="product-single-price">
+      {special.value === regular.value && (
+        <div>
+          <span className="sale-price">{regular.text}</span>
+        </div>
+      )}
+      {special.value < regular.value && (
+        <div>
+          <span className="sale-price">{special.text}</span>
+          {' '}
+          <span className="regular-price">{regular.text}</span>
+        </div>
+      )}
+    </h4>
+  );
+}
+
+Price.propTypes = {
+  regular: PropTypes.shape({
+    value: PropTypes.number.isRequired,
+    text: PropTypes.string.isRequired
+  }),
+  special: PropTypes.shape({
+    value: PropTypes.number.isRequired,
+    text: PropTypes.string.isRequired
+  })
+};
+
+function Sku({ sku }) {
+  return (
+    <div className="product-single-sku text-textSubdued">
+      <span>Sku</span>
+      <span>: </span>
+      {sku}
+    </div>
+  );
+}
+
+Sku.propTypes = {
+  sku: PropTypes.string.isRequired
+};
+
+export default function GeneralInfo({ product }) {
+  return (
+    <Area
+      id="productViewGeneralInfo"
+      coreComponents={[
+        {
+          component: { default: Name },
+          props: {
+            name: product.name
+          },
+          sortOrder: 10,
+          id: 'productSingleName'
+        },
+        {
+          component: { default: Price },
+          props: {
+            regular: product.price.regular,
+            special: product.price.special
+          },
+          sortOrder: 10,
+          id: 'productSinglePrice'
+        },
+        {
+          component: { default: Sku },
+          props: {
+            sku: product.sku
+          },
+          sortOrder: 20,
+          id: 'productSingleSku'
+        }
+      ]}
+    />
+  );
+}
+
+export const layout = {
+  areaId: "productPageMiddleRight",
+  sortOrder: 10
+};
+
+export const query = `
+  query Query {
+    product (id: getContextValue('productId')) {
+      name
+      sku
+      price {
+        regular {
+          value
+          text
+        }
+        special {
+          value
+          text
+        }
+      }
+    }
+  }`;

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

@@ -0,0 +1,3 @@
+.product-single-name {
+    text-transform: capitalize;
+}

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

@@ -0,0 +1,73 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable react/no-array-index-key */
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+
+function Current({ image }) {
+  const [height, setHeight] = useState();
+
+  useEffect(() => {
+    setHeight(document.getElementById('product-current-image').offsetWidth);
+  }, []);
+
+  return (
+    <div id="product-current-image" style={{ minHeight: height, background: '#f6f6f6' }} className="product-image product-single-page-image flex justify-center items-center">
+      {image && <img src={image.single} alt={image.alt} className="self-center" />}
+      {!image && <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="#111" width={100} height={100}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+      </svg>}
+    </div>
+  );
+}
+
+Current.propTypes = {
+  image: PropTypes.shape({
+    alt: PropTypes.string,
+    single: PropTypes.string.isRequired
+  }).isRequired
+};
+
+export default function Images({ product: { image, gallery = [] } }) {
+  const [current, setCurrent] = React.useState(image);
+  const [thumbs, setThumbs] = React.useState(() => {
+    if (image) {
+      // Add image to beginning of gallery
+      gallery.unshift(image);
+    }
+    return 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">
+        {thumbs.map((i, j) => <li key={j} className='flex justify-center items-center'>
+          <a href="#" onClick={(e) => { e.preventDefault(); setCurrent({ ...i }); }} className="">
+            <img className="self-center" src={i.thumb} alt={i.alt} />
+          </a>
+        </li>)}
+      </ul>
+    </div>
+  );
+}
+
+export const layout = {
+  areaId: "productPageMiddleLeft",
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    product (id: getContextValue('productId')) {
+      image {
+        alt
+        thumb
+        single
+      }
+      gallery {
+        alt
+        thumb
+        single
+      }
+  }
+}`

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+
+export default function ProductPageLayout() {
+  return (
+    <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">
+          <Area
+            id="productPageMiddleLeft"
+          />
+          <Area
+            id="productPageMiddleRight"
+          />
+        </div>
+      </div>
+      <Area
+        id="productPageBottom"
+        className="product-page-top"
+      />
+    </div>
+  );
+}
+
+export const layout = {
+  areaId: "content",
+  sortOrder: 10
+}