@evershop/evershop 1.0.0-beta

package/src/modules/promotion/components/RequireProducts.js

@@ -0,0 +1,224 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Area from '../../../lib/components/Area';
+import { Field } from '../../../lib/components/form/Field';
+
+export function RequiredProducts({ requiredProducts }) {
+  const [products, setProducts] = React.useState(requiredProducts);
+
+  const addProduct = (e) => {
+    e.persist();
+    e.preventDefault();
+    setProducts(products.concat({
+      key: 'category',
+      operator: '',
+      value: '',
+      qty: ''
+    }));
+  };
+
+  const removeProduct = (e, index) => {
+    e.persist();
+    e.preventDefault();
+    const newProducts = products.filter((_, i) => i !== index);
+    setProducts(newProducts);
+  };
+
+  const updateProduct = (e, key, index) => {
+    e.persist();
+    e.preventDefault();
+    const newProducts = products.map((p, i) => {
+      if (i === index) {
+        return { ...p, [key]: e.target.value };
+      } else { return p; }
+    });
+    setProducts(newProducts);
+  };
+
+  return (
+    <div style={{ marginTop: '1rem', marginBottom: '1rem' }}>
+      <div><span>Order must contains product matched bellow conditions(All)</span></div>
+      <table className="table table-auto" style={{ marginTop: 0 }}>
+        <thead>
+          <tr>
+            <th><span>Key</span></th>
+            <th><span>Operator</span></th>
+            <th><span>Value</span></th>
+            <th><span>Minimum quantity</span></th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {products.map((p, i) => (
+            <tr key={i}>
+              <td>
+                <div className="form-field-container dropdown">
+                  <div className="field-wrapper">
+                    <select
+                      name={`condition[required_products][${i}][key]`}
+                      className="form-field"
+                      value={p.key}
+                      onChange={(e) => updateProduct(e, 'key', i)}
+                    >
+                      <Area
+                        id="couponRequiredProductKeyList"
+                        noOuter
+                        coreComponents={[
+                          {
+                            component: { default: () => <option value="category">Category ID</option> },
+                            props: {},
+                            sortOrder: 10,
+                            id: 'requiredProductKeyCategory'
+                          },
+                          {
+                            component: { default: () => <option value="attribute_group">Attribute Group</option> },
+                            props: {},
+                            sortOrder: 20,
+                            id: 'requiredProductKeyAttributeGroup'
+                          },
+                          {
+                            component: { default: () => <option value="price">Price</option> },
+                            props: {},
+                            sortOrder: 30,
+                            id: 'requiredProductKeyPrice'
+                          },
+                          {
+                            component: { default: () => <option value="sku">Sku</option> },
+                            props: {},
+                            sortOrder: 40,
+                            id: 'requiredProductKeySku'
+                          }
+                        ]}
+                      />
+                    </select>
+                    <div className="field-border"></div>
+                    <div className="field-suffix"><svg viewBox="0 0 20 20" width="1rem" height="1.25rem" focusable="false" aria-hidden="true"><path d="m10 16-4-4h8l-4 4zm0-12 4 4H6l4-4z"></path></svg></div>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <div className="form-field-container dropdown">
+                  <div className="field-wrapper">
+                    <select
+                      name={`condition[required_products][${i}][operator]`}
+                      className="form-field"
+                      value={p.operator}
+                      onChange={(e) => updateProduct(e, 'operator', i)}
+                    >
+                      <Area
+                        id="couponRequiredProductOperatorList"
+                        noOuter
+                        coreComponents={[
+                          {
+                            component: { default: ({ compareKey }) => ['price'].includes(compareKey) ? <option value="=">Equal</option> : (null) },
+                            props: { compareKey: p.key },
+                            sortOrder: 10,
+                            id: 'couponRequiredProductOperatorEqual'
+                          },
+                          {
+                            component: { default: ({ compareKey }) => ['price'].includes(compareKey) ? <option value="!=">Not equal</option> : (null) },
+                            props: { compareKey: p.key },
+                            sortOrder: 15,
+                            id: 'couponRequiredProductOperatorNotEqual'
+                          },
+                          {
+                            component: { default: ({ compareKey }) => ['price'].includes(compareKey) ? <option value=">">Greater</option> : (null) },
+                            props: { compareKey: p.key },
+                            sortOrder: 20,
+                            id: 'couponRequiredProductOperatorGreater'
+                          },
+                          {
+                            component: { default: ({ compareKey }) => ['price'].includes(compareKey) ? <option value=">=">Greater or equal</option> : (null) },
+                            props: { compareKey: p.key },
+                            sortOrder: 25,
+                            id: 'couponRequiredProductOperatorGreaterOrEqual'
+                          },
+                          {
+                            component: { default: ({ compareKey }) => ['price'].includes(compareKey) ? <option value="<">Smaller</option> : (null) },
+                            props: { compareKey: p.key },
+                            sortOrder: 30,
+                            id: 'couponRequiredProductOperatorSmaller'
+                          },
+                          {
+                            component: { default: ({ compareKey }) => ['price'].includes(compareKey) ? <option value="<=">Equal or smaller</option> : (null) },
+                            props: { compareKey: p.key },
+                            sortOrder: 35,
+                            id: 'couponRequiredProductOperatorEqualOrSmaller'
+                          },
+                          {
+                            component: { default: ({ compareKey }) => ['category', 'attribute_group', 'sku'].includes(compareKey) ? <option value="IN">In</option> : (null) },
+                            props: { compareKey: p.key },
+                            sortOrder: 40,
+                            id: 'couponRequiredProductOperatorIn'
+                          },
+                          {
+                            component: { default: ({ compareKey }) => ['category', 'attribute_group', 'sku'].includes(compareKey) ? <option value="NOT IN">Not in</option> : (null) },
+                            props: { compareKey: p.key },
+                            sortOrder: 45,
+                            id: 'couponRequiredProductOperatorNotIn'
+                          }
+                        ]}
+                      />
+                    </select>
+                    <div className="field-border"></div>
+                    <div className="field-suffix"><svg viewBox="0 0 20 20" width="1rem" height="1.25rem" focusable="false" aria-hidden="true"><path d="m10 16-4-4h8l-4 4zm0-12 4 4H6l4-4z"></path></svg></div>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <Field
+                  type="text"
+                  name={`condition[required_products][${i}][value]`}
+                  formId="coupon-edit-form"
+                  value={p.value}
+                  validationRules={['notEmpty']}
+                />
+              </td>
+              <td>
+                <Field
+                  type="text"
+                  name={`condition[required_products][${i}][qty]`}
+                  formId="coupon-edit-form"
+                  value={p.qty}
+                  validationRules={['notEmpty']}
+                />
+              </td>
+              <td>
+                <a href="#" className="text-critical" onClick={(e) => removeProduct(e, i)}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width={'1.5rem'} height={'1.5rem'} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M18 12H6" />
+                  </svg>
+                </a>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="mt-1 flex justify-start">
+        <div className="items-center flex">
+          <svg xmlns="http://www.w3.org/2000/svg" width={'1.5rem'} height={'1.5rem'} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+          </svg>
+        </div>
+        <div className="pl-1">
+          <a href="#" onClick={(e) => addProduct(e)} className="">
+            <span>Add product</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+RequiredProducts.propTypes = {
+  requiredProducts: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    operator: PropTypes.string,
+    value: PropTypes.string,
+    qty: PropTypes.string
+  }))
+}
+
+RequiredProducts.defaultProps = {
+  requiredProducts: []
+}

package/src/modules/promotion/components/TargetProduct.js

@@ -0,0 +1,267 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Area from '../../../lib/components/Area';
+import { Input } from '../../../lib/components/form/fields/Input';
+import PubSub from 'pubsub-js';
+import { FORM_FIELD_UPDATED } from '../../../lib/util/events';
+
+function Products({ targetProducts, maxQty = '' }) {
+  const [products, setProducts] = React.useState(targetProducts);
+
+  const addProduct = (e) => {
+    e.persist();
+    e.preventDefault();
+    setProducts(products.concat({
+      key: 'category',
+      operator: '',
+      value: '',
+      qty: ''
+    }));
+  };
+
+  const removeProduct = (e, index) => {
+    e.persist();
+    e.preventDefault();
+    const newProducts = products.filter((_, i) => i !== index);
+    setProducts(newProducts);
+  };
+
+  const updateProduct = (e, key, index) => {
+    e.persist();
+    e.preventDefault();
+    const newProducts = products.map((p, i) => {
+      if (i === index) {
+        return { ...p, [key]: e.target.value };
+      } else { return p; }
+    });
+    setProducts(newProducts);
+  };
+
+  return (
+    <div>
+      <div className="mb-1 mt-1">
+        <div className="flex justify-start items-center mb-3">
+          <div>Maximum</div>
+          <div style={{ width: "70px", padding: "0 1rem" }}>
+            <Input
+              name="target_products[maxQty]"
+              value={maxQty}
+            />
+          </div>
+          <div>quantity of products are matched bellow conditions(All)</div>
+        </div>
+      </div>
+      <table className="table table-bordered" style={{ marginTop: 0 }}>
+        <thead>
+          <tr>
+            <th><span>Key</span></th>
+            <th><span>Operator</span></th>
+            <th><span>Value</span></th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {products.map((p, i) => (
+            <tr key={i}>
+              <td>
+                <div className="form-field-container dropdown">
+                  <div className="field-wrapper">
+                    <select
+                      name={`target_products[products][${i}][key]`}
+                      className="form-control"
+                      value={p.key}
+                      onChange={(e) => updateProduct(e, 'key', i)}
+                    >
+                      <Area
+                        id="couponTargetProductKeyList"
+                        noOuter
+                        coreComponents={[
+                          {
+                            component: { default: () => <option value="category">Category</option> },
+                            props: {},
+                            sortOrder: 10
+                          },
+                          {
+                            component: { default: () => <option value="attribute_group">Attribute Group</option> },
+                            props: {},
+                            sortOrder: 20
+                          },
+                          {
+                            component: { default: () => <option value="price">Price</option> },
+                            props: {},
+                            sortOrder: 30
+                          },
+                          {
+                            component: { default: () => <option value="sku">Sku</option> },
+                            props: {},
+                            sortOrder: 40
+                          }
+                        ]}
+                      />
+                    </select>
+                    <div className="field-border"></div>
+                    <div className="field-suffix"><svg viewBox="0 0 20 20" width="1rem" height="1.25rem" focusable="false" aria-hidden="true"><path d="m10 16-4-4h8l-4 4zm0-12 4 4H6l4-4z"></path></svg></div>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <div className="form-field-container dropdown">
+                  <div className="field-wrapper">
+                    <select
+                      name={`target_products[products][${i}][operator]`}
+                      className="form-control"
+                      value={p.operator}
+                      onChange={(e) => updateProduct(e, 'operator', i)}
+                    >
+                      <Area
+                        id="couponTargetProductOperatorList"
+                        noOuter
+                        coreComponents={[
+                          {
+                            component: { default: ({ compareKey }) => ['price'].includes(compareKey) ? <option value="=">Equal</option> : (null) },
+                            props: { compareKey: p.key },
+                            sortOrder: 10,
+                            id: 'couponTargetProductOperatorEqual'
+                          },
+                          {
+                            component: { default: ({ compareKey }) => ['price'].includes(compareKey) ? <option value="!=">Not equal</option> : (null) },
+                            props: { compareKey: p.key },
+                            sortOrder: 15,
+                            id: 'couponTargetProductOperatorNotEqual'
+                          },
+                          {
+                            component: { default: ({ compareKey }) => ['price'].includes(compareKey) ? <option value=">">Greater</option> : (null) },
+                            props: { compareKey: p.key },
+                            sortOrder: 20,
+                            id: 'couponTargetProductOperatorGreater'
+                          },
+                          {
+                            component: { default: ({ compareKey }) => ['price'].includes(compareKey) ? <option value=">=">Greater or equal</option> : (null) },
+                            props: { compareKey: p.key },
+                            sortOrder: 25,
+                            id: 'couponTargetProductOperatorGreaterOrEqual'
+                          },
+                          {
+                            component: { default: ({ compareKey }) => ['price'].includes(compareKey) ? <option value="<">Smaller</option> : (null) },
+                            props: { compareKey: p.key },
+                            sortOrder: 30,
+                            id: 'couponTargetProductOperatorSmaller'
+                          },
+                          {
+                            component: { default: ({ compareKey }) => ['price'].includes(compareKey) ? <option value="<=">Equal or smaller</option> : (null) },
+                            props: { compareKey: p.key },
+                            sortOrder: 35,
+                            id: 'couponTargetProductOperatorEqualOrSmaller'
+                          },
+                          {
+                            component: { default: ({ compareKey }) => ['category', 'attribute_group', 'sku'].includes(compareKey) ? <option value="IN">In</option> : (null) },
+                            props: { compareKey: p.key },
+                            sortOrder: 40,
+                            id: 'couponTargetProductOperatorIn'
+                          },
+                          {
+                            component: { default: ({ compareKey }) => ['category', 'attribute_group', 'sku'].includes(compareKey) ? <option value="NOT IN">Not in</option> : (null) },
+                            props: { compareKey: p.key },
+                            sortOrder: 45,
+                            id: 'couponTargetProductOperatorNotIn'
+                          }
+                        ]}
+                      />
+                    </select>
+                    <div className="field-border"></div>
+                    <div className="field-suffix"><svg viewBox="0 0 20 20" width="1rem" height="1.25rem" focusable="false" aria-hidden="true"><path d="m10 16-4-4h8l-4 4zm0-12 4 4H6l4-4z"></path></svg></div>
+                  </div>
+                </div>
+              </td>
+              <td>
+                <Input
+                  name={`target_products[products][${i}][value]`}
+                  formId="coupon-edit-form"
+                  value={p.value}
+                  validationRules={['notEmpty']}
+                />
+              </td>
+              <td>
+                <a href="#" className="text-critical" onClick={(e) => removeProduct(e, i)}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width={'1.5rem'} height={'1.5rem'} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M18 12H6" />
+                  </svg>
+                </a>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="mt-1 flex justify-start">
+        <div className="items-center flex">
+          <svg xmlns="http://www.w3.org/2000/svg" width={'1.5rem'} height={'1.5rem'} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+          </svg>
+        </div>
+        <div className="pl-1">
+          <a href="#" onClick={(e) => addProduct(e)} className="">
+            <span>Add product</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Products.propTypes = {
+  maxQty: PropTypes.string,
+  targetProducts: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    operator: PropTypes.string,
+    value: PropTypes.string,
+    qty: PropTypes.string
+  }))
+}
+
+export function TargetProducts({ products, maxQty, discountType }) {
+  const [active, setActive] = React.useState(() => {
+    if (discountType === 'fixed_discount_to_specific_products' || discountType === 'percentage_discount_to_specific_products') {
+      return true;
+    } else {
+      return false;
+    }
+  });
+
+  React.useEffect(() => {
+    const token = PubSub.subscribe(FORM_FIELD_UPDATED, (message, data) => {
+      if (data.name === 'discount_type') {
+        if (data.value === 'fixed_discount_to_specific_products' || data.value === 'percentage_discount_to_specific_products') {
+          setActive(true);
+        } else {
+          setActive(false);
+        }
+      }
+    });
+
+    return function cleanup() {
+      PubSub.unsubscribe(token);
+    };
+  }, []);
+
+  return (
+    <>
+      {active === true && (
+        <div className="">
+          <h2 className="card-title">Target products</h2>
+          <Products targetProducts={products} maxQty={maxQty} />
+        </div>
+      )}
+    </>
+  );
+}
+
+TargetProducts.propTypes = {
+  discountType: PropTypes.string,
+  maxQty: PropTypes.string,
+  products: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    operator: PropTypes.string,
+    value: PropTypes.string,
+    qty: PropTypes.string
+  }))
+}

package/src/modules/promotion/graphql/types/Coupon/Coupon.graphql

@@ -0,0 +1,63 @@
+type Coupon {
+  couponId: Int
+  status: Int!
+  description: String!
+  discountAmount: Float!
+  freeShipping: Int!
+  discountType: String!
+  coupon: String!
+  usedTime: Int
+  targetProducts: TargetProducts
+  condition: OrderCondition
+  userCondition: UserCondition
+  buyxGety: [ByXGetY]
+  maxUsesTimePerCoupon: Int
+  maxUsesTimePerCustomer: Int
+  startDate: String
+  endDate: String
+  editUrl: String!
+}
+
+type MatchProductFilter {
+  key: String!
+  operator: String!
+  value: String!
+  qty: String
+}
+
+type TargetProducts {
+  maxQty: String
+  products: [MatchProductFilter]
+}
+
+type OrderCondition {
+  orderTotal: String
+  orderQty: String
+  requiredProducts: [MatchProductFilter]
+}
+
+type ByXGetY {
+  sku: String!
+  buyQty: String
+  getQty: String
+  maxY: String
+  discount: String
+}
+
+type UserCondition {
+  groups: [String]
+  emails: String
+  purchased: String
+}
+
+type CouponCollection {
+  items: [Coupon]
+  currentPage: Int!
+  total: Int!
+  currentFilters: [Filter]
+}
+
+extend type Query {
+  coupon(id: Int): Coupon,
+  coupons(filters: [FilterInput]): CouponCollection
+}