@evershop/evershop 1.0.0-beta

package/src/modules/checkout/api/frontStore/checkoutSetShipmentInfo/saveShipmentInfo.js

@@ -0,0 +1,49 @@
+const { insert } = require('@evershop/mysql-query-builder');
+const { pool } = require('../../../../../lib/mysql/connection');
+const { addressValidator } = require('../../../services/addressValidator');
+const { getCartByUUID } = require('../../../services/getCartByUUID');
+const { saveCart } = require('../../../services/saveCart');
+
+module.exports = async (request, response, stack, next) => {
+  try {
+    const { address, method, cartId } = request.body;
+    // Check if cart exists
+    const cart = await getCartByUUID(cartId);
+    if (!cart) {
+      return response.status(400).json({
+        message: "Invalid cart id",
+        success: false
+      });
+    }
+    // Validate address
+    if (!addressValidator(address)) {
+      throw new TypeError('Invalid Address');
+    }
+
+    // Save shipping address
+    const result = await insert('cart_address').given(address).execute(pool);
+
+    // Set shipping address ID
+    await cart.setData('shipping_address_id', parseInt(result.insertId, 10));
+
+    // Save shipping method
+    // Each shipping method should have a middleware to validate the payment method before this step
+    await cart.setData('shipping_method', method);
+
+    // Save the cart
+    await saveCart(cart);
+    response.$body = {
+      data: {
+      },
+      success: true,
+      message: ''
+    };
+  } catch (e) {
+    response.$body = {
+      data: {},
+      success: false,
+      message: e.message
+    };
+  }
+  next();
+};

package/src/modules/checkout/api/frontStore/paymentMethods/[validateCart]sendMethods.js

@@ -0,0 +1,40 @@
+// eslint-disable-next-line no-unused-vars
+module.exports = async (request, response, deledate, next) => {
+  const promises = [];
+  // eslint-disable-next-line no-restricted-syntax
+  for (const id in deledate) {
+    // Check if middleware is async
+    if (Promise.resolve(deledate[id]) === deledate[id]) {
+      promises.push(deledate[id]);
+    }
+  }
+  try {
+    const data = [];
+    // Wait for all async middleware to be completed
+    const results = await Promise.all(promises);
+    // Parse the returned value from previous middleware
+    // Each payment method is encouraged to have a middleware to register itself
+    for (let i = 0; i < results.length; i++) {
+      const result = results[i];
+      if (result && result.methodCode && result.methodName) {
+        // This value will be considered as a payment method
+        data.push({ code: result.methodCode, name: result.methodName });
+      }
+    }
+
+    response.json({
+      data: {
+        methods: data
+      },
+      success: true,
+    });
+  } catch (e) {
+    response.json({
+      data: {
+        methods: []
+      },
+      success: false,
+      message: e.message
+    });
+  }
+};

package/src/modules/checkout/api/frontStore/paymentMethods/route

@@ -0,0 +1,2 @@
+GET
+/checkout/paymentMethods/:cartId?

package/src/modules/checkout/api/frontStore/paymentMethods/validateCart.js

@@ -0,0 +1,23 @@
+const { getCartByUUID } = require('../../../services/getCartByUUID');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = async (request, response, stack, next) => {
+  try {
+    const cartId = request.params?.cartId;
+    // Verify cart
+    const cart = await getCartByUUID(cartId);
+    if (!cart) {
+      return response.status(400).json({
+        message: "Invalid cart id",
+        success: false
+      });
+    }
+    next();
+  } catch (e) {
+    response.json({
+      data: {},
+      success: false,
+      message: e.message
+    });
+  }
+};

package/src/modules/checkout/api/frontStore/removeCartItem/[context]bodyParser[auth].js

@@ -0,0 +1,5 @@
+const bodyParser = require('body-parser');
+
+module.exports = (request, response, stack, next) => {
+  bodyParser.json({ inflate: false })(request, response, next);
+}

package/src/modules/checkout/api/frontStore/removeCartItem/removeItem.js

@@ -0,0 +1,33 @@
+const { getCartByUUID } = require("../../../services/getCartByUUID");
+const { saveCart } = require("../../../services/saveCart");
+
+module.exports = async (request, response, delegate, next) => {
+  try {
+    const { cartId, itemId } = request.body;
+    const cart = await getCartByUUID(cartId);
+    if (!cart) {
+      response.status(400).send({
+        message: "Invalid cart ID",
+        success: false,
+      });
+      return;
+    }
+
+    const item = await cart.removeItem(itemId);
+    await saveCart(cart);
+    response.$body = {
+      data: {
+        item: item.export()
+      },
+      success: true,
+      message: `Product ${item.getData('product_name')} was removed from cart successfully`
+    };
+  } catch (error) {
+    response.$body = {
+      data: {},
+      success: false,
+      message: error.message
+    };
+  }
+  next();
+};

