@evershop/evershop 1.0.0-beta

package/src/modules/checkout/pages/admin/orderEdit/ShipmentStatus.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Badge from '../../../../../lib/components/Badge';
+
+export default function ShipmentStatus({ order: { shipmentStatus } }) {
+  if (shipmentStatus) {
+    return <Badge variant={shipmentStatus.badge} title={shipmentStatus.name} progress={shipmentStatus.progress} />;
+  } else {
+    return null;
+  }
+}
+
+export const layout = {
+  areaId: 'pageHeadingLeft',
+  sortOrder: 20
+}
+
+export const query = `
+  query Query {
+    order(id: getContextValue("orderId")) {
+      shipmentStatus {
+        code
+        badge
+        progress
+        name
+      }
+    }
+  }
+`

package/src/modules/checkout/pages/admin/orderEdit/index.js

@@ -0,0 +1,28 @@
+const { select } = require('@evershop/mysql-query-builder');
+const { pool } = require('../../../../../lib/mysql/connection');
+const { setContextValue } = require('../../../../graphql/services/contextHelper');
+
+module.exports = async (request, response, delegate, next) => {
+  try {
+    const query = select();
+    query.from('order')
+    query.andWhere('order.`uuid`', '=', request.params.id);
+    const order = await query.load(pool);
+
+    if (order === null) {
+      console.log('order not found');
+      response.status(404);
+      next();
+    } else {
+      setContextValue(request, 'orderId', order.uuid);
+      setContextValue(request, 'orderCurrency', order.currency);
+      setContextValue(request, 'pageInfo', {
+        title: `Order #${order.order_number}`,
+        description: `Order #${order.order_number}`,
+      });
+      next();
+    }
+  } catch (e) {
+    next(e);
+  }
+};

package/src/modules/checkout/pages/admin/orderEdit/payment/Discount.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function Discount({ discount, code }) {
+  return (
+    <div className="summary-row">
+      <span>Discount</span>
+      <div>
+        <div>{code}</div>
+        <div>{discount}</div>
+      </div>
+    </div>
+  );
+}
+
+Discount.propTypes = {
+  code: PropTypes.string,
+  discount: PropTypes.number
+};
+
+Discount.defaultProps = {
+  code: undefined,
+  discount: 0
+};

package/src/modules/checkout/pages/admin/orderEdit/payment/Shipping.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function Shipping({ method, cost }) {
+  return (
+    <div className="summary-row">
+      <span>Shipping</span>
+      <div>
+        <div>{method}</div>
+        <div>{cost}</div>
+      </div>
+    </div>
+  );
+}
+
+
+Shipping.propTypes = {
+  cost: PropTypes.string.isRequired,
+  method: PropTypes.string.isRequired
+};

package/src/modules/checkout/pages/admin/orderEdit/payment/SubTotal.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function SubTotal({ count, total }) {
+  return (
+    <div className="summary-row">
+      <span>Subtotal</span>
+      <div>
+        <div>
+          {count}
+          {' '}
+          items
+        </div>
+        <div>{total}</div>
+      </div>
+    </div>
+  );
+}
+
+SubTotal.propTypes = {
+  count: PropTypes.number.isRequired,
+  total: PropTypes.string.isRequired
+};

package/src/modules/checkout/pages/admin/orderEdit/payment/Tax.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function Tax({ taxClass, amount }) {
+  return (
+    <div className="summary-row">
+      <span>Tax</span>
+      <div>
+        <div>{taxClass}</div>
+        <div>{amount}</div>
+      </div>
+    </div>
+  );
+}
+
+Tax.propTypes = {
+  amount: PropTypes.string.isRequired,
+  taxClass: PropTypes.string.isRequired
+};

package/src/modules/checkout/pages/admin/orderEdit/payment/Total.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function Total({ total }) {
+  return (
+    <div className="summary-row">
+      <span>Total</span>
+      <div>
+        <div>{total}</div>
+      </div>
+    </div>
+  );
+}
+
+Total.propTypes = {
+  total: PropTypes.string.isRequired
+};

package/src/modules/checkout/pages/admin/orderEdit/payment/Transactions.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function Transactions({ transactions }) {
+  let paidAmount = '';
+  transactions.forEach(transaction => {
+    if (transaction.paymentAction.toUpperCase() === 'CAPTURE') {
+      paidAmount = transaction.amount.text; // TODO: How about partial captures?
+    }
+  });
+
+  return (
+    <div className="flex justify-between">
+      <div className="self-center">
+        <span>Paid by customer</span>
+      </div>
+      <div className="self-center">
+        <span>{paidAmount ? paidAmount : 0}</span>
+      </div>
+    </div>
+  );
+}
+
+Transactions.propTypes = {
+  transactions: PropTypes.arrayOf(PropTypes.shape({
+    amount: PropTypes.shape({
+      text: PropTypes.string.isRequired,
+      value: PropTypes.number.isRequired
+    }),
+    createdAt: PropTypes.string.isRequired,
+    transactionType: PropTypes.string.isRequired,
+    paymentAction: PropTypes.string.isRequired
+  }))
+};
+
+Transactions.defaultProps = {
+  transactions: []
+};

