@evershop/evershop 1.0.0-beta

package/src/modules/cms/pages/admin/cmsPageGrid/Grid.js

@@ -0,0 +1,180 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import axios from 'axios';
+import { useAppState } from '../../../../../lib/context/app';
+import Pagination from '../../../../../lib/components/grid/Pagination';
+import { useAlertContext } from '../../../../../lib/components/modal/Alert';
+import formData from '../../../../../lib/util/formData';
+import { Checkbox } from '../../../../../lib/components/form/fields/Checkbox';
+import { Card } from '../../../components/admin/Card';
+import Area from '../../../../../lib/components/Area';
+import BasicColumnHeader from '../../../../../lib/components/grid/headers/Basic';
+import StatusColumnHeader from '../../../../../lib/components/grid/headers/Status';
+import StatusRow from '../../../../../lib/components/grid/rows/StatusRow';
+import BasicRow from '../../../../../lib/components/grid/rows/BasicRow';
+import PageName from './rows/PageName';
+
+function Actions({ selectedIds = [] }) {
+  const { openAlert, closeAlert, dispatchAlert } = useAlertContext();
+  const [isLoading, setIsLoading] = useState(false);
+  const context = useAppState();
+  const actions = [
+    {
+      name: 'Delete',
+      onAction: () => {
+        openAlert({
+          heading: `Delete ${selectedIds.length} pages`,
+          content: <div>Can&apos;t be undone</div>,
+          primaryAction: {
+            title: 'Cancel',
+            onAction: closeAlert,
+            variant: 'primary'
+          },
+          secondaryAction: {
+            title: 'Delete',
+            onAction: async () => {
+              setIsLoading(true);
+              dispatchAlert({ type: 'update', payload: { secondaryAction: { isLoading: true } } });
+              const deleteUrl = context.deleteCmsPagesUrl;
+              const response = await axios.post(deleteUrl, formData().append('ids', selectedIds).build());
+              // setIsLoading(false);
+              if (response.data.success === true) {
+                window.location.href = context.currentUrl;
+                // TODO: Should display a message and delay for 1 - 2 second
+              }
+            },
+            variant: 'critical',
+            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 CMSPageGrid({ cmsPages: { items: pages, total, currentFilters = [] } }) {
+  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(pages.map((p) => p.cmsPageId));
+                else setSelectedRows([]);
+              }}
+              />
+            </th>
+            <Area
+              className=""
+              id="pageGridHeader"
+              noOuter
+              coreComponents={[
+                {
+                  component: { default: () => <BasicColumnHeader title='Name' id='name' currentFilter={currentFilters.find(f => f.key === 'name')} /> },
+                  sortOrder: 10
+                },
+                {
+                  component: { default: () => <StatusColumnHeader title='Status' id='status' currentFilter={currentFilters.find(f => f.key === 'status')} /> },
+                  sortOrder: 20
+                }
+              ]}
+            />
+          </tr>
+        </thead>
+        <tbody>
+          <Actions
+            ids={pages.map((p) => p.cmsPageId)}
+            selectedIds={selectedRows}
+            setSelectedRows={setSelectedRows}
+          />
+          {pages.map((p, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <tr key={i}>
+              <td style={{ width: '2rem' }}>
+                <Checkbox
+                  isChecked={selectedRows.includes(p.cmsPageId)}
+                  onChange={(e) => {
+                    if (e.target.checked) setSelectedRows(selectedRows.concat([p.cmsPageId]));
+                    else setSelectedRows(selectedRows.filter((row) => row !== p.cmsPageId));
+                  }}
+                />
+              </td>
+              <Area
+                className=""
+                id="pageGridRow"
+                row={p}
+                noOuter
+                coreComponents={[
+                  {
+                    component: { default: ({ areaProps }) => <PageName url={p.editUrl} name={p.name} /> },
+                    sortOrder: 10
+                  },
+                  {
+                    component: { default: ({ areaProps }) => <StatusRow id='status' areaProps={areaProps} /> },
+                    sortOrder: 20
+                  }
+                ]}
+              />
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {pages.length === 0
+        && <div className="flex w-full justify-center">There is no page to display</div>}
+      <Pagination total={total} limit={limit} page={page} />
+    </Card>
+  );
+}
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 20
+}
+
+export const query = `
+  query Query {
+    cmsPages (filters: getContextValue("filtersFromUrl")) {
+      items {
+        cmsPageId
+        name
+        status
+        content
+        layout
+        editUrl
+      }
+      total
+      currentFilters {
+        key
+        operation
+        value
+      }
+    }
+  }
+`;

package/src/modules/cms/pages/admin/cmsPageGrid/Heading.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import PageHeading from '../../../components/admin/PageHeading';
+
+export default function Heading() {
+  return <PageHeading backUrl={null} heading="Cms Pages" />
+}
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 10
+}

package/src/modules/cms/pages/admin/cmsPageGrid/NameRow.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function NameRow({ id, editUrl, areaProps: { row } }) {
+  return (
+    <td>
+      <div>
+        <a className="hover:underline font-semibold" href={row[editUrl]}>{row[id]}</a>
+      </div>
+    </td>
+  );
+}
+
+NameRow.propTypes = {
+  editUrl: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  areaProps: PropTypes.shape({
+    row: PropTypes.shape({
+
+    })
+  }).isRequired
+};

package/src/modules/cms/pages/admin/cmsPageGrid/NewPageButton.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Button from '../../../../../lib/components/form/Button';
+
+export default function NewPageButton({ newPageUrl }) {
+  return <Button url={newPageUrl} title="New Page" />
+}
+
+export const layout = {
+  areaId: 'pageHeadingRight',
+  sortOrder: 10
+}
+
+export const query = `
+  query Query {
+    newPageUrl: url(routeId: "cmsPageNew")
+  }
+`

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

package/src/modules/cms/pages/admin/cmsPageGrid/route

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

package/src/modules/cms/pages/admin/cmsPageGrid/rows/PageName.js

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

package/src/modules/cms/pages/admin/cmsPageNew/index.js

@@ -0,0 +1,8 @@
+const { setContextValue } = require("../../../../graphql/services/contextHelper")
+
+module.exports = (request, response) => {
+  setContextValue(request, 'pageInfo', {
+    title: 'Create a new cms page',
+    description: 'Create a new cms page'
+  });
+}

package/src/modules/cms/pages/admin/cmsPageNew/route

@@ -0,0 +1,2 @@
+GET
+/pages/new

package/src/modules/cms/pages/admin/dashboard/Layout.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+import './Layout.scss';
+
+export default function DashboardLayout() {
+  return (
+    <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>
+  );
+}
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 10
+}

package/src/modules/cms/pages/admin/dashboard/Layout.scss

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

package/src/modules/cms/pages/admin/dashboard/PageHeading.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import PageHeading from '../../../../cms/components/admin/PageHeading';
+
+export default function PageEditPageHeading() {
+  return <PageHeading heading={`Dashboard`} />
+}
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 5
+}

package/src/modules/cms/pages/admin/dashboard/index.js

@@ -0,0 +1,8 @@
+const { setContextValue } = require("../../../../graphql/services/contextHelper")
+
+module.exports = (request, response) => {
+  setContextValue(request, 'pageInfo', {
+    title: "Dashboard",
+    description: "dashboard"
+  })
+}

package/src/modules/cms/pages/admin/dashboard/route

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

package/src/modules/cms/pages/frontStore/all/Layout.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import Area from '../../../../../lib/components/Area';
+import './Layout.scss';
+import './tailwind.scss';
+
+export default function Layout() {
+  return (
+    <>
+      <div className="header flex justify-between">
+        <Area id="header" noOuter coreComponents={[
+          {
+            component: { default: Area },
+            props: { id: "icon-wrapper", className: "icon-wrapper flex justify-between space-x-1" },
+            sortOrder: 20
+          }
+        ]} />
+      </div>
+      <main className="content">
+        <Area id="content" className="" noOuter />
+      </main>
+      <div className="footer">
+        <div className="page-width grid grid-cols-1 md:grid-cols-2 gap-2 justify-between">
+          <div>
+            <div className="card-icons flex justify-center space-x-1 md:justify-start">
+              <div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="38"
+                  height="24"
+                  aria-labelledby="pi-visa"
+                  viewBox="0 0 38 24"
+                >
+                  <path
+                    d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
+                    opacity="0.07"
+                  />
+                  <path
+                    fill="#fff"
+                    d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"
+                  />
+                  <path
+                    fill="#142688"
+                    d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3l.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2M5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z"
+                  />
+                </svg>
+              </div>
+              <div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="38"
+                  height="24"
+                  aria-labelledby="pi-master"
+                  viewBox="0 0 38 24"
+                >
+                  <path
+                    d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
+                    opacity="0.07"
+                  />
+                  <path
+                    fill="#fff"
+                    d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"
+                  />
+                  <circle cx="15" cy="12" r="7" fill="#EB001B" />
+                  <circle cx="23" cy="12" r="7" fill="#F79E1B" />
+                  <path
+                    fill="#FF5F00"
+                    d="M22 12c0-2.4-1.2-4.5-3-5.7-1.8 1.3-3 3.4-3 5.7s1.2 4.5 3 5.7c1.8-1.2 3-3.3 3-5.7z"
+                  />
+                </svg>
+              </div>
+              <div>
+                <svg viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" width="38" height="24" role="img" aria-labelledby="pi-paypal">
+                  <title id="pi-paypal">PayPal</title>
+                  <path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z" />
+                  <path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" />
+                  <path fill="#003087" d="M23.9 8.3c.2-1 0-1.7-.6-2.3-.6-.7-1.7-1-3.1-1h-4.1c-.3 0-.5.2-.6.5L14 15.6c0 .2.1.4.3.4H17l.4-3.4 1.8-2.2 4.7-2.1z" />
+                  <path fill="#3086C8" d="M23.9 8.3l-.2.2c-.5 2.8-2.2 3.8-4.6 3.8H18c-.3 0-.5.2-.6.5l-.6 3.9-.2 1c0 .2.1.4.3.4H19c.3 0 .5-.2.5-.4v-.1l.4-2.4v-.1c0-.2.3-.4.5-.4h.3c2.1 0 3.7-.8 4.1-3.2.2-1 .1-1.8-.4-2.4-.1-.5-.3-.7-.5-.8z" />
+                  <path fill="#012169" d="M23.3 8.1c-.1-.1-.2-.1-.3-.1-.1 0-.2 0-.3-.1-.3-.1-.7-.1-1.1-.1h-3c-.1 0-.2 0-.2.1-.2.1-.3.2-.3.4l-.7 4.4v.1c0-.3.3-.5.6-.5h1.3c2.5 0 4.1-1 4.6-3.8v-.2c-.1-.1-.3-.2-.5-.2h-.1z" />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div className="self-center">
+            <div className="copyright text-center md:text-right text-textSubdued"><span>Copyright © 2020 EverShop</span></div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export const layout = {
+  areaId: "body",
+  sortOrder: 1
+};

package/src/modules/cms/pages/frontStore/all/Layout.scss

@@ -0,0 +1,248 @@
+:root {
+    --primary: #3a3a3a;
+    --secondary: #111213;
+    --surface: #111213;
+    --onSurface: #111213;
+    --interactive: #2c6ecb;
+    --critical: #d72c0d;
+    --warning: #ffc453;
+    --highlight: #5bcdda;
+    --success: #008060;
+    --decorative: #ffc96b;
+    --border: #8c9196;
+    --background: #f6f6f7fc;
+    --icon: #5c5f62;
+    --textSubdued: #6d7175;
+    --divider: #e1e3e5;
+    --text: #202223;
+    --formFieldBorder: #c9cccf;
+    --formFieldBorderShadow: #aeb4b9;
+}
+
+$font-size-sm: 1.4rem;
+$font-size-md: 1.4rem;
+$font-size-lg: 1.6rem;
+
+$line-height-sm: 1.25;
+$line-height-md: 1.5;
+$line-height-lg: 2;
+
+$font-size-base: $font-size-sm;
+$h1-font-size: $font-size-base * 2.1;
+$h2-font-size: $font-size-base * 1.9;
+$h3-font-size: $font-size-base * 1.65;
+$h4-font-size: $font-size-base * 1.45;
+$h5-font-size: $font-size-base * 1.15;
+$h6-font-size: $font-size-base;
+
+html {
+    font-size: 62.5%;
+
+    input[type="email"],
+    input[type="password"],
+    input[type="tel"],
+    input[type="text"],
+    select,
+    textarea {
+        padding: 1rem 1.2rem;
+    }
+
+    .button {
+        padding: 1rem 2rem;
+        font-weight: 400;
+        border-radius: 2px;
+    }
+}
+body {
+    color: #3a3a3a;
+}
+p {
+    margin-bottom: 1rem;
+}
+@media screen and (max-width: 767px) {
+    $font-size-base: $font-size-sm;
+    body {
+        font-size: $font-size-base;
+        line-height: $line-height-sm;
+        .h1,
+        h1 {
+            font-size: $h1-font-size;
+        }
+        .h2,
+        h2 {
+            font-size: $h2-font-size;
+        }
+        .h3,
+        h3 {
+            font-size: $h3-font-size;
+        }
+        .h4,
+        h4 {
+            font-size: $h4-font-size;
+        }
+        .h5,
+        h5 {
+            font-size: $h5-font-size;
+        }
+        .h6,
+        h6 {
+            font-size: $h6-font-size;
+        }
+    }
+}
+
+@media (min-width: 768px) and (max-width: 1535px) {
+    $font-size-base: $font-size-md;
+    $h1-font-size: $font-size-base * 2.1;
+    $h2-font-size: $font-size-base * 1.9;
+    $h3-font-size: $font-size-base * 1.65;
+    $h4-font-size: $font-size-base * 1.45;
+    $h5-font-size: $font-size-base * 1.15;
+    $h6-font-size: $font-size-base;
+
+    body {
+        font-size: $font-size-base;
+        line-height: $line-height-md;
+        .h1,
+        h1 {
+            font-size: $h1-font-size;
+        }
+        .h2,
+        h2 {
+            font-size: $h2-font-size;
+        }
+        .h3,
+        h3 {
+            font-size: $h3-font-size;
+        }
+        .h4,
+        h4 {
+            font-size: $h4-font-size;
+        }
+        .h5,
+        h5 {
+            font-size: $h5-font-size;
+        }
+        .h6,
+        h6 {
+            font-size: $h6-font-size;
+        }
+    }
+}
+
+@media (min-width: 1536px) {
+    $font-size-base: $font-size-lg;
+    $h1-font-size: $font-size-base * 2.1;
+    $h2-font-size: $font-size-base * 1.9;
+    $h3-font-size: $font-size-base * 1.65;
+    $h4-font-size: $font-size-base * 1.45;
+    $h5-font-size: $font-size-base * 1.15;
+    $h6-font-size: $font-size-base;
+
+    body {
+        font-size: $font-size-base;
+        line-height: $line-height-lg;
+        .h1,
+        h1 {
+            font-size: $h1-font-size;
+        }
+        .h2,
+        h2 {
+            font-size: $h2-font-size;
+        }
+        .h3,
+        h3 {
+            font-size: $h3-font-size;
+        }
+        .h4,
+        h4 {
+            font-size: $h4-font-size;
+        }
+        .h5,
+        h5 {
+            font-size: $h5-font-size;
+        }
+        .h6,
+        h6 {
+            font-size: $h6-font-size;
+        }
+    }
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: 600;
+}
+.wrapper .content {
+    min-height: calc(100vh - 50px);
+}
+.header {
+    padding: 2.5rem;
+    border-bottom: 1px solid #ebebeb;
+    margin-bottom: 3rem;
+    @media only screen and (min-width: 1200px) {
+        padding-left: 50px;
+        padding-right: 50px;
+    }
+}
+
+.container {
+    margin: 0 auto;
+}
+.page-width {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 22px;
+    @media screen and (min-width: 1200px) {
+        padding: 0 55px;
+    }
+}
+
+.footer {
+    background-color: #f6f6f6;
+    margin-top: 9rem;
+    padding-top: 1rem;
+    padding-block-end: 1rem;
+    border-top: 1px solid #ddd;
+    .card-icons {
+        svg {
+            height: 4rem;
+        }
+    }
+    .copyright {
+        font-size: 13px;
+    }
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+    td,
+    th {
+        border: 1px solid var(--divider);
+        padding: 0.5rem;
+        text-align: left;
+    }
+    th {
+        vertical-align: top;
+    }
+    &.listing {
+        td,
+        th {
+            border-left: 0;
+            border-right: 0;
+            padding: 1rem;
+        }
+        th {
+            border: 0;
+            padding-top: 2rem;
+            padding-bottom: 2rem;
+        }
+    }
+}
+
+button.outline{
+    outline: none;
+}