@evershop/evershop 1.0.0-beta

package/src/modules/catalog/pages/admin/productEdit+productNew/media/ProductMediaManager.js

@@ -0,0 +1,190 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable no-undef */
+import PropTypes from 'prop-types';
+import React from 'react';
+import uniqid from 'uniqid';
+import { toast } from 'react-toastify';
+import { get } from '../../../../../../lib/util/get';
+import './ProductMediaManager.scss';
+
+function Upload({ addImage, productImageUploadUrl }) {
+  const onChange = (e) => {
+    e.persist();
+    const formData = new FormData();
+    for (let i = 0; i < e.target.files.length; i += 1) {
+      formData.append('images', e.target.files[i]);
+    }
+    const targetPath = `catalog/${Math.floor(Math.random() * (9999 - 1000)) + 1000}/${Math.floor(Math.random() * (9999 - 1000)) + 1000}`;
+    formData.append('targetPath', targetPath);
+    fetch(
+      productImageUploadUrl + targetPath,
+      {
+        method: 'POST',
+        body: formData,
+        headers: {
+          'X-Requested-With': 'XMLHttpRequest'
+        }
+      }
+    ).then((response) => {
+      if (!response.headers.get('content-type') || !response.headers.get('content-type').includes('application/json')) { throw new TypeError('Something wrong. Please try again'); }
+
+      return response.json();
+    })
+      .then((response) => {
+        if (get(response, 'success') === true) {
+          addImage(get(response, 'data.files', []).map((i) => ({
+            id: uniqid(),
+            url: i.url,
+            path: i.path
+          })));
+        } else {
+          toast.error(get(response, 'message', 'Failed!'));
+        }
+      })
+      .catch(
+        (error) => {
+          toast.error(error.message);
+        }
+      )
+      .finally(() => {
+        e.target.value = null;
+      });
+  };
+
+  const id = uniqid();
+  return (
+    <div className="uploader grid-item">
+      <div className="uploader-icon">
+        <label htmlFor={id}>
+          <svg style={{ width: '30px', height: '30px' }} xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path fillRule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
+          </svg>
+        </label>
+      </div>
+      <div className="invisible">
+        <input id={id} type="file" multiple onChange={onChange} />
+      </div>
+    </div>
+  );
+}
+
+Upload.propTypes = {
+  addImage: PropTypes.func.isRequired
+};
+
+function Image({ image, removeImage }) {
+  return (
+    <div className="image grid-item" id={image.id}>
+      <div className="img"><img src={image.url} alt="" /></div>
+      <span className="remove cursor-pointer text-critical fill-current" onClick={() => removeImage(image.id)}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-trash-2">
+          <polyline points="3 6 5 6 21 6" />
+          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+          <line x1="10" y1="11" x2="10" y2="17" />
+          <line x1="14" y1="11" x2="14" y2="17" />
+        </svg>
+      </span>
+    </div>
+  );
+}
+
+Image.propTypes = {
+  image: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  }).isRequired,
+  removeImage: PropTypes.func.isRequired
+};
+
+function Images({
+  id, images, addImage, removeImage, productImageUploadUrl
+}) {
+  return (
+    <div id={id} className="image-list">
+      {images.map((image) => <Image key={image.id} removeImage={removeImage} image={image} />)}
+      <Upload addImage={addImage} productImageUploadUrl={productImageUploadUrl} />
+    </div>
+  );
+}
+
+Images.propTypes = {
+  addImage: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  images: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string
+  })).isRequired,
+  removeImage: PropTypes.func.isRequired,
+  productImageUploadUrl: PropTypes.string.isRequired
+};
+
+async function loadSwappable() {
+  const { Swappable } = await import('@shopify/draggable');
+  return Swappable;
+}
+
+export default function ProductMediaManager({ productImages = [], id, productImageUploadUrl }) {
+  const [images, setImages] = React.useState(productImages);
+  const [draggable, setDragable] = React.useState(null);
+
+  React.useEffect(() => {
+    async function initSwappable() {
+      if (draggable) { draggable.destroy(); }
+
+      const Swappable = await loadSwappable();
+      // eslint-disable-next-line new-cap
+      const swappable = new Swappable(document.querySelectorAll(`div#${id}`), {
+        draggable: 'div.image',
+        handle: 'div.image img'
+      });
+      let source = null;
+      let destination = null;
+      swappable.on('swappable:swapped', (event) => {
+        source = event.data.dragEvent.data.source.id;
+        destination = event.data.dragEvent.data.over.id;
+      });
+
+      swappable.on('swappable:stop', () => {
+        if (!source || !destination) { return; }
+        setImages((originImages) => {
+          const newImages = Array.from(originImages);
+          const sr = originImages.find((image) => image.id === source);
+          newImages[originImages.findIndex(
+            (image) => image.id === source
+          )] = originImages.find((image) => image.id === destination);
+          newImages[originImages.findIndex((image) => image.id === destination)] = sr;
+          return newImages;
+        });
+      });
+      setDragable(swappable);
+    }
+    initSwappable();
+  }, [images]);
+
+  const addImage = (imageArray) => {
+    if (draggable) { draggable.destroy(); }
+    setImages(images.concat(imageArray));
+  };
+
+  const removeImage = (imageId) => {
+    if (draggable) { draggable.destroy(); }
+    setImages(images.filter((i) => i.id !== imageId));
+  };
+
+  return (
+    <div className="product-image-manager">
+      <Images id={id} images={images} addImage={addImage} removeImage={removeImage} productImageUploadUrl={productImageUploadUrl} />
+      {images.map((image) => <input key={image.id} type="hidden" name={`${id}[]`} value={image.path} />)}
+    </div>
+  );
+}
+
+ProductMediaManager.propTypes = {
+  id: PropTypes.string.isRequired,
+  productImages: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    src: PropTypes.string
+  })).isRequired,
+  productImageUploadUrl: PropTypes.string.isRequired
+};

