@evershop/evershop 1.0.0-beta

package/src/modules/checkout/pages/admin/dashboard/Statistic.js

@@ -0,0 +1,100 @@
+import PropTypes from 'prop-types';
+import {
+  XAxis, YAxis, Tooltip, AreaChart, Area
+} from 'recharts';
+import React, { useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
+import { Card } from '../../../../cms/components/admin/Card';
+import './Statistic.scss';
+
+export default function SaleStatistic({ api }) {
+  const [data, setData] = useState([]);
+  const [period, setPeriod] = useState('monthly');
+  const [fetching, setFetching] = useState(true);
+
+  useEffect(() => {
+    if (window !== undefined) {
+      fetch(api.replace('monthly', period).replace('weekly', period).replace('daily', period), {
+        method: 'POST', // or 'PUT'
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+      })
+        .then((response) => response.json())
+        .then((json) => {
+          setData(json);
+          setFetching(false);
+        })
+        .catch((error) => {
+          toast.error(error.message);
+        });
+    }
+  }, [period]);
+
+  if (fetching) {
+    return <Card
+      title="Sale Statistic"
+    >
+      <div className='skeleton-wrapper-statistic'>
+        <div class="skeleton"></div>
+      </div>
+    </Card>
+
+  } else {
+    return (
+      <Card
+        title="Sale Statistic"
+        actions={[
+          {
+            name: 'Daily',
+            onAction: () => setPeriod('daily')
+          },
+          {
+            name: 'Weekly',
+            onAction: () => setPeriod('weekly')
+          },
+          {
+            name: 'Monthly',
+            onAction: () => setPeriod('monthly')
+          }
+        ]}
+      >
+        <Card.Session>
+          {data.length === 0 ? (null) : (
+            <AreaChart
+              width={580}
+              height={300}
+              data={data}
+              margin={{
+                top: 5, right: 0, left: -25, bottom: 5
+              }}
+              id="asdasd"
+            >
+              <XAxis dataKey="time" />
+              <YAxis />
+              <Tooltip />
+              <Area type="monotone" dataKey="value" stackId="1" stroke="#8884d8" fill="#8884d8" />
+              <Area type="monotone" dataKey="count" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
+            </AreaChart>
+          )}
+        </Card.Session>
+      </Card>
+    );
+  }
+}
+
+SaleStatistic.propTypes = {
+  api: PropTypes.string.isRequired
+};
+
+export const layout = {
+  areaId: 'leftSide',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    api: url(routeId: "salestatistic", params: [{key: "period", value: "weekly"}])
+  }
+`

package/src/modules/checkout/pages/admin/dashboard/Statistic.scss

@@ -0,0 +1,22 @@
+.skeleton-wrapper-statistic{
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding-bottom: 20px;
+  .skeleton:empty {
+      width: 580px;
+      height: 300px;
+      cursor: progress;
+      background:
+        linear-gradient(0.25turn, transparent, #fff, transparent),
+        linear-gradient(#eee, #eee);
+      background-repeat: no-repeat;
+      animation: loading 1.5s infinite;
+    }
+  
+    @keyframes loading {
+      to {
+        background-position: 315px 0, 0 0, 0 190px, 50px 195px;
+      }
+    }
+}

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

@@ -0,0 +1,91 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import { DateTime } from 'luxon';
+import './Activities.scss';
+
+export default function Activities({ order: { activities = [] } }) {
+  const dailyActivities = [];
+  activities.forEach((element) => {
+    const current = dailyActivities[dailyActivities.length - 1];
+    if (!current) {
+      dailyActivities.push({
+        time: element.createdAt.value,
+        date: element.createdAt.date,
+        activities: [
+          {
+            comment: element.comment,
+            customerNotified: element.customerNotified,
+            time: element.createdAt.time
+          }
+        ]
+      });
+    } else if (DateTime.fromSQL(element.createdAt.value).startOf("day") === DateTime.fromSQL(current.time).startOf("day")) {
+      current.activities.push(
+        {
+          comment: element.comment,
+          customerNotified: element.customerNotified,
+          time: element.createdAt.time
+        }
+      );
+    } else {
+      dailyActivities.push({
+        date: element.createdAt.value,
+        date: element.createdAt.date,
+        activities: [
+          {
+            comment: element.comment,
+            customerNotified: element.customerNotified,
+            time: element.createdAt.time
+          }
+        ]
+      });
+    }
+  });
+
+  return (
+    <div className="order-activities">
+      <h3 className="title">Activities</h3>
+      <ul>
+        {dailyActivities.map((group, i) => (
+          <li key={i} className="group">
+            <span>{group.date}</span>
+            <ul>
+              {group.activities.map((a, k) => (
+                <li key={k} className="flex items-center">
+                  <span className="dot" />
+                  <div className="comment">
+                    <span>{a.comment}</span>
+                    {parseInt(a.customerNotified, 10) === 1 && <span className="customer-notified">Customer was notified</span>}
+                  </div>
+                  <span className="time">{a.time}</span>
+                </li>
+              ))}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export const layout = {
+  areaId: 'leftSide',
+  sortOrder: 30
+}
+
+export const query = `
+  query Query {
+    order(id: getContextValue("orderId")) {
+      activities {
+        comment
+        customerNotified
+        createdAt {
+          value
+          timezone
+          date: text(format: "LLL dd")
+          time: text(format: "t")
+        }
+      }
+    }
+  }
+`

package/src/modules/checkout/pages/admin/orderEdit/Activities.scss

@@ -0,0 +1,59 @@
+.order-activities {
+    margin-top: 2rem;
+    h3.title {
+        font-size: 1.6rem;
+        padding-bottom: 2rem;
+        border-bottom: 1px solid var(--divider);
+        font-weight: 600;
+    }
+    span.dot {
+        display: block;
+        width: 1.3rem;
+        height: 1.3rem;
+        background-color: var(--border);
+        border-radius: 100%;
+        z-index: 51;
+        border: 2px solid white;
+    }
+    div.comment {
+        flex: 1 1 auto;
+        padding: 0 1.5rem;
+    }
+    .customer-notified {
+        display: block;
+        color: var(--border);
+        font-style: italic;
+    }
+    span.time {
+        color: var(--border);
+    }
+    li.group {
+        margin-top: 5rem;
+        :first-child {
+            margin-top: 0;
+        }
+        > span {
+            text-transform: uppercase;
+            padding-left: 2.8rem;
+            color: var(--border);
+        }
+        ul {
+            margin-top: 2rem;
+        }
+    }
+    > ul {
+        position: relative;
+        padding: 2rem 0;
+        margin-top: 2rem;
+    }
+    > ul::after {
+        content: "";
+        position: absolute;
+        display: block;
+        height: 100%;
+        width: 3px;
+        top: 0;
+        left: calc(0.65rem - 1.5px);
+        background-color: var(--divider);
+    }
+}

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Card } from '../../../../cms/components/admin/Card';
+
+export default function OrderInfo(
+  { order: {
+    shippingAddress,
+    billingAddress,
+    customerFullName,
+    customerEmail,
+    customerUrl
+  } }
+) {
+  return (
+    <Card title="Customer">
+      <Card.Session>
+        {customerUrl && <a href={customerUrl} className="text-interactive hover:underline block">{customerFullName}</a>}
+        {!customerUrl && <span>{customerEmail} (Guest Checkout)</span>}
+      </Card.Session>
+      <Card.Session title="Contact information">
+        <div><a href="#" className="text-interactive hover:underline">{customerEmail}</a></div>
+        <div><span>{shippingAddress.telephone}</span></div>
+      </Card.Session>
+      <Card.Session title="Shipping Address">
+        <div><span>{shippingAddress.fullName}</span></div>
+        <div><span>{shippingAddress.address1}</span></div>
+        <div>
+          <span>{`${shippingAddress.postcode}, ${shippingAddress.city}`}</span>
+        </div>
+        <div>
+          <span>{`${shippingAddress.province.name}, ${shippingAddress.country.name}`}</span>
+        </div>
+        <div><span>{shippingAddress.telephone}</span></div>
+      </Card.Session>
+      <Card.Session title="Billing address">
+        <div><span>{billingAddress.fullName}</span></div>
+        <div><span>{billingAddress.address1}</span></div>
+        <div>
+          <span>{`${billingAddress.postcode}, ${billingAddress.city}`}</span>
+        </div>
+        <div>
+          <span>{`${billingAddress.province.name}, ${billingAddress.country.name}`}</span>
+        </div>
+        <div><span>{billingAddress.telephone}</span></div>
+      </Card.Session>
+    </Card>
+  );
+}
+
+export const layout = {
+  areaId: 'rightSide',
+  sortOrder: 15
+}
+
+export const query = `
+  query Query {
+    order(id: getContextValue("orderId")) {
+      customerFullName
+      customerEmail
+      customerUrl
+      shippingAddress {
+        fullName
+        city
+        postcode
+        telephone
+        province {
+          code
+          name
+        }
+        country {
+          code
+          name
+        }
+      }
+      billingAddress {
+        fullName
+        city
+        postcode
+        telephone
+        province {
+          code
+          name
+        }
+        country {
+          code
+          name
+        }
+      }
+    }
+  }
+`

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+import { Card } from '../../../../cms/components/admin/Card';
+
+export default function CustomerNotes({ order: { shippingNote } }) {
+  return (
+    <Card title="Customer notes">
+      <Card.Session>
+        <Area
+          id="orderEditCustomerNotes"
+          coreComponents={[
+            {
+              component: {
+                // eslint-disable-next-line react/no-unstable-nested-components
+                default: () => <div>{shippingNote || <span className="text-border">No notes from customer</span>}</div>
+              },
+              props: {
+              },
+              sortOrder: 10,
+              id: 'title'
+            }
+          ]}
+          noOuter
+        />
+      </Card.Session>
+    </Card>
+  );
+}
+
+export const layout = {
+  areaId: 'rightSide',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    order(id: getContextValue("orderId")) {
+      shippingNote
+    }
+  }
+`