@evershop/evershop 1.1.0 → 1.2.0

package/src/modules/cms/migration/Version-1.1.1.js

@@ -0,0 +1,103 @@
+const { execute } = require('@evershop/postgres-query-builder');
+
+// eslint-disable-next-line no-multi-assign
+module.exports = exports = async (connection) => {
+  // Drop the layout column in the cms_page table
+  await execute(connection, `ALTER TABLE cms_page DROP COLUMN layout`);
+
+  const query = `
+    INSERT INTO widget (name, type, route, area, sort_order, settings, status)
+    VALUES ($1, $2, $3, $4, $5, $6, $7)
+  `;
+  const mainMenu = [
+    'Main menu',
+    'basic_menu',
+    '["all"]',
+    '["header"]',
+    1,
+    JSON.stringify({
+      menus: [
+        {
+          id: 'hanhk3km0m8nt2b',
+          // eslint-disable-next-line no-script-url
+          url: 'javascript:void(0)',
+          name: 'Shop ❤️',
+          type: 'custom',
+          // eslint-disable-next-line no-script-url
+          uuid: 'javascript:void(0)',
+          children: [
+            {
+              id: 'hanhk3km0m8nt2c',
+              url: '/men',
+              name: 'Men',
+              type: 'custom',
+              uuid: '/men'
+            },
+            {
+              id: 'hanhk3km0m8nt2d',
+              url: '/women',
+              name: 'Women',
+              type: 'custom',
+              uuid: '/women'
+            }
+          ]
+        },
+        {
+          id: 'hanhk3km0m8nt2e',
+          url: '/page/about-us',
+          name: 'About us',
+          type: 'custom',
+          uuid: '/page/about-us',
+          children: []
+        }
+      ],
+      isMain: '1',
+      className: ''
+    }),
+    true
+  ];
+
+  await connection.query(query, mainMenu);
+
+  const featuredCategories = [
+    'Featured categories',
+    'text_block',
+    '["homepage"]',
+    '["content"]',
+    10,
+    JSON.stringify({
+      text: '[{"id":"r__c13ffd49-f39e-40d7-8d67-d345c0a018c1","size":3,"columns":[{"id":"c__6dffc7a4-4378-4247-8ffd-07d956ce4939","size":1,"data":{"time":1725357550597,"blocks":[{"id":"PjJh9eW0O7","type":"header","data":{"text":"Kids shoes collection","level":3}},{"id":"CHsT6VaRCw","type":"paragraph","data":{"text":"Constructed from luxury nylons, leathers, and custom hardware, featuring sport details such as hidden breathing vents, waterproof + antimicrobial linings, and more."}},{"id":"-0lRctONo9","type":"raw","data":{"html":"<a href=\\"/kids\\" class=\\"button primary\\"><span>Shop kids</span></a>"}}],"version":"2.30.2"}},{"id":"c__ca76b2e3-65e3-4eb3-83cb-7ffdfba41208","size":1,"data":{"time":1725357550599,"blocks":[{"id":"2K_v3fp7Dd","type":"header","data":{"text":"Women shoes collection","level":3}},{"id":"XiPHWtWbZm","type":"paragraph","data":{"text":"Constructed from luxury nylons, leathers, and custom hardware, featuring sport details such as hidden breathing vents, waterproof + antimicrobial linings, and more."}},{"id":"f9KXlEkYmu","type":"raw","data":{"html":"<a href=\\"/women\\" class=\\"button primary\\"><span>Shop women</span></a>"}}],"version":"2.30.2"}},{"id":"c__2872ebd9-7f79-442b-bade-6c19d74220ef","size":1,"data":{"time":1725357550612,"blocks":[{"id":"mxTqYRjSTw","type":"header","data":{"text":"Men shoes collection","level":3}},{"id":"p-frIk8CU-","type":"paragraph","data":{"text":"Constructed from luxury nylons, leathers, and custom hardware, featuring sport details such as hidden breathing vents, waterproof + antimicrobial linings, and more."}},{"id":"AoCaoHwyWd","type":"raw","data":{"html":"<a href=\\"/men\\" class=\\"button primary\\"><span>Shop men</span></a>"}}],"version":"2.30.2"}}]}]',
+      className: 'page-width'
+    }),
+    true
+  ];
+
+  await connection.query(query, featuredCategories);
+
+  const featuredProducts = [
+    'Featured Products',
+    'collection_products',
+    '["homepage"]',
+    '["content"]',
+    20,
+    JSON.stringify({ count: 4, collection: 'homepage' }),
+    true
+  ];
+
+  await connection.query(query, featuredProducts);
+
+  const mainBanner = [
+    'Main banner',
+    'text_block',
+    '["homepage"]',
+    '["content"]',
+    5,
+    JSON.stringify({
+      text: '[{"id":"r__63dcb2ab-c2a4-40fc-a995-105bf1484b06","size":1,"columns":[{"id":"c__354832f1-6fe1-4845-8cbb-7e094082810e","size":1,"data":{"time":1725374404621,"blocks":[{"id":"KRtRWBBVvm","type":"raw","data":{"html":"&lt;div style=\\"height: 500px; margin-top: -3rem; background: linear-gradient(135deg, #aad3ff, #0056b3); display: flex; align-items: center; justify-content: center;\\"&gt;\\n  &lt;div style=\\"display: flex; align-items: center; max-width: 1200px; width: 100%; padding: 0 20px;\\"&gt;\\n    &lt;div style=\\"flex: 1; text-align: center;\\"&gt;\\n      &lt;svg width=\\"300\\" height=\\"300\\" viewBox=\\"0 0 128 146\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" style=\\"fill: #0056b3; color: #0056b3;\\"&gt;\\n        &lt;path d=\\"M32.388 18.0772L1.15175 36.1544L1.05206 72.5081L0.985596 108.895L32.4213 127.039C49.7009 137.008 63.9567 145.182 64.1228 145.182C64.289 145.182 72.8956 140.264 83.2966 134.283C93.6644 128.268 107.82 120.127 114.732 116.139L127.26 108.895V101.119V93.3102L126.529 93.7089C126.097 93.9415 111.941 102.083 95.06 111.853C78.1459 121.622 64.156 129.531 63.9567 129.498C63.724 129.431 52.5587 123.051 39.1005 115.275L14.6099 101.152V72.5746V43.9967L25.6756 37.6165C31.7234 34.1274 42.8223 27.7472 50.2991 23.4273C57.7426 19.1073 63.9899 15.585 64.1228 15.585C64.2557 15.585 72.9288 20.5362 83.3963 26.5841L113.902 43.9967L118.713 41.1657L127.26 36.1544L113.902 28.5447C103.334 22.2974 64.3554 -0.033191 64.0231 3.90721e-05C63.8237 3.90721e-05 49.568 8.14142 32.388 18.0772Z\\" fill=\\"#0056b3\\"&gt;&lt;/path&gt;\\n        &lt;path d=\\"M96.0237 54.1983C78.9434 64.0677 64.721 72.2423 64.4219 72.3088C64.0896 72.4084 55.7488 67.7562 44.8826 61.509L25.9082 50.543V58.4186L25.9414 66.2609L44.3841 76.8945C54.5193 82.743 63.1591 87.6611 63.5911 87.8272C64.2557 88.0598 68.9079 85.5011 95.5585 70.1156C112.705 60.1798 126.861 51.9719 127.027 51.839C127.16 51.7061 127.227 48.1505 127.194 43.9302L127.094 36.2541L96.0237 54.1983Z\\" fill=\\"#0056b3\\"&gt;&lt;/path&gt;\\n        &lt;path d=\\"M123.771 66.7261C121.943 67.7562 107.854 75.8976 92.4349 84.8033C77.0161 93.7089 64.289 100.986 64.1228 100.986C63.9567 100.986 55.3501 96.0683 44.9491 90.0869L26.0744 79.1874L25.9747 86.8303C25.9082 92.6788 26.0079 94.5729 26.307 94.872C26.9383 95.4369 63.7241 116.604 64.1228 116.604C64.4551 116.604 126.496 80.8821 127.027 80.4169C127.16 80.284 127.227 76.7284 127.194 72.4749L127.094 64.7987L123.771 66.7261Z\\" fill=\\"#0056b3\\"&gt;&lt;/path&gt;\\n      &lt;/svg&gt;\\n    &lt;/div&gt;\\n    \\n    &lt;div style=\\"flex: 1; text-align: left; padding: 20px;\\"&gt;\\n      <h1 style=\\"font-size: 3.5rem; color: #fff;\\">Your Heading Here</h1>\\n      &lt;p style=\\"font-size: 1.5rem; color: #fff; margin: 20px 0;\\"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies sodales mi, at ornare elit semper ac.&lt;/p&gt;\\n      &lt;a href=\\"#\\" style=\\"display: inline-block; padding: 10px 20px; background-color: #fff; color: #0056b3; text-decoration: none; border-radius: 5px; font-weight: bold;\\"&gt;SHOP NOW&lt;/a&gt;\\n    &lt;/div&gt;\\n  &lt;/div&gt;\\n&lt;/div&gt;\\n"}}],"version":"2.30.2"}}]}]',
+      className: ''
+    }),
+    true
+  ];
+
+  await connection.query(query, mainBanner);
+};