package/src/modules/catalog/pages/admin/productEdit+productNew/media/ProductMediaManager.scss

@@ -0,0 +1,76 @@
+.product-image-manager img {
+    max-width: 100%;
+}
+.product-image-manager .image-list {
+    grid-template-columns: repeat(4, 1fr);
+    display: grid;
+    grid-gap: 8px;
+    grid-auto-rows: 1fr;
+}
+.product-image-manager .image-list .image {
+    position: relative;
+    padding: 5px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid #e1e1e1;
+    background: #fff;
+    max-width: 150px;
+}
+.product-image-manager .image-list .uploader {
+    position: relative;
+    padding: 5px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 2px dashed #e1e1e1;
+    background: #fff;
+    max-width: 150px;
+}
+.product-image-manager .image-list .grid-item:first-child {
+    grid-column: 1 / span 2;
+    max-width: 100%;
+}
+.product-image-manager .image-list .grid-item:first-child:after {
+    content: "";
+    display: block;
+    padding-bottom: 100%;
+}
+.product-image-manager .image-list .image:first-child {
+    grid-row: 1 / span 2;
+}
+.product-image-manager .image-list .image:first-child img {
+    max-width: 100%;
+}
+.product-image-manager .image-list {
+    outline: 0;
+}
+.product-image-manager .image-list .image .img {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.product-image-manager .image-list .image .remove,
+.product-image-manager .image-list .image .zoom {
+    position: absolute;
+    top: 10px;
+}
+.product-image-manager .image-list .image .remove {
+    left: 10px;
+}
+.product-image-manager .image-list .image .zoom {
+    right: 10px;
+}
+.uploader .invisible {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.uploader .uploader-icon label {
+    cursor: pointer;
+    font-size: 20px;
+    color: #058c8c;
+}

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Field } from '../../../../../../lib/components/form/Field';
+import { Variants } from './Variants';
+import { useQuery } from 'urql';
+import { useFormContext } from '../../../../../../lib/components/form/Form';
+
+const AttributesQuery = `
+  query Query($filters: [FilterInput]) {
+    attributes(filters: $filters) {
+      items {
+        attributeId
+        attributeCode
+        attributeName
+        options {
+          value: attributeOptionId
+          text: optionText
+        }
+      }
+    }
+  }
+`;
+
+export function CreateVariantGroup() {
+  const formContext = useFormContext();
+  // Get the current value of attribute_group_id from the form context
+  const groupField = (formContext?.fields || []).find((f) => f.name === 'group_id');
+  const [attributes, setAttributes] = React.useState([]);
+  const [creating, setCreating] = React.useState(false);
+
+  React.useEffect(() => {
+    setCreating(false);
+  }, [groupField?.value]);
+
+  const onCreate = (e) => {
+    e.preventDefault();
+    setCreating(true);
+  };
+
+  const shouldPause = groupField === undefined || groupField === null ||
+    !groupField.value;
+
+  const [result, reexecuteQuery] = useQuery({
+    query: AttributesQuery,
+    variables: {
+      filters: [
+        { key: 'type', operation: '=', value: 'select' },
+        { key: 'group', operation: '=', value: groupField?.value },
+      ]
+    },
+    pause: shouldPause,
+  });
+  const { data, fetching, error } = result;
+  if (fetching) return <p>Loading...</p>;
+  if (error) return <p>Oh no... {error.message}</p>;
+
+  return (
+    <div>
+      {creating === true && (
+        <Variants
+          variantProducts={[]}
+          variantAttributes={(data?.attributes?.items || []).filter(
+            (v) => attributes.includes(v.attributeId)
+          )}
+        />
+      )}
+      {creating === false && (
+        <div>
+          {(data?.attributes?.items || []).length > 0 && (
+            <div>
+              <div><span>Select the list of attribute</span></div>
+              {(data?.attributes?.items || []).map((a) => (
+                <Field
+                  key={a.attributeCode}
+                  type="checkbox"
+                  label={a.attributeName}
+                  onChange={(e) => {
+                    if (e.target.checked) {
+                      setAttributes(attributes.concat(a.attributeId));
+                    } else {
+                      setAttributes(attributes.filter((attr) => a !== attr.attributeId));
+                    }
+                  }}
+                />
+              ))}
+              <div className="mt-1">
+                <a className="text-interactive hover:underline" href="#" onClick={(e) => onCreate(e)}>Create</a>
+              </div>
+            </div>
+          )}
+          {(data?.attributes?.items || []).length === 0 && (
+            <div className="alert alert-danger" role="alert">
+              There is no &quot;Select&quot; attribute available.
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Variants } from './Variants';
+
+export function Edit({ variants, variantAttributes }) {
+  return (
+    <Variants
+      variantProducts={variants || []}
+      variantAttributes={variantAttributes || []}
+    />
+  );
+}

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Card } from '../../../../../cms/components/admin/Card';
+import { CreateVariantGroup } from './CreateVariantGroup';
+
+export function New() {
+  const [action, setAction] = React.useState(undefined);
+  return (
+    <>
+      <Card.Session>
+        {action === undefined && (
+          <div>
+            <div className="justify-center text-center">
+              <div className="mb-4">
+                <span className="pr-1">This product has some variants like color or size?</span>
+                <a className="text-interactive hover:underline" href="#" onClick={(e) => { e.preventDefault(); setAction('create'); }}>Create a variant group</a>
+              </div>
+            </div>
+          </div>
+        )}
+        {action === 'create' && (
+          <div>
+            <CreateVariantGroup />
+          </div>
+        )}
+      </Card.Session>
+      {action === 'create' && (
+        <Card.Session>
+          <a className="text-critical hover:underline" href="#" onClick={(e) => { e.preventDefault(); setAction(undefined); }}>Cancel</a>
+        </Card.Session>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,52 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SearchModal } from './SearchModal';
+import { Input } from '../../../../../../lib/components/form/fields/Input';
+import { VariantType } from './VariantType';
+import { useAlertContext } from '../../../../../../lib/components/modal/Alert';
+
+export function Search({ addVariant, variants }) {
+  const searchInput = React.useRef();
+  const { openAlert, closeAlert } = useAlertContext();
+
+  const openModal = (e) => {
+    e.persist();
+    openAlert({
+      heading: 'Search for variant',
+      content: <SearchModal
+        keyword={e.target.value}
+        variants={variants}
+        addVariant={addVariant}
+      />,
+      primaryAction: {
+        title: 'Done',
+        onAction: closeAlert,
+        variant: 'primary'
+      }
+    });
+  };
+
+  return (
+    <div className="flex justify-between mt-1">
+      <div className="self-center">
+        <a href="#" onClick={(e) => addVariant(e)}><span className="text-interactive hover:underline">Add a new variant</span></a>
+      </div>
+      <div className="self-center">
+        <div className="autocomplete-search">
+          <Input
+            ref={searchInput}
+            type="text"
+            placeholder="Search for variant"
+            onChange={(e) => openModal(e)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Search.propTypes = {
+  addVariant: PropTypes.func.isRequired,
+  variants: PropTypes.arrayOf(VariantType).isRequired
+};

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

@@ -0,0 +1,135 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import PropTypes from 'prop-types';
+import React, { useEffect } from 'react';
+import { toast } from 'react-toastify';
+import uniqid from 'uniqid';
+import { Input } from '../../../../../../lib/components/form/fields/Input';
+import { VariantType } from './VariantType';
+
+export function SearchModal({ keyword, variants, addVariant, searchAPI }) {
+  const [potentialVariants, setPotentialVariants] = React.useState([]);
+  const [typeTimeout, setTypeTimeout] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+
+  const search = (kw) => {
+    if (typeTimeout) clearTimeout(typeTimeout);
+    setTypeTimeout(setTimeout(() => {
+      setLoading(true);
+      const url = new URL(searchAPI, window.location.origin);
+      if (kw) { url.searchParams.set('keyword', kw); }
+
+      fetch(
+        url,
+        {
+          method: 'GET',
+          headers: {
+            'X-Requested-With': 'XMLHttpRequest'
+          }
+        }
+      ).then((response) => {
+        if (!response.headers.get('content-type') || !response.headers.get('content-type').includes('application/json')) { throw new TypeError('Something wrong. Please try again'); }
+
+        return response.json();
+      })
+        .then((response) => {
+          if (get(response, 'success') === true) {
+            setPotentialVariants(get(response, 'data.variants').filter((v) => variants.find((vari) => parseInt(vari.variant_product_id, 10) === parseInt(v.variant_product_id, 10)) === undefined));
+          } else {
+            setPotentialVariants([]);
+          }
+        })
+        .catch(
+          (error) => {
+            toast.error(get(error, 'message', 'Failed!'));
+          }
+        )
+        .finally(() => {
+          // e.target.value = null
+          setLoading(false);
+        });
+    }, 1500));
+  };
+
+  useEffect(() => {
+    setPotentialVariants([]);
+    search(keyword);
+  }, []);
+
+  return (
+    <div>
+      <Input
+        type="text"
+        onChange={(e) => {
+          e.persist();
+          search(e.target.value);
+        }}
+        value={keyword}
+      />
+      <div className="variant-search-result">
+        {loading && (
+          <div className="variant-search-loading">
+            <svg style={{ background: 'rgb(255, 255, 255, 0)', display: 'block', shapeRendering: 'auto' }} width="2rem" height="2rem" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+              <circle cx="50" cy="50" fill="none" stroke="var(--primary)" strokeWidth="10" r="43" strokeDasharray="202.63272615654165 69.54424205218055">
+                <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1" />
+              </circle>
+            </svg>
+          </div>
+        )}
+        {potentialVariants.length > 0 && (
+          <div className="search-result">
+            <table className="listing">
+              <tbody>
+                {potentialVariants.map((v) => (
+                  <tr className={v.selected === true ? 'selected' : ''}>
+                    <td>{v.image.url && <img src={v.image.url} alt="" />}</td>
+                    <td>
+                      <a
+                        className="text-interactive"
+                        href="#"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          setPotentialVariants(potentialVariants.map((a) => {
+                            if (
+                              parseInt(a.variant_product_id, 10)
+                              === parseInt(v.variant_product_id, 10)
+                            ) {
+                              return { ...a, selected: true };
+                            } else {
+                              return a;
+                            }
+                          }));
+                          addVariant(e, {
+                            id: uniqid(),
+                            variant_product_id: v.variant_product_id,
+                            attributes: v.setAttributes,
+                            image: v.image,
+                            sku: v.sku,
+                            price: v.price,
+                            qty: v.qty,
+                            status: v.status,
+                            visibility: 0,
+                            editUrl: v.editUrl
+                          });
+                        }}
+                      >
+                        <span>{v.name}</span>
+                      </a>
+                    </td>
+                    <td><span>{new Intl.NumberFormat(context.language, { style: 'currency', currency: context.currency }).format(v.price)}</span></td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+        {potentialVariants.length <= 0 && <div className="flex justify-center p-1">There is no product to show</div>}
+      </div>
+    </div>
+  );
+}
+
+SearchModal.propTypes = {
+  addVariant: PropTypes.func.isRequired,
+  keyword: PropTypes.string.isRequired,
+  variants: PropTypes.arrayOf(VariantType).isRequired
+};