@evershop/evershop 1.0.0-beta

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

@@ -0,0 +1,170 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+import { Field } from '../../../../../lib/components/form/Field';
+import { TextArea } from '../../../../../lib/components/form/fields/Textarea';
+import { Card } from '../../../../cms/components/admin/Card';
+
+function SKUPriceWeight({ sku, price, weight, setting }) {
+  return (
+    <div className="grid grid-cols-3 gap-1 mt-15">
+      <div>
+        <Field
+          id="sku"
+          name="sku"
+          value={sku}
+          placeholder="SKU"
+          label="SKU"
+          type="text"
+          validationRules={['notEmpty']}
+        />
+      </div>
+      <div>
+        <Field
+          id="price"
+          name="price"
+          value={price?.value}
+          placeholder="Price"
+          label="Price"
+          type="text"
+          validationRules={['notEmpty']}
+          suffix={setting.storeCurrency}
+        />
+      </div>
+      <div>
+        <Field
+          id="weight"
+          name="weight"
+          value={weight?.value}
+          placeholder="Weight"
+          label="Weight"
+          type="text"
+          validationRules={['notEmpty']}
+          suffix={setting.weightUnit}
+        />
+      </div>
+    </div>
+  );
+}
+
+SKUPriceWeight.propTypes = {
+  price: PropTypes.number,
+  sku: PropTypes.string,
+  weight: PropTypes.number
+};
+
+SKUPriceWeight.defaultProps = {
+  price: undefined,
+  sku: undefined,
+  weight: undefined
+};
+
+export default function General({
+  product, browserApi, deleteApi, uploadApi, folderCreateApi, setting
+}) {
+  return (
+    <Card
+      title="General"
+    >
+      <Card.Session>
+        <Area
+          id="productEditGeneral"
+          coreComponents={[
+            {
+              component: { default: Field },
+              props: {
+                id: 'name',
+                name: 'name',
+                label: 'Name',
+                value: product?.name,
+                validationRules: ['notEmpty'],
+                type: 'text',
+                placeholder: 'Name'
+              },
+              sortOrder: 10,
+              id: 'name'
+            },
+            {
+              component: { default: Field },
+              props: {
+                id: 'product_id',
+                name: 'product_id',
+                value: product?.productId,
+                type: 'hidden'
+              },
+              sortOrder: 10,
+              id: 'product_id'
+            },
+            {
+              component: { default: SKUPriceWeight },
+              props: {
+                sku: product?.sku,
+                price: product?.price.regular,
+                weight: product?.weight,
+                setting: setting
+              },
+              sortOrder: 20,
+              id: 'SKUPriceWeight'
+            },
+            {
+              component: { default: TextArea },
+              props: {
+                id: 'description',
+                name: 'description',
+                label: 'Description',
+                value: product?.description,
+                browserApi,
+                deleteApi,
+                uploadApi,
+                folderCreateApi
+              },
+              sortOrder: 30,
+              id: 'description'
+            }
+          ]}
+        />
+      </Card.Session>
+    </Card>
+  );
+}
+
+General.propTypes = {
+  browserApi: PropTypes.string.isRequired,
+  deleteApi: PropTypes.string.isRequired,
+  folderCreateApi: PropTypes.string.isRequired,
+  uploadApi: PropTypes.string.isRequired
+};
+
+export const layout = {
+  areaId: 'leftSide',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    product(id: getContextValue("productId", null)) {
+      productId
+      name
+      description
+      sku
+      price {
+        regular {
+          value
+          currency
+        }
+      }
+      weight {
+        value
+        unit
+      }
+    }
+    setting {
+      weightUnit
+      storeCurrency
+    }
+    browserApi: url(routeId: "fileBrowser", params: [{key: "0", value: ""}])
+    deleteApi: url(routeId: "fileDelete", params: [{key: "0", value: ""}])
+    uploadApi: url(routeId: "fileDelete", params: [{key: "0", value: ""}])
+    folderCreateApi: url(routeId: "imageUpload", params: [{key: "0", value: ""}])
+  }
+`;

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Field } from '../../../../../lib/components/form/Field';
+import { Card } from '../../../../cms/components/admin/Card';
+
+export default function Inventory({ product }) {
+  const inventory = product?.inventory || {};
+  return (
+    <Card
+      title="Inventory"
+      subdued
+    >
+      <Card.Session>
+        <Field
+          id="manage_stock"
+          name="manage_stock"
+          value={inventory.manageStock}
+          label="Manage stock?"
+          options={[{ value: 0, text: 'No' }, { value: 1, text: 'Yes' }]}
+          type="radio"
+        />
+      </Card.Session>
+      <Card.Session>
+        <Field
+          id="stock_availability"
+          name="stock_availability"
+          value={inventory.stockAvailability}
+          label="Stock availability"
+          options={[{ value: 0, text: 'No' }, { value: 1, text: 'Yes' }]}
+          type="radio"
+        />
+      </Card.Session>
+      <Card.Session>
+        <Field
+          id="qty"
+          name="qty"
+          value={inventory.qty}
+          placeholder="Quantity"
+          label="Quantity"
+          type="text"
+          validationRules={['notEmpty']}
+        />
+      </Card.Session>
+    </Card>
+  );
+}
+
+export const layout = {
+  areaId: 'rightSide',
+  sortOrder: 15
+}
+
+export const query = `
+  query Query {
+    product(id: getContextValue("productId", null)) {
+      inventory {
+        qty
+        stockAvailability
+        manageStock
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import ProductMediaManager from './media/ProductMediaManager';
+import { Card } from '../../../../cms/components/admin/Card';
+
+export default function Media({ id, product, productImageUploadUrl }) {
+  const image = product?.image;
+  let gallery = product?.gallery || [];
+
+  if (image) {
+    gallery = [image].concat(gallery);
+  }
+  return (
+    <Card
+      title="Media"
+    >
+      <Card.Session>
+        <ProductMediaManager id={id || 'productMainImages'} productImages={gallery} productImageUploadUrl={productImageUploadUrl} />
+      </Card.Session>
+    </Card>
+  );
+}
+
+export const layout = {
+  areaId: 'leftSide',
+  sortOrder: 15
+}
+
+export const query = `
+  query Query {
+    product(id: getContextValue("productId", null)) {
+      image {
+        uniqueId
+        url: origin
+        path
+      }
+      gallery {
+        uniqueId
+        url: origin
+        path
+      }
+    }
+    productImageUploadUrl: url(routeId: "imageUpload", params: [{key: "0", value: ""}])
+  }
+`;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import PageHeading from '../../../../cms/components/admin/PageHeading';
+
+export default function ProductEditPageHeading({ backUrl, product }) {
+  return <PageHeading backUrl={backUrl} heading={product ? `Editing ${product.name}` : `Create A New Product`} />
+}
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 5
+}
+
+export const query = `
+  query Query {
+    product(id: getContextValue("productId", null)) {
+      name
+    }
+    backUrl: url(routeId: "productGrid")
+  }
+`

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

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { toast } from 'react-toastify';
+import Area from '../../../../../lib/components/Area';
+import Button from '../../../../../lib/components/form/Button';
+import { Form } from '../../../../../lib/components/form/Form';
+import { get } from '../../../../../lib/util/get';
+
+export default function ProductCreateForm({
+  action, gridUrl
+}) {
+  const id = 'productEditForm';
+  return (
+    <Form
+      method={'POST'}
+      action={action}
+      submitBtn={false}
+      onSuccess={(response) => {
+        if (get(response, 'success') === false) {
+          toast.error(get(response, 'message', 'Something wrong. Please reload the page!'));
+        }
+      }}
+      onError={() => {
+        toast.error('Something wrong. Please reload the page!');
+      }}
+      id={id}
+    >
+      <div className="grid grid-cols-3 gap-x-2 grid-flow-row ">
+        <div className="col-span-2 grid grid-cols-1 gap-2 auto-rows-max">
+          <Area id="leftSide" noOuter />
+        </div>
+        <div className="col-span-1 grid grid-cols-1 gap-2 auto-rows-max">
+          <Area id="rightSide" noOuter />
+        </div>
+      </div>
+      <div className="form-submit-button flex border-t border-divider mt-15 pt-15 justify-between">
+        <Button
+          title="Cancel"
+          variant="critical"
+          outline
+          onAction={
+            () => {
+              window.location = gridUrl;
+            }
+          }
+        />
+        <Button
+          title="Save"
+          onAction={
+            () => { document.getElementById(id).dispatchEvent(new Event('submit', { cancelable: true, bubbles: true })); }
+          }
+        />
+      </div>
+    </Form>
+  );
+}
+
+ProductCreateForm.propTypes = {
+  action: PropTypes.string.isRequired,
+  gridUrl: PropTypes.string.isRequired
+};
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    action: url(routeId: "productSavePost")
+    gridUrl: url(routeId: "productGrid")
+  }
+`;

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

@@ -0,0 +1,7 @@
+.page-heading {
+    max-width: 100rem;
+}
+.main-content-inner {
+    max-width: 100rem;
+    margin: 0 auto;
+}

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+import { Field } from '../../../../../lib/components/form/Field';
+import { get } from '../../../../../lib/util/get';
+import { Card } from '../../../../cms/components/admin/Card';
+
+export default function SEO({ product }) {
+  const fields = [
+    {
+      component: { default: Field },
+      props: {
+        id: 'urlKey', name: 'url_key', label: 'Url key', validationRules: ['notEmpty'], type: 'text'
+      },
+      sortOrder: 0
+    },
+    {
+      component: { default: Field },
+      props: {
+        id: 'metaTitle', name: 'meta_title', label: 'Meta title', type: 'text'
+      },
+      sortOrder: 10
+    },
+    {
+      component: { default: Field },
+      props: {
+        id: 'metaKeywords',
+        name: 'meta_keywords',
+        label: 'Meta keywords',
+        type: 'text'
+      },
+      sortOrder: 20
+    },
+    {
+      component: { default: Field },
+      props: {
+        id: 'metaDescription',
+        name: 'meta_description',
+        label: 'Meta description',
+        options: [{ value: 0, text: 'Disabled' }, { value: 1, text: 'Enabled' }],
+        type: 'textarea'
+      },
+      sortOrder: 30
+    }
+  ].filter((f) => {
+    // eslint-disable-next-line no-param-reassign
+    if (get(product, `${f.props.id}`) !== undefined) { f.props.value = get(product, `${f.props.id}`); }
+    return f;
+  });
+
+  return (
+    <Card
+      title="Search engine optimize"
+    >
+      <Card.Session>
+        <Area id="productEditSeo" coreComponents={fields} />
+      </Card.Session>
+    </Card>
+  );
+}
+
+export const layout = {
+  areaId: 'leftSide',
+  sortOrder: 60
+}
+
+export const query = `
+  query Query {
+    product(id: getContextValue('productId', null)) {
+      urlKey
+      metaTitle
+      metaKeywords
+      metaDescription
+    }
+  }
+`

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Field } from '../../../../../lib/components/form/Field';
+import { Card } from '../../../../cms/components/admin/Card';
+import Select from 'react-select';
+import { useQuery } from 'urql';
+
+const categoryQuery = `
+  query Query {
+    categories {
+      items {
+        value: categoryId,
+        label: name
+      }
+    }
+  }
+`;
+
+export function Category({
+  product
+}) {
+  const categories = product ? product.categories : [];
+  const [result, reexecuteQuery] = useQuery({
+    query: categoryQuery,
+  });
+  const { data, fetching, error } = result;
+
+  if (fetching) return <p>Loading...</p>;
+  if (error) return <p>Oh no... {error.message}</p>;
+
+  return (
+    <div>
+      <div className='mb-1'>Category</div>
+      <Select
+        name='categories[]'
+        options={data.categories.items}
+        hideSelectedOptions={true}
+        isMulti={true}
+        defaultValue={categories}
+      />
+    </div>
+  );
+}
+
+export default function Status({ product }) {
+  return (
+    <Card
+      title="Product status"
+      subdued
+    >
+      <Card.Session>
+        <Field
+          id="status"
+          name="status"
+          value={product?.status}
+          label="Status"
+          options={[{ value: 0, text: 'Disabled' }, { value: 1, text: 'Enabled' }]}
+          type="radio"
+        />
+      </Card.Session>
+      <Card.Session>
+        <Field
+          id="visibility"
+          name="visibility"
+          value={product?.visibility}
+          label="Visibility"
+          options={[{ value: 0, text: 'Not visible' }, { value: 1, text: 'Visible' }]}
+          type="radio"
+        />
+      </Card.Session>
+      <Card.Session>
+        <Category product={product} />
+      </Card.Session>
+    </Card>
+  );
+}
+
+export const layout = {
+  areaId: 'rightSide',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    product(id: getContextValue("productId", null)) {
+      status
+      visibility
+      categories {
+        value: categoryId
+        label: name
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { New } from './variants/New';
+import { Edit } from './variants/Edit';
+import { Card } from '../../../../cms/components/admin/Card';
+
+export default function VariantGroup({ product }) {
+  return (
+    <Card
+      title="Variant"
+    >
+      {!product?.variantGroup?.variantGroupId && <New />}
+      {product?.variantGroup?.variantGroupId && (
+        <div>
+          <input type="hidden" value={product?.variantGroup?.variantGroupId} name="variant_group[variant_group_id]" />
+          <Edit
+            variantAttributes={product?.variantGroup?.variantAttributes || []}
+            variants={product?.variantGroup?.items || []}
+          />
+        </div>
+      )}
+    </Card>
+  );
+}
+
+export const layout = {
+  areaId: 'leftSide',
+  sortOrder: 70
+}
+
+export const query = `
+query Query {
+  product(id: getContextValue('productId', null)) {
+    variantGroup {
+      variantGroupId
+      variantAttributes {
+        attributeId
+        attributeCode
+        attributeName
+        options {
+          optionId
+          optionText
+        }
+      }
+      items {
+        id
+        attributes {
+          attributeId
+          attributeCode
+          optionId
+        }
+        product {
+          productId
+          name
+          sku
+          status
+          price {
+            regular {
+              value
+              currency
+            }
+          }
+          inventory {
+            qty
+            isInStock
+            stockAvailability
+            manageStock
+          }
+          editUrl
+          image {
+            uniqueId
+            url: origin
+            path
+          }
+          gallery {
+            uniqueId
+            url: origin
+            path
+          }
+        }
+      }
+    }
+  }
+}
+`;

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

@@ -0,0 +1,24 @@
+.variant-search-result {
+  position: relative;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  .search-result {
+    max-height: 20rem;
+    overflow-y: auto;
+  }
+  .variant-search-loading {
+    color: var(--primary);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -1rem;
+    margin-left: -1rem;
+  }
+  tr.selected {
+    background-color: var(--primary);
+    color: white;
+    a {
+      color: white;
+    }
+  }
+}