package/src/modules/checkout/api/frontStore/removeCartItem/route

@@ -0,0 +1,2 @@
+DELETE
+/cart/items

package/src/modules/checkout/bootstrap.js

@@ -0,0 +1,29 @@
+const { request } = require('express');
+const { getContextValue } = require('../graphql/services/contextHelper');
+const { getCartByUUID } = require('./services/getCartByUUID');
+
+module.exports = () => {
+  /**
+   * This method get the current cart object
+   * It requires a jwt token must be available, else it will return null
+   * If this function is called with a cartId, it will return the cart by that id. Else it will return the cart by the token payload
+   * @returns {Promise<Cart>}
+   * @returns {Promise<null>}
+  */
+  request.getCart = async function getCart(uuid) {
+    this.locals = this.locals || {};
+    if (this.locals?.cart) {
+      return this.locals.cart;
+    }
+    if (uuid) {
+      this.locals.cart = await getCartByUUID(uuid);
+    } else {
+      const id = getContextValue(this, 'cartId');
+      if (id) {
+        this.locals.cart = await getCartByUUID(id);
+      }
+    }
+
+    return this.locals.cart || null;
+  }
+}

package/src/modules/checkout/components/admin/orderEdit/Shipment.js

@@ -0,0 +1,222 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+import { Card } from '../../../../cms/components/admin/Card';
+
+function Status({ status }) {
+  return (
+    <td>
+      <span className={`badge badge-${status.badge}`}>
+        {' '}
+        {status.name}
+      </span>
+    </td>
+  );
+}
+
+Status.propTypes = {
+  status: PropTypes.shape({
+    badge: PropTypes.string,
+    name: PropTypes.string
+  }).isRequired
+};
+
+function Note({ note }) {
+  return (
+    <td>
+      <i>{note}</i>
+    </td>
+  );
+}
+
+Note.propTypes = {
+  note: PropTypes.string
+};
+
+Note.defaultProps = {
+  note: ''
+};
+
+function Weight({ weight }) {
+  return <td>{weight.text}</td>;
+}
+
+Weight.propTypes = {
+  weight: PropTypes.shape({
+    text: PropTypes.string
+  }).isRequired
+};
+
+function Actions({ status, startShipUrl, completeShipUrl }) {
+  const startShipment = (e) => {
+    e.preventDefault();
+    fetch(
+      startShipUrl,
+      false,
+      'GET',
+      {},
+      null,
+      () => {
+        // eslint-disable-next-line no-restricted-globals
+        location.reload();
+      }
+    );
+  };
+
+  const completeShipment = (e) => {
+    e.preventDefault();
+    fetch(
+      completeShipUrl,
+      false,
+      'GET',
+      {},
+      null,
+      () => {
+        // eslint-disable-next-line no-restricted-globals
+        location.reload();
+      }
+    );
+  };
+  return (
+    <td>
+      {status === 'pending' && <a href="#" onClick={(e) => startShipment(e)}><span>Start shipment</span></a>}
+      {status === 'delivering' && <a href="#" onClick={(e) => completeShipment(e)}><span>Complete shipment</span></a>}
+    </td>
+  );
+}
+
+Actions.propTypes = {
+  completeShipUrl: PropTypes.string.isRequired,
+  startShipUrl: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired
+};
+
+export default function Shipment({ order: { orderId, shippingNote, shippingMethod, shippingMethodName, shipmentStatus, totalWeight, grandTotal }, startShipUrl, completeShipUrl }) {
+  return (
+    <Card title="Shipment">
+      <Card.Session>
+        <table className="table table-bordered">
+          <thead>
+            <tr>
+              <Area
+                id="orderShipmentBlockInfoHeader"
+                orderId={orderId}
+                method={shippingMethod}
+                shippingNote={shippingNote}
+                methodName={shippingMethodName}
+                grandTotal={grandTotal}
+                weight={totalWeight}
+                status={shipmentStatus}
+                noOuter
+                coreComponents={[
+                  {
+                    component: { default: 'th' },
+                    props: { children: <span>Status</span> },
+                    sortOrder: 10,
+                    id: 'shipment_status_header'
+                  },
+                  {
+                    component: { default: 'th' },
+                    props: { children: <span>Method</span> },
+                    sortOrder: 20,
+                    id: 'shipment_method_header'
+                  },
+                  {
+                    component: { default: 'th' },
+                    props: { children: <span>Total weight</span> },
+                    sortOrder: 30,
+                    id: 'shipment_weight_header'
+                  },
+                  {
+                    component: { default: 'th' },
+                    props: { children: <span>Customer notes</span> },
+                    sortOrder: 40,
+                    id: 'shipment_notes_header'
+                  },
+                  {
+                    component: { default: 'th' },
+                    props: { children: <span>Actions</span> },
+                    sortOrder: 50,
+                    id: 'shipment_action_header'
+                  }
+                ]}
+              />
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <Area
+                id="orderShipmentInfoRow"
+                orderId={orderId}
+                method={shippingMethod}
+                shippingNote={shippingNote}
+                methodName={shippingMethodName}
+                grandTotal={grandTotal}
+                weight={totalWeight}
+                status={shipmentStatus}
+                noOuter
+                coreComponents={[
+                  {
+                    component: { default: Status },
+                    props: { status: shipmentStatus },
+                    sortOrder: 10,
+                    id: 'order_shipment_status'
+                  },
+                  {
+                    component: { default: 'td' },
+                    props: { children: <span>{shippingMethodName}</span> },
+                    sortOrder: 20,
+                    id: 'order_shipment_method'
+                  },
+                  {
+                    component: { default: Weight },
+                    props: { weight: totalWeight },
+                    sortOrder: 30,
+                    id: 'order_shipment_weight'
+                  },
+                  {
+                    component: { default: Note },
+                    props: { note: shippingNote },
+                    sortOrder: 40,
+                    id: 'order_shipment_note'
+                  },
+                  {
+                    component: { default: Actions },
+                    props: { status: shipmentStatus, startShipUrl, completeShipUrl },
+                    sortOrder: 50,
+                    id: 'order_shipment_action'
+                  }
+                ]}
+              />
+            </tr>
+          </tbody>
+        </table>
+      </Card.Session>
+    </Card>
+  );
+}
+
+Shipment.propTypes = {
+  completeShipUrl: PropTypes.string.isRequired,
+  startShipUrl: PropTypes.string.isRequired
+};
+
+export const layout = `
+  query Query {
+    order(id: getContextValue("orderId")) {
+      orderId
+      shippingNote
+      shippingMethod
+      shippingMethodName
+      shipmentStatus
+      totalWeight
+      grandTotal {
+        value
+        text
+      }
+    }
+    shipmentStatusList
+    startShipUrl: url(routeId: )
+    completeShipUrl
+  }
+`

