@evershop/evershop 1.0.0-beta

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

@@ -0,0 +1,153 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import axios from 'axios';
+import React from 'react';
+import PropTypes from 'prop-types';
+import ProductMediaManager from '../Media';
+import { VariantType } from './VariantType';
+import { Field } from '../../../../../../lib/components/form/Field';
+import { get } from '../../../../../../lib/util/get';
+
+export function Variant({
+  attributes, variant, removeVariant, updateVariant, unlinkApi, productImageUploadUrl
+}) {
+  const onUnlink = (e) => {
+    e.preventDefault();
+    const formData = new FormData();
+    formData.append('id', variant.product.productId);
+    axios.post(unlinkApi, formData).then((response) => {
+      if (response.data.success === true) {
+        removeVariant(variant);
+      } else {
+        // TODO: Toast an error message
+      }
+    });
+  };
+
+  return (
+    <div className="variant-item pb-15 border-b border-solid border-divider mb-15 last:border-b-0 last:pb-0">
+      <input type="hidden" value={variant.product.productId} name={`variant_group[variants][${variant.id}][productId]`} />
+      <div className="grid grid-cols-2 gap-x-1">
+        <div className="col-span-1">
+          <ProductMediaManager
+            id={variant.id}
+            product={variant?.product || {}}
+            productImageUploadUrl={productImageUploadUrl}
+          />
+        </div>
+        <div className="col-span-1">
+          <div className="grid grid-cols-2 gap-x-1 border-b border-divider pb-15 mb-15">
+            {attributes.map((a, i) => (
+              <div key={a.attributeId} className="mt-1 col">
+                <div><label>{a.attributeName}</label></div>
+                <input type="hidden" value={a.attributeId} name={`variant_group[variants][${variant.id}][attributes][${i}][attribute]`} />
+                <Field
+                  name={`variant_group[variants][${variant.id}][attributes][${i}][value]`}
+                  validationRules={['notEmpty']}
+                  value={get(get(variant, 'attributes', []).find((e) => e.attributeCode === a.attributeCode), 'optionId', '')}
+                  options={a.options}
+                  onChange={(e) => {
+                    updateVariant(
+                      variant.id,
+                      {
+                        ...variant,
+                        attributes: attributes.map((at) => {
+                          const attr = variant.attributes.find(
+                            (ax) => ax.attributeCode === at.attributeCode
+                          )
+                            ? variant.attributes.find(
+                              (ax) => ax.attributeCode === at.attributeCode
+                            )
+                            : { attributeCode: at.attributeCode, attributeId: at.attributeId };
+                          if (at.attributeCode === a.attributeCode) {
+                            attr.optionId = e.target.value;
+                            // eslint-disable-next-line max-len
+                            attr.optionText = e.nativeEvent.target[e.nativeEvent.target.selectedIndex].text;
+                          }
+                          return attr;
+                        })
+                      }
+                    );
+                  }}
+                  type="select"
+                />
+              </div>
+            ))}
+          </div>
+          <div className="grid grid-cols-3 gap-x-1 border-b border-divider pb-15 mb-15">
+            <div>
+              <div>SKU</div>
+              <Field
+                name={`variant_group[variants][${variant.id}][sku]`}
+                formId="product-edit-form"
+                validationRules={['notEmpty']}
+                value={variant.product?.sku}
+                type="text"
+              />
+            </div>
+            <div>
+              <div>Price</div>
+              <Field
+                name={`variant_group[variants][${variant.id}][price]`}
+                formId="product-edit-form"
+                validationRules={['notEmpty']}
+                value={variant.product?.price?.regular?.value}
+                type="text"
+              />
+            </div>
+            <div>
+              <div>Qty</div>
+              <Field
+                name={`variant_group[variants][${variant.id}][qty]`}
+                formId="product-edit-form"
+                validationRules={['notEmpty']}
+                value={variant.product?.inventory?.qty}
+                type="text"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-3 gap-x-1">
+            <div>
+              <div>Status</div>
+              <Field
+                name={`variant_group[variants][${variant.id}][status]`}
+                formId="product-edit-form"
+                value={variant.product?.status}
+                type="toggle"
+              />
+            </div>
+            <div>
+              <div>Visibility</div>
+              <Field
+                name={`variant_group[variants][${variant.id}][visibility]`}
+                formId="product-edit-form"
+                value={variant.visibility}
+                type="toggle"
+              />
+            </div>
+
+            <div>
+              <div>Actions</div>
+              <div>{variant.editUrl && <a href={variant.editUrl} target="_blank" rel="noreferrer">Edit</a>}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Variant.propTypes = {
+  attributes: PropTypes.arrayOf(PropTypes.shape({
+    attributeName: PropTypes.string,
+    attributeId: PropTypes.string.isRequired,
+    options: PropTypes.arrayOf(PropTypes.shape({
+      optionId: PropTypes.number,
+      optionText: PropTypes.string
+    }))
+  })).isRequired,
+  removeVariant: PropTypes.func.isRequired,
+  updateVariant: PropTypes.func.isRequired,
+  variant: VariantType.isRequired
+};

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

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+
+export const VariantType = PropTypes.shape({
+  attributes: PropTypes.arrayOf(PropTypes.shape({
+    attributeCode: PropTypes.string.isRequired,
+    attributeId: PropTypes.string.isRequired,
+    optionId: PropTypes.number.isRequired,
+  })),
+  editUrl: PropTypes.string,
+  id: PropTypes.string,
+  images: PropTypes.arrayOf(PropTypes.shape({
+
+  })),
+  price: PropTypes.number,
+  qty: PropTypes.string,
+  sku: PropTypes.string,
+  status: PropTypes.number,
+  variantProductId: PropTypes.number,
+  visibility: PropTypes.number
+});

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

@@ -0,0 +1,155 @@
+import uniqid from 'uniqid';
+import React from 'react';
+import PropTypes from 'prop-types';
+import PubSub from 'pubsub-js';
+import { Variant } from './Variant';
+import { Search } from './Search';
+import { VariantType } from './VariantType';
+import { Card } from '../../../../../cms/components/admin/Card';
+import { FORM_VALIDATED } from '../../../../../../lib/util/events';
+import { useQuery } from 'urql';
+
+const AttributesQuery = `
+  query Query($filters: [FilterInput]) {
+    attributes(filters: $filters) {
+      items {
+        attributeId
+        attributeCode
+        options {
+          value: attributeOptionId
+          text: optionText
+        }
+      }
+    }
+    productImageUploadUrl: url(routeId: "imageUpload", params: [{key: "0", value: ""}])
+  }
+`;
+
+function variantReducer(variants, action) {
+  switch (action.type) {
+    case 'add':
+      if (action.payload.variant) { return variants.concat(action.payload.variant); } else {
+        return variants.concat({
+          id: uniqid(),
+          attributes: [],
+          product: {}
+        });
+      }
+    case 'remove':
+      return variants.filter((v) => v.id !== action.payload.id);
+    case 'update':
+      return variants.map((v) => {
+        if (v.id === action.payload.id) {
+          return action.payload.variant;
+        } else {
+          return v;
+        }
+      });
+    default:
+      throw new Error();
+  }
+}
+
+export function Variants({ variantAttributes, variantProducts }) {
+  const [variants, dispatch] = React.useReducer(variantReducer, variantProducts);
+
+  const [result, reexecuteQuery] = useQuery({
+    query: AttributesQuery,
+    variables: {
+      filters: [
+        { key: 'code', operation: 'in', value: variantAttributes.map((a) => a.attributeCode).join(',') }
+      ]
+    },
+  });
+
+  // eslint-disable-next-line no-unused-vars
+  const validate = (formId, errors) => { // TODO: Fix validation variants when editing product
+    // setVariants(variants.map((v) => {
+    //   v.duplicate = false;
+    //   variants.forEach((variant) => {
+    //     if (v.id !== variant.id && isDuplicated(v.attributes, variant.attributes)) {
+    //       v.duplicate = true;
+    //       errors['variants'] = "Duplicated variant";
+    //     }
+    //   });
+
+    //   return v;
+    // }))
+  };
+
+  React.useEffect(() => {
+    const token = PubSub.subscribe(FORM_VALIDATED, (message, data) => {
+      validate(data.formId, data.errors);
+    });
+
+    return function cleanup() {
+      PubSub.unsubscribe(token);
+    };
+  }, [variants]);
+
+  const addVariant = (e, variant = null) => {
+    e.preventDefault();
+    dispatch({
+      type: 'add',
+      payload: {
+        variant
+      }
+    });
+  };
+
+  const removeVariant = (variant) => {
+    dispatch({
+      type: 'remove',
+      payload: {
+        id: variant.id
+      }
+    });
+  };
+
+  const updateVariant = (id, value) => {
+    dispatch({
+      type: 'update',
+      payload: {
+        id,
+        variant: value
+      }
+    });
+  };
+
+  const { data, fetching, error } = result;
+
+  if (fetching) return <p>Loading...</p>;
+  if (error) return <p>Oh no... {error.message}</p>;
+
+  return (
+    <div>
+      {variantAttributes.map((a) => <input key={a.attributeId} type="hidden" value={a.attributeId} name="variant_group[variant_group_attributes][]" />)}
+      <Card.Session>
+        <div className="variant-list">
+          {variants.map((v) => (
+            <Variant
+              key={v.id}
+              variant={v}
+              attributes={data?.attributes?.items || []}
+              removeVariant={removeVariant}
+              updateVariant={updateVariant}
+              productImageUploadUrl={data?.productImageUploadUrl}
+            />
+          ))}
+        </div>
+      </Card.Session>
+    </div>
+  );
+}
+
+Variants.propTypes = {
+  variantAttributes: PropTypes.arrayOf(PropTypes.shape({
+    attributeName: PropTypes.string,
+    attributeId: PropTypes.string.isRequired,
+    options: PropTypes.arrayOf(PropTypes.shape({
+      optionId: PropTypes.number,
+      optionText: PropTypes.string
+    }))
+  })).isRequired,
+  variantProducts: PropTypes.arrayOf(VariantType).isRequired
+};

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

@@ -0,0 +1,293 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import axios from 'axios';
+import Area from '../../../../../lib/components/Area';
+import Pagination from '../../../../../lib/components/grid/Pagination';
+import { Checkbox } from '../../../../../lib/components/form/fields/Checkbox';
+import { useAlertContext } from '../../../../../lib/components/modal/Alert';
+import formData from '../../../../../lib/util/formData';
+import ProductNameRow from './rows/ProductName';
+import StatusRow from '../../../../../lib/components/grid/rows/StatusRow';
+import ProductPriceRow from './rows/PriceRow';
+import BasicRow from '../../../../../lib/components/grid/rows/BasicRow';
+import ThumbnailRow from './rows/ThumbnailRow';
+import BasicColumnHeader from '../../../../../lib/components/grid/headers/Basic';
+import FromToColumnHeader from '../../../../../lib/components/grid/headers/FromTo';
+import DropdownColumnHeader from '../../../../../lib/components/grid/headers/Dropdown';
+import { Card } from '../../../../cms/components/admin/Card';
+import DummyColumnHeader from '../../../../../lib/components/grid/headers/Dummy';
+import QtyRow from './rows/QtyRow';
+
+function Actions({ selectedIds = [], disableProductUrl, enableProductsUrl, deleteProductsUrl }) {
+  const { openAlert, closeAlert, dispatchAlert } = useAlertContext();
+  const [isLoading, setIsLoading] = useState(false);
+  const actions = [
+    {
+      name: 'Disable',
+      onAction: () => {
+        openAlert({
+          heading: `Disable ${selectedIds.length} products`,
+          content: 'Are you sure?',
+          primaryAction: {
+            title: 'Cancel',
+            onAction: closeAlert,
+            variant: 'primary'
+          },
+          secondaryAction: {
+            title: 'Disable',
+            onAction: async () => {
+              setIsLoading(true);
+              dispatchAlert({ type: 'update', payload: { secondaryAction: { isLoading: true } } });
+              const response = await axios.post(disableProductUrl, formData().append('ids', selectedIds).build());
+              // setIsLoading(false);
+              if (response.data.success === true) {
+                location.reload();
+                // TODO: Should display a message and delay for 1 - 2 second
+              }
+            },
+            variant: 'critical',
+            isLoading: false
+          }
+        });
+      }
+    },
+    {
+      name: 'Enable',
+      onAction: () => {
+        openAlert({
+          heading: `Enable ${selectedIds.length} products`,
+          content: 'Are you sure?',
+          primaryAction: {
+            title: 'Cancel',
+            onAction: closeAlert,
+            variant: 'primary'
+          },
+          secondaryAction: {
+            title: 'Enable',
+            onAction: async () => {
+              setIsLoading(true);
+              dispatchAlert({ type: 'update', payload: { secondaryAction: { isLoading: true } } });
+              const response = await axios.post(enableProductsUrl, formData().append('ids', selectedIds).build());
+              // setIsLoading(false);
+              if (response.data.success === true) {
+                location.reload();
+                // TODO: Should display a message and delay for 1 - 2 second
+              }
+            },
+            variant: 'critical',
+            isLoading: false
+          }
+        });
+      }
+    },
+    {
+      name: 'Delete',
+      onAction: () => {
+        openAlert({
+          heading: `Delete ${selectedIds.length} products`,
+          content: <div>Can&apos;t be undone</div>,
+          primaryAction: {
+            title: 'Cancel',
+            onAction: closeAlert,
+            variant: 'primary'
+          },
+          secondaryAction: {
+            title: 'Delete',
+            onAction: async () => {
+              setIsLoading(true);
+              dispatchAlert({ type: 'update', payload: { secondaryAction: { isLoading: true } } });
+              const response = await axios.post(deleteProductsUrl, formData().append('ids', selectedIds).build());
+              // setIsLoading(false);
+              if (response.data.success === true) {
+                location.reload();
+                // TODO: Should display a message and delay for 1 - 2 second
+              }
+            },
+            variant: 'critical',
+            isLoading
+          }
+        });
+      }
+    }
+  ];
+
+  return (
+    <tr>
+      {selectedIds.length === 0 && (null)}
+      {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">
+              {selectedIds.length}
+              {' '}
+              selected
+            </a>
+            {actions.map((action) => <a href="#" onClick={(e) => { e.preventDefault(); action.onAction(); }} className="font-semibold pt-075 pb-075 pl-15 pr-15 block border-l border-divider self-center"><span>{action.name}</span></a>)}
+          </div>
+        </td>
+      )}
+    </tr>
+  );
+}
+
+Actions.propTypes = {
+  selectedIds: PropTypes.arrayOf(PropTypes.number).isRequired
+};
+
+export default function ProductGrid({ products: { items: products, total, currentFilters = [] }, disableProductUrl, enableProductsUrl, deleteProductsUrl }) {
+  const page = currentFilters.find((filter) => filter.key === 'page') ? currentFilters.find((filter) => filter.key === 'page')['value'] : 1;
+  const limit = currentFilters.find((filter) => filter.key === 'limit') ? currentFilters.find((filter) => filter.key === 'limit')['value'] : 20;
+  const [selectedRows, setSelectedRows] = useState([]);
+
+  return (
+    <Card>
+      <table className="listing sticky">
+        <thead>
+          <tr>
+            <th className="align-bottom">
+              <Checkbox onChange={(e) => {
+                if (e.target.checked) setSelectedRows(products.map((p) => p.productId));
+                else setSelectedRows([]);
+              }}
+              />
+            </th>
+            <Area
+              id="productGridHeader"
+              noOuter
+              coreComponents={
+                [
+                  {
+                    component: { default: () => <DummyColumnHeader /> },
+                    sortOrder: 5
+                  },
+                  {
+                    component: { default: () => <BasicColumnHeader title="Product Name" id='name' currentFilters={currentFilters} /> },
+                    sortOrder: 10
+                  },
+                  {
+                    component: { default: () => <FromToColumnHeader id='price' title='Price' currentFilters={currentFilters} /> },
+                    sortOrder: 15
+                  },
+                  {
+                    component: { default: () => <BasicColumnHeader title="SKU" id='sku' currentFilters={currentFilters} /> },
+                    sortOrder: 20
+                  },
+                  {
+                    component: { default: () => <BasicColumnHeader title="Qty" id='qty' currentFilters={currentFilters} /> },
+                    sortOrder: 25
+                  },
+                  {
+                    component: { default: () => <DropdownColumnHeader id='status' title='Status' currentFilters={currentFilters} options={[{ value: 1, text: 'Enabled' }, { value: 0, text: 'Disabled' }]} /> },
+                    sortOrder: 30
+                  }
+                ]
+              }
+            />
+          </tr>
+        </thead>
+        <tbody>
+          <Actions
+            ids={products.map(() => products.productId)}
+            selectedIds={selectedRows}
+            setSelectedRows={setSelectedRows}
+            disableProductUrl={disableProductUrl}
+            enableProductsUrl={enableProductsUrl}
+            deleteProductsUrl={deleteProductsUrl}
+          />
+          {products.map((p) => (
+            <tr key={p.productId}>
+              <td>
+                <Checkbox
+                  isChecked={selectedRows.includes(p.productId)}
+                  onChange={(e) => {
+                    if (e.target.checked) {
+                      setSelectedRows(selectedRows.concat([p.productId]));
+                    } else {
+                      setSelectedRows(selectedRows.filter((row) => row !== p.productId));
+                    }
+                  }}
+                />
+              </td>
+              <Area
+                id="productGridRow"
+                row={p}
+                noOuter
+                selectedRows={selectedRows}
+                setSelectedRows={setSelectedRows}
+                coreComponents={[
+                  {
+                    component: { default: () => <ThumbnailRow src={p.image?.thumb} name={p.name} /> },
+                    sortOrder: 5
+                  },
+                  {
+                    component: { default: ({ areaProps }) => <ProductNameRow id='name' name={p.name} url={p.editUrl} /> },
+                    sortOrder: 10
+                  },
+                  {
+                    component: { default: ({ areaProps }) => <ProductPriceRow areaProps={areaProps} /> },
+                    sortOrder: 15
+                  },
+                  {
+                    component: { default: ({ areaProps }) => <BasicRow id='sku' areaProps={areaProps} /> },
+                    sortOrder: 20
+                  },
+                  {
+                    component: { default: () => <QtyRow qty={p.inventory?.qty} /> },
+                    sortOrder: 25
+                  },
+                  {
+                    component: { default: ({ areaProps }) => <StatusRow id='status' areaProps={areaProps} /> },
+                    sortOrder: 30
+                  }
+                ]}
+              />
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {products.length === 0
+        && <div className="flex w-full justify-center">There is no product to display</div>}
+      <Pagination total={total} limit={limit} page={page} />
+    </Card>
+  );
+}
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 20
+}
+
+export const query = `
+  query Query {
+    products (filters: getContextValue("filtersFromUrl")) {
+      items {
+        productId
+        name
+        image {
+          thumb
+        }
+        sku
+        status
+        inventory {
+          qty
+        }
+        price {
+          regular {
+            value
+            text
+          }
+        }
+        editUrl
+      }
+      total
+      currentFilters {
+        key
+        operation
+        value
+      }
+    }
+    disableProductUrl: url(routeId: "productBulkDisable")
+    enableProductsUrl: url(routeId: "productBulkEnable")
+    deleteProductsUrl: url(routeId: "productBulkDelete")
+  }
+`;

package/src/modules/catalog/pages/admin/productGrid/Heading.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import PageHeading from '../../../../cms/components/admin/PageHeading';
+
+export default function Heading() {
+  return <PageHeading backUrl={null} heading="Products" />
+}
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 10
+}

package/src/modules/catalog/pages/admin/productGrid/NewProductButton.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Button from '../../../../../lib/components/form/Button';
+import PageHeading from '../../../../cms/components/admin/PageHeading';
+
+export default function NewProductButton({ newProductUrl }) {
+  return <Button url={newProductUrl} title="New Product" />
+}
+
+export const layout = {
+  areaId: 'pageHeadingRight',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    newProductUrl: url(routeId: "productNew")
+  }
+`

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

@@ -0,0 +1,11 @@
+const { buildFilterFromUrl } = require("../../../../../lib/util/buildFilterFromUrl");
+const { setContextValue } = require("../../../../graphql/services/contextHelper")
+
+module.exports = (request, response) => {
+  setContextValue(request, 'pageInfo', {
+    title: 'Products',
+    description: 'Products'
+  });
+  const query = request.query;
+  setContextValue(request, 'filtersFromUrl', buildFilterFromUrl(query));
+}

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

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

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

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function ProductPriceRow({ areaProps: { row } }) {
+  return (
+    <td>
+      <div>
+        <span>{row.price.regular.text}</span>
+      </div>
+    </td>
+  );
+}
+
+ProductPriceRow.propTypes = {
+  areaProps: PropTypes.shape({
+    row: PropTypes.shape({
+      price: PropTypes.shape({
+        text: PropTypes.string,
+      })
+    })
+  }).isRequired
+};