package/src/modules/checkout/pages/admin/orderEdit/route

@@ -0,0 +1,2 @@
+GET
+/order/edit/:id

package/src/modules/checkout/pages/admin/orderGrid/Grid.js

@@ -0,0 +1,245 @@
+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 { Card } from '../../../../cms/components/admin/Card';
+import BasicColumnHeader from '../../../../../lib/components/grid/headers/Basic';
+import FromToColumnHeader from '../../../../../lib/components/grid/headers/FromTo';
+import ShipmentStatusColumnHeader from './headers/ShipmentStatusColumnHeader';
+import PaymentStatusColumnHeader from './headers/PaymentStatusColumnHeader';
+import OrderNumberRow from './rows/OrderNumberRow';
+import DateRow from '../../../../../lib/components/grid/rows/DateRow';
+import BasicRow from '../../../../../lib/components/grid/rows/BasicRow';
+import ShipmentStatusRow from './rows/ShipmentStatus';
+import PaymentStatusRow from './rows/PaymentStatus';
+import TotalRow from './rows/TotalRow';
+import CreateAt from '../../../../customer/pages/admin/customerGrid/rows/CreateAt';
+
+function Actions({ selectedIds = [] }) {
+  const { openAlert, closeAlert, dispatchAlert } = useAlertContext();
+  const [isLoading, setIsLoading] = useState(false);
+  const actions = [
+    {
+      name: 'Mark as fullfilled',
+      onAction: () => {
+        openAlert({
+          heading: `Fullfill ${selectedIds.length} orders`,
+          content: <Checkbox name="notify_customer" label="Send notification to the customer" />,
+          primaryAction: {
+            title: 'Cancel',
+            onAction: closeAlert,
+            variant: 'default'
+          },
+          secondaryAction: {
+            title: 'Mark as fullfilled',
+            onAction: async () => {
+              setIsLoading(true);
+              dispatchAlert({ type: 'update', payload: { secondaryAction: { isLoading: true } } });
+              await axios.post(orderBulkFullFillUrl, { ids: selectedIds });
+              location.reload();
+            },
+            variant: 'primary',
+            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 OrderGrid({ orders: { items: orders, total, currentFilters = [] }, shipmentStatusList, paymentStatusList, orderBulkFullFillUrl }) {
+  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(orders.map((o) => o.orderId));
+                else setSelectedRows([]);
+              }}
+              />
+            </th>
+            <Area
+              className=""
+              id="orderGridHeader"
+              noOuter
+              coreComponents={
+                [
+                  {
+                    component: { default: () => <BasicColumnHeader title="Order Number" id='orderNumber' currentFilters={currentFilters} /> },
+                    sortOrder: 5
+                  },
+                  {
+                    component: { default: () => <FromToColumnHeader title='Date' id='createdAt' currentFilters={currentFilters} /> },
+                    sortOrder: 10
+                  },
+                  {
+                    component: { default: () => <BasicColumnHeader title="Customer Email" id='customerEmail' currentFilters={currentFilters} /> },
+                    sortOrder: 15
+                  },
+                  {
+                    component: { default: () => <ShipmentStatusColumnHeader title="Shipment Status" id='shipmentStatus' shipmentStatusList={shipmentStatusList} currentFilters={currentFilters} /> },
+                    sortOrder: 20
+                  },
+                  {
+                    component: { default: () => <PaymentStatusColumnHeader title="Payment Status" id='paymentStatus' paymentStatusList={paymentStatusList} currentFilters={currentFilters} /> },
+                    sortOrder: 25
+                  },
+                  {
+                    component: { default: () => <FromToColumnHeader title='Total' id='grandTotal' currentFilters={currentFilters} /> },
+                    sortOrder: 30
+                  }
+                ]
+              }
+            />
+          </tr>
+        </thead>
+        <tbody>
+          <Actions
+            ids={orders.map(() => orders.orderId)}
+            selectedIds={selectedRows}
+            setSelectedRows={setSelectedRows}
+            orderBulkFullFillUrl={orderBulkFullFillUrl}
+          />
+          {orders.map((o) => (
+            <tr key={o.orderId}>
+              <td>
+                <Checkbox
+                  isChecked={selectedRows.includes(o.orderId)}
+                  onChange={(e) => {
+                    if (e.target.checked) setSelectedRows(selectedRows.concat([o.orderId]));
+                    else setSelectedRows(selectedRows.filter((row) => row !== o.orderId));
+                  }}
+                />
+              </td>
+              <Area
+                className=""
+                id="orderGridRow"
+                row={o}
+                noOuter
+                coreComponents={
+                  [
+                    {
+                      component: { default: () => <OrderNumberRow name={o.orderNumber} editUrl={o.editUrl} /> },
+                      sortOrder: 5
+                    },
+                    {
+                      component: { default: ({ areaProps }) => <CreateAt time={o.createdAt.text} /> },
+                      sortOrder: 10
+                    },
+                    {
+                      component: { default: ({ areaProps }) => <BasicRow id='customerEmail' areaProps={areaProps} /> },
+                      sortOrder: 15
+                    },
+                    {
+                      component: { default: () => <ShipmentStatusRow status={o.shipmentStatus} /> },
+                      sortOrder: 20
+                    },
+                    {
+                      component: { default: () => <PaymentStatusRow status={o.paymentStatus} /> },
+                      sortOrder: 25
+                    },
+                    {
+                      component: { default: ({ areaProps }) => <TotalRow total={o.grandTotal.text} /> },
+                      sortOrder: 30
+                    }
+                  ]
+                }
+              />
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {orders.length === 0
+        && <div className="flex w-full justify-center">There is no order to display</div>}
+      <Pagination total={total} limit={limit} page={page} />
+    </Card>
+  );
+}
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 20
+}
+
+export const query = `
+  query Query {
+    orders (filters: getContextValue("filtersFromUrl")) {
+      items {
+        orderId
+        orderNumber
+        createdAt {
+          value
+          text
+        }
+        customerEmail
+        shipmentStatus {
+          name
+          code
+          badge
+          progress
+        }
+        paymentStatus {
+          name
+          code
+          badge
+          progress
+        }
+        grandTotal {
+          value
+          text
+        }
+        editUrl
+      }
+      total
+      currentFilters {
+        key
+        operation
+        value
+      }
+    }
+    orderBulkFullFillUrl: url(routeId: "orderBulkFullFill")
+    shipmentStatusList {
+      text: name
+      value: code
+      badge
+      progress
+    }
+    paymentStatusList {
+      text: name
+      value: code
+      badge
+      progress
+    }
+  }
+`;

package/src/modules/checkout/pages/admin/orderGrid/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="Orders" />
+}
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 10
+}

package/src/modules/checkout/pages/admin/orderGrid/headers/OrderDateColumnHeader.js

@@ -0,0 +1,66 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { DateTime } from 'luxon';
+import { Date } from '../../../../../../lib/components/form/fields/Date';
+import { useAppState } from '../../../../../../lib/context/app';
+import { get } from '../../../../../../lib/util/get';
+
+export default function FromToColumnHeader({ title, id }) {
+  const filterFrom = React.useRef(null);
+  const filterTo = React.useRef(null);
+  const context = useAppState();
+
+  const onChange = () => {
+    const url = new URL(document.location);
+    if (filterTo.current.value === '' && filterFrom.current.value === '') { url.searchParams.delete(id); } else {
+      const form = DateTime.fromISO(filterFrom.current.value).toFormat('D').toString();
+      const to = DateTime.fromISO(filterTo.current.value).toFormat('D').toString();
+      url.searchParams.set(id, `${form}-${to}`);
+    }
+    window.location.href = url.href;
+  };
+
+  React.useEffect(() => {
+    const form = DateTime.fromISO(get(context, `grid.currentFilter.${id}.from`, '')).isValid
+      ? DateTime.fromISO(get(context, `grid.currentFilter.${id}.from`, '')).toFormat('yyyy-MM-dd').toString()
+      : '';
+    const to = DateTime.fromISO(get(context, `grid.currentFilter.${id}.to`, '')).isValid
+      ? DateTime.fromISO(get(context, `grid.currentFilter.${id}.to`, '')).toFormat('yyyy-MM-dd').toString()
+      : '';
+    filterFrom.current.value = form;
+    filterTo.current.value = to;
+  }, []);
+
+  return (
+    <th>
+      <div className="table-header price-header">
+        <div className="title" style={{ marginBottom: '1rem' }}><span>{title}</span></div>
+        <div className="flex space-x-1">
+          <div style={{ width: '10rem' }}>
+            <Date
+              ref={filterFrom}
+              onChange={(e) => onChange(e)}
+              placeholder="From"
+              className="form-control"
+              name="dateFilterFrom"
+            />
+          </div>
+          <div style={{ width: '10rem' }}>
+            <Date
+              ref={filterTo}
+              onChange={(e) => onChange(e)}
+              placeholder="To"
+              className="form-control"
+              name="dateFilterTo"
+            />
+          </div>
+        </div>
+      </div>
+    </th>
+  );
+}
+
+FromToColumnHeader.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired
+};

package/src/modules/checkout/pages/admin/orderGrid/headers/PaymentStatusColumnHeader.js

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Select } from '../../../../../../lib/components/form/fields/Select';
+
+export default function PaymentStatusColumnHeader({ title, id, paymentStatusList = [], currentFilters = [] }) {
+  const [current, setCurrent] = React.useState('');
+
+  const onChange = (e) => {
+    const url = new URL(document.location);
+    if (e.target.value === 'all') { url.searchParams.delete(id); } else { url.searchParams.set(id, e.target.value); }
+    window.location.href = url.href;
+  };
+
+  React.useEffect(() => {
+    const filter = currentFilters.find((fillter) => fillter.key === id) || { value: '' };
+    setCurrent(filter.value);
+  }, []);
+
+  return (
+    <th className="column">
+      <div className="table-header payment-status-header">
+        <div className="title" style={{ marginBottom: '1rem' }}><span>{title}</span></div>
+        <div className="filter">
+          <Select
+            onChange={(e) => onChange(e)}
+            value={current}
+            options={[{ value: 'all', text: 'All' }].concat(paymentStatusList)}
+          />
+        </div>
+      </div>
+    </th>
+  );
+}
+
+PaymentStatusColumnHeader.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired
+};

package/src/modules/checkout/pages/admin/orderGrid/headers/ShipmentStatusColumnHeader.js

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Select } from '../../../../../../lib/components/form/fields/Select';
+
+export default function ShipmentStatusColumnHeader({ title, id, shipmentStatusList = [], currentFilters = [] }) {
+  const [current, setCurrent] = React.useState('');
+
+  const onChange = (e) => {
+    const url = new URL(document.location);
+    if (e.target.value === 'all') { url.searchParams.delete(id); } else { url.searchParams.set(id, e.target.value); }
+    window.location.href = url.href;
+  };
+
+  React.useEffect(() => {
+    const filter = currentFilters.find((fillter) => fillter.key === id) || { value: '' };
+    setCurrent(filter.value);
+  }, []);
+
+  return (
+    <th className="column">
+      <div className="table-header status-header">
+        <div className="title" style={{ marginBottom: '1rem' }}><span>{title}</span></div>
+        <div className="filter">
+          <Select
+            onChange={(e) => onChange(e)}
+            value={current}
+            options={[{ value: 'all', text: 'All' }].concat(shipmentStatusList)}
+          />
+        </div>
+      </div>
+    </th>
+  );
+}
+
+ShipmentStatusColumnHeader.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired
+};