package/src/modules/checkout/components/frontStore/checkout/CheckoutButton.js

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function CheckoutButton({ action, cartId }) {
+  const onClick = (e) => {
+    e.preventDefault();
+    // eslint-disable-next-line no-undef
+    Fetch(action, false, 'POST', { cartId });
+  };
+
+  return (
+    <tr>
+      <td />
+      <td>
+        <div className="checkout-button">
+          <a href="#" onClick={(e) => onClick(e)} className="btn btn-success"><span>Place order</span></a>
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+CheckoutButton.propTypes = {
+  action: PropTypes.string.isRequired,
+  cartId: PropTypes.string.isRequired
+};

package/src/modules/checkout/components/frontStore/checkout/StepTitle.js

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+function Title({ step }) {
+  return (
+    <div className="flex space-x-1 step-title mb-1 mt-1">
+      {step.isCompleted === true && (
+        <svg className="self-center" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+          <polyline points="22 4 12 14.01 9 11.01" />
+        </svg>
+      )}
+      {step.isCompleted === false && (
+        <svg className="self-center" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="10" />
+        </svg>
+      )}
+      <h3 className="self-center">{step.title}</h3>
+    </div>
+  );
+}
+
+Title.propTypes = {
+  step: PropTypes.shape({
+    isCompleted: PropTypes.bool,
+    title: PropTypes.string
+  }).isRequired
+};
+
+export { Title };

package/src/modules/checkout/components/frontStore/checkout/address/AddressBook.js

@@ -0,0 +1,82 @@
+import AddressSummary from '../../../customer/address/address_summary';
+
+function Address({
+  address, cartId, addressType = 'shipping', action, setNeedSelectAddress
+}) {
+  const cart = ReactRedux.useSelector((state) => _.get(state, 'appState.cart'));
+  const dispatch = ReactRedux.useDispatch();
+  const onComplete = (response) => {
+    const path = addressType === 'shipping' ? 'add_checkout_shipping_address' : 'add_checkout_billing_address';
+    if (_.get(response, `${path}.status`) === true) {
+      setNeedSelectAddress(false);
+      if (addressType === 'shipping') {
+        dispatch({
+          type: ADD_APP_STATE,
+          payload: {
+            appState: {
+              cart: {
+                ...cart,
+                shippingAddress: address
+              }
+            }
+          }
+        });
+      } else {
+        dispatch({
+          type: ADD_APP_STATE,
+          payload: {
+            appState: {
+              cart: {
+                ...cart,
+                billingAddress: address
+              }
+            }
+          }
+        });
+      }
+    } else {
+      dispatch({ type: ADD_ALERT, payload: { alerts: [{ id: `checkout_${addressType}_address_error`, message: _.get(response, `${path}.message`), type: 'error' }] } });
+    }
+  };
+
+  const onError = () => {
+    dispatch({ type: ADD_ALERT, payload: { alerts: [{ id: `checkout_${addressType}_address_error`, message: 'Something wrong. Please try again', type: 'error' }] } });
+  };
+
+  const onClick = (e) => {
+    e.preventDefault();
+    const formData = new FormData();
+    for (const key in address) {
+      if (address.hasOwnProperty(key)) {
+        if (address[key] !== null && key !== 'customer_address_id' && key !== 'delete_url' && key !== 'update_url') { formData.append(`variables[address][${key}]`, address[key]); }
+      }
+    }
+    formData.append('variables[cartId]', cartId);
+
+    Fetch(action, false, 'POST', formData, null, onComplete, onError);
+  };
+
+  return <AddressSummary address={address} />;
+}
+
+export default function CheckoutAddressBook({
+  addresses = [], cartId, addressType = 'shipping', action, areaProps
+}) {
+  if (addresses.length === 0 || areaProps.needSelectAddress === false) { return null; }
+
+  return (
+    <div className="checkout-address-book">
+      <h3>Address book</h3>
+      {addresses.map((a, i) => (
+        <Address
+          address={a}
+          key={i}
+          cartId={cartId}
+          addressType={addressType}
+          action={action}
+          setNeedSelectAddress={areaProps.setNeedSelectAddress}
+        />
+      ))}
+    </div>
+  );
+}

package/src/modules/checkout/components/frontStore/checkout/address/NewBillingAddressForm.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { toast } from 'react-toastify';
+import { useAppState, useAppDispatch } from '../../../../../../lib/context/app';
+import { get } from '../../../../../../lib/util/get';
+import AddressForm from '../../../../../customer/views/frontStore/address/addressForm';
+
+export default function BillingAddressForm(props) {
+  const context = useAppState();
+  const dispatch = useAppDispatch();
+  const cart = get(context, 'cart', {});
+  const onSuccess = (response) => {
+    if (get(response, 'success') === true) {
+      props.areaProps.setNeedSelectAddress(false);
+      dispatch({ ...context, cart: { cart, billingAddress: response.data.address } });
+    } else {
+      toast.error(get(response, 'message', 'Failed!'));
+    }
+  };
+
+  const onError = () => {
+    dispatch({ type: ADD_ALERT, payload: { alerts: [{ id: 'checkout_billing_address_error', message: 'Something wrong. Please try again', type: 'error' }] } });
+  };
+
+  if (props.areaProps.needSelectAddress === false) { return null; }
+  return (
+    <div className="uk-width-1-1">
+      <div><strong>New address</strong></div>
+      <AddressForm
+        action={_.get(props, 'action')}
+        countries={_.get(props, 'countries')}
+        onSuccess={onSuccess}
+        onError={onError}
+      />
+    </div>
+  );
+}

package/src/modules/checkout/components/frontStore/checkout/address/NewShippingAddressForm.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { toast } from 'react-toastify';
+import { useAppState, useAppDispatch } from '../../../../../../lib/context/app';
+import { get } from '../../../../../../lib/util/get';
+import AddressForm from '../../../../../customer/views/frontStore/address/addressForm';
+
+export default function ShippingAddressForm(props) {
+  const context = useAppState();
+  const dispatch = useAppDispatch();
+  const cart = get(context, 'cart', {});
+
+  const onSuccess = (response) => {
+    if (get(response, 'success') === true) {
+      props.areaProps.setNeedSelectAddress(false);
+      dispatch({ ...context, cart: { ...cart, shippingAddress: response.data.address } });
+    } else {
+      toast.error(get(response, 'message', 'Failed!'));
+    }
+  };
+
+  const onError = () => {
+    // dispatch({ 'type': ADD_ALERT, 'payload': { alerts: [{ id: "checkout_shipping_address_error", message: 'Something wrong. Please try again', type: "error" }] } });
+  };
+
+  if (props.areaProps.needSelectAddress === false) { return null; }
+
+  return (
+    <div>
+      <AddressForm
+        id="shippingNewAddressForm"
+        action={get(props, 'action')}
+        countries={get(props, 'countries')}
+        onSuccess={onSuccess}
+        onError={onError}
+      />
+    </div>
+  );
+}