package/src/modules/cms/pages/admin/adminNotFound/NotFound.jsx

@@ -5,7 +5,7 @@ import Button from '@components/common/form/Button';
 
 function Name() {
   return (
-    <h1 className="page-name text-center mt-25 mb-15">404 Page Not Found</h1>
+    <h1 className="page-name text-center mt-10 mb-6">404 Page Not Found</h1>
   );
 }
 
@@ -13,7 +13,7 @@ function Content({ dashboardUrl }) {
   return (
     <div className="page-content">
       <div className="text-center">The page you requested does not exist.</div>
-      <div className="mt-2 text-center">
+      <div className="mt-8 text-center">
         <Button title="Back To Dashboard" url={dashboardUrl} outline />
       </div>
     </div>
@@ -26,8 +26,8 @@ Content.propTypes = {
 
 export default function NotFound({ dashboardUrl }) {
   return (
-    <div className="page-width mt-25">
-      <div className="pt-15">
+    <div className="page-width mt-10">
+      <div className="pt-6">
         <Area
           id="notfound-page"
           coreComponents={[

package/src/modules/cms/pages/admin/all/CmsMenuGroup.jsx

@@ -1,18 +1,24 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Icon from '@heroicons/react/solid/esm/DocumentIcon';
+import PageIcon from '@heroicons/react/solid/esm/DocumentIcon';
+import WidgetIcon from '@heroicons/react/solid/esm/PuzzleIcon';
 import NavigationItemGroup from '@components/admin/cms/NavigationItemGroup';
 
-export default function CmsMenuGroup({ cmsPageGrid }) {
+export default function CmsMenuGroup({ cmsPageGrid, widgetGrid }) {
   return (
     <NavigationItemGroup
       id="cmsMenuGroup"
       name="CMS"
       items={[
         {
-          Icon,
+          Icon: PageIcon,
           url: cmsPageGrid,
           title: 'Pages'
+        },
+        {
+          Icon: WidgetIcon,
+          url: widgetGrid,
+          title: 'Widgets'
         }
       ]}
     />
@@ -20,7 +26,8 @@ export default function CmsMenuGroup({ cmsPageGrid }) {
 }
 
 CmsMenuGroup.propTypes = {
-  cmsPageGrid: PropTypes.string.isRequired
+  cmsPageGrid: PropTypes.string.isRequired,
+  widgetGrid: PropTypes.string.isRequired
 };
 
 export const layout = {
@@ -31,5 +38,6 @@ export const layout = {
 export const query = `
   query Query {
     cmsPageGrid: url(routeId:"cmsPageGrid")
+    widgetGrid: url(routeId:"widgetGrid")
   }
 `;

package/src/modules/cms/pages/admin/all/Notification.scss

@@ -3,7 +3,7 @@
   -webkit-transform: translate3d(0, 0, 9999px);
   position: fixed;
   width: 380px;
-  background-color: #fff;
+  background-color: transparent;
 }
 .Toastify__toast-container--top-left {
   top: 1em;

package/src/modules/cms/pages/admin/all/search/NoResult.jsx

@@ -11,12 +11,12 @@ export function NoResult({ keyword, resourseLinks = [] }) {
         "
       </h3>
       <div>TRY OTHER RESOURCES</div>
-      <div className="grid grid-cols-2 mt-1">
+      <div className="grid grid-cols-2 mt-4">
         {resourseLinks.map((link, index) => (
           // eslint-disable-next-line react/no-array-index-key
           <div
             key={index}
-            className="flex space-x-1 justify-center items-center"
+            className="flex space-x-4 justify-center items-center"
           >
             <Dot variant="info" />
             <a href={link.url} className="text-divider hover:underline">

package/src/modules/cms/pages/admin/all/search/Results.jsx

@@ -13,7 +13,7 @@ export function Results({ keyword, results = {} }) {
       </h3>
       <div className="item-list">
         {products.items.length > 0 && (
-          <div className="item-category flex flex-col space-x-1">
+          <div className="item-category flex flex-col space-x-4">
             <div className="result-category">Products</div>
             {products.items.map((product, index) => (
               // eslint-disable-next-line react/no-array-index-key
@@ -25,7 +25,7 @@ export function Results({ keyword, results = {} }) {
           </div>
         )}
         {customers.items.length > 0 && (
-          <div className="item-category flex flex-col space-x-1">
+          <div className="item-category flex flex-col space-x-4">
             <div className="result-category">Customers</div>
             {customers.items.map((customer, index) => (
               // eslint-disable-next-line react/no-array-index-key
@@ -37,7 +37,7 @@ export function Results({ keyword, results = {} }) {
           </div>
         )}
         {orders.items.length > 0 && (
-          <div className="item-category flex flex-col space-x-1">
+          <div className="item-category flex flex-col space-x-4">
             <div className="result-category">Orders</div>
             {orders.items.map((order, index) => (
               // eslint-disable-next-line react/no-array-index-key

package/src/modules/cms/pages/admin/cmsPageEdit+cmsPageNew/FormContent.jsx

@@ -9,15 +9,10 @@ export default function FormContent({ gridUrl }) {
   const { state } = useFormContext();
   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 className="grid gap-8 grid-cols-1">
+        <Area id="wideScreen" noOuter />
       </div>
-      <div className="form-submit-button flex border-t border-divider mt-15 pt-15 justify-between">
+      <div className="form-submit-button flex border-t border-divider mt-6 pt-6 justify-between">
         <Button
           title="Cancel"
           variant="critical"
@@ -28,7 +23,10 @@ export default function FormContent({ gridUrl }) {
         />
         <Button
           title="Save"
-          onAction={() => {
+          onAction={async () => {
+            // const editorData = await editorRef.save();
+            // console.log(editorData);
+            // return;
             document
               .getElementById('cmsPageForm')
               .dispatchEvent(

package/src/modules/cms/pages/admin/cmsPageEdit+cmsPageNew/General.jsx

@@ -4,7 +4,7 @@ import Area from '@components/common/Area';
 import { get } from '@evershop/evershop/src/lib/util/get';
 import { Field } from '@components/common/form/Field';
 import { Card } from '@components/admin/cms/Card';
-import CkeditorField from '@components/common/form/fields/Ckeditor';
+import Editor from '@components/common/form/fields/Editor';
 
 export default function General({
   page,
@@ -36,7 +36,7 @@ export default function General({
       sortOrder: 10
     },
     {
-      component: { default: CkeditorField },
+      component: { default: Editor },
       props: {
         id: 'content',
         name: 'content',
@@ -86,7 +86,7 @@ General.defaultProps = {
 };
 
 export const layout = {
-  areaId: 'leftSide',
+  areaId: 'wideScreen',
   sortOrder: 10
 };
 

package/src/modules/cms/pages/admin/cmsPageEdit+cmsPageNew/Seo.jsx

@@ -81,7 +81,7 @@ Seo.defaultProps = {
 };
 
 export const layout = {
-  areaId: 'leftSide',
+  areaId: 'wideScreen',
   sortOrder: 30
 };
 

package/src/modules/cms/pages/admin/cmsPageEdit+cmsPageNew/Status.jsx

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Toggle } from '@components/common/form/fields/Toggle';
+
+export default function Status({ cmsPage }) {
+  return (
+    <div className="form-field-container">
+      <Toggle
+        id="status"
+        name="status"
+        label="Status"
+        value={cmsPage?.status}
+      />
+    </div>
+  );
+}
+
+Status.propTypes = {
+  cmsPage: PropTypes.shape({
+    status: PropTypes.number,
+    includeInNave: PropTypes.number
+  })
+};
+
+Status.defaultProps = {
+  cmsPage: null
+};
+
+export const layout = {
+  areaId: 'pageEditGeneral',
+  sortOrder: 15
+};
+
+export const query = `
+  query Query {
+    cmsPage(id: getContextValue("cmsPageId", null)) {
+      status
+    }
+  }
+`;

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

@@ -118,7 +118,7 @@ function Actions({ pages = [], selectedIds = [] }) {
       {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">
+            <a href="#" className="font-semibold pt-3 pb-3 pl-6 pr-6">
               {selectedIds.length} selected
             </a>
             {actions.map((action) => (
@@ -128,7 +128,7 @@ function Actions({ pages = [], selectedIds = [] }) {
                   e.preventDefault();
                   action.onAction();
                 }}
-                className="font-semibold pt-075 pb-075 pl-15 pr-15 block border-l border-divider self-center"
+                className="font-semibold pt-3 pb-3 pl-6 pr-6 block border-l border-divider self-center"
               >
                 <span>{action.name}</span>
               </a>
@@ -218,7 +218,7 @@ export default function CMSPageGrid({
             }
           }
         ]}
-       />
+      />
       <table className="listing sticky">
         <thead>
           <tr>
@@ -359,7 +359,6 @@ export const query = `
         name
         status
         content
-        layout
         editUrl
         updateApi
         deleteApi

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

@@ -4,11 +4,11 @@ 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">
+    <div className="grid grid-cols-3 gap-x-8 grid-flow-row ">
+      <div className="col-span-2 grid grid-cols-1 gap-8 auto-rows-max">
         <Area id="leftSide" noOuter />
       </div>
-      <div className="col-span-1 grid grid-cols-1 gap-2 auto-rows-max">
+      <div className="col-span-1 grid grid-cols-1 gap-8 auto-rows-max">
         <Area id="rightSide" noOuter />
       </div>
     </div>

package/src/modules/cms/pages/admin/widgetEdit/WidgetForm.jsx

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { toast } from 'react-toastify';
+import Area from '@components/common/Area';
+import { Form } from '@components/common/form/Form';
+import { get } from '@evershop/evershop/src/lib/util/get';
+
+export default function WidgetForm({ action }) {
+  const id = 'widgetForm';
+  return (
+    <Form
+      method="PATCH"
+      action={action}
+      onError={() => {
+        toast.error('Something wrong. Please reload the page!');
+      }}
+      onSuccess={(response) => {
+        if (response.error) {
+          toast.error(
+            get(
+              response,
+              'error.message',
+              'Something wrong. Please reload the page!'
+            )
+          );
+        } else {
+          toast.success('Widget saved successfully!');
+        }
+      }}
+      submitBtn={false}
+      id={id}
+    >
+      <Area id={id} noOuter />
+    </Form>
+  );
+}
+
+WidgetForm.propTypes = {
+  action: PropTypes.string.isRequired
+};
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 10
+};
+
+export const query = `
+  query Query {
+    action: url(routeId: "updateWidget", params: [{key: "id", value: getContextValue("widgetUuid")}]),
+    gridUrl: url(routeId: "widgetGrid")
+  }
+`;

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

@@ -0,0 +1,36 @@
+const { select } = require('@evershop/postgres-query-builder');
+const { pool } = require('@evershop/evershop/src/lib/postgres/connection');
+const {
+  getEnabledWidgets
+} = require('@evershop/evershop/src/lib/util/getEnabledWidgets');
+const {
+  setContextValue
+} = require('../../../../graphql/services/contextHelper');
+
+module.exports = async (request, response, delegate, next) => {
+  try {
+    const query = select();
+    query.from('widget');
+    query.andWhere('widget.uuid', '=', request.params.id);
+    const widget = await query.load(pool);
+    const enabledWidgets = getEnabledWidgets();
+    if (
+      widget === null ||
+      !enabledWidgets.find((row) => row.type === widget.type)
+    ) {
+      response.status(404);
+      next();
+    } else {
+      setContextValue(request, 'type', widget.type);
+      setContextValue(request, 'widgetId', widget.widget_id);
+      setContextValue(request, 'widgetUuid', widget.uuid);
+      setContextValue(request, 'pageInfo', {
+        title: widget.name,
+        description: widget.name
+      });
+      next();
+    }
+  } catch (e) {
+    next(e);
+  }
+};

package/src/modules/cms/pages/admin/widgetEdit/route.json

@@ -0,0 +1,4 @@
+{
+  "methods": ["GET"],
+  "path": "/widgets/edit/:id"
+}

package/src/modules/cms/pages/admin/widgetEdit+widgetNew/FormContent.jsx

@@ -0,0 +1,69 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Area from '@components/common/Area';
+import Button from '@components/common/form/Button';
+import { useFormContext } from '@components/common/form/Form';
+import './FormContent.scss';
+
+export default function FormContent({ gridUrl, type }) {
+  const { state } = useFormContext();
+  return (
+    <>
+      <input type="hidden" name="type" value={type.code} />
+      <div className="grid grid-cols-3 gap-x-8 grid-flow-row ">
+        <div className="col-span-2 grid grid-cols-1 gap-8 auto-rows-max">
+          <Area id="leftSide" type={type} noOuter />
+        </div>
+        <div className="col-span-1 grid grid-cols-1 gap-8 auto-rows-max">
+          <Area id="rightSide" type={type} noOuter />
+        </div>
+      </div>
+      <div className="form-submit-button flex border-t border-divider mt-6 pt-6 justify-between">
+        <Button
+          title="Cancel"
+          variant="critical"
+          outline
+          onAction={() => {
+            window.location = gridUrl;
+          }}
+        />
+        <Button
+          title="Save"
+          onAction={() => {
+            document
+              .getElementById('widgetForm')
+              .dispatchEvent(
+                new Event('submit', { cancelable: true, bubbles: true })
+              );
+          }}
+          isLoading={state === 'submitting'}
+        />
+      </div>
+    </>
+  );
+}
+
+FormContent.propTypes = {
+  gridUrl: PropTypes.string.isRequired,
+  type: PropTypes.shape({
+    code: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired
+  }).isRequired
+};
+
+export const layout = {
+  areaId: 'widgetForm',
+  sortOrder: 10
+};
+
+export const query = `
+  query Query {
+    gridUrl: url(routeId: "widgetGrid")
+    type: widgetType(code: getContextValue('type')) {
+      code
+      description
+      settingComponent
+      defaultSetting
+    }
+  }
+`;

package/src/modules/cms/pages/admin/widgetEdit+widgetNew/FormContent.scss

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