package/src/modules/checkout/pages/admin/orderGrid/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: 'Orders',
+    description: 'Orders'
+  });
+  const query = request.query;
+  setContextValue(request, 'filtersFromUrl', buildFilterFromUrl(query));
+}

package/src/modules/checkout/pages/admin/orderGrid/route

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

package/src/modules/checkout/pages/admin/orderGrid/rows/OrderNumberRow.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function OrderNumberRow({ editUrl, name }) {
+  return (
+    <td>
+      <div>
+        <a className="hover:underline font-semibold" href={editUrl}>
+          #
+          {name}
+        </a>
+      </div>
+    </td>
+  );
+}
+
+OrderNumberRow.propTypes = {
+  editUrl: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired
+};

package/src/modules/checkout/pages/admin/orderGrid/rows/PaymentStatus.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Badge from '../../../../../../lib/components/Badge';
+
+export default function PaymentStatusRow({ status }) {
+  return <td><Badge title={status.name} variant={status.badge} progress={status.progress} /></td>;
+}
+
+PaymentStatusRow.propTypes = {
+  status: PropTypes.string.isRequired,
+  statusList: PropTypes.arrayOf({
+    code: PropTypes.string.isRequired,
+  }).isRequired
+};

package/src/modules/checkout/pages/admin/orderGrid/rows/ShipmentStatus.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Badge from '../../../../../../lib/components/Badge';
+
+export default function ShipmentStatusRow({ status }) {
+  return <td><Badge title={status.name} variant={status.badge} progress={status.progress} /></td>;
+}
+
+ShipmentStatusRow.propTypes = {
+  status: PropTypes.string.isRequired,
+  statusList: PropTypes.arrayOf({
+    code: PropTypes.string.isRequired,
+  }).isRequired
+};