@evershop/evershop 1.1.0 → 1.2.1

package/src/modules/cms/pages/admin/widgetGrid/NewWidgetButton.jsx

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Button from '@components/common/form/Button';
+import { useAlertContext } from '@components/common/modal/Alert';
+import WidgetTypes from '@components/admin/cms/widget/WidgetTypes';
+
+export default function NewWidgetButton({ widgetTypes }) {
+  const { openAlert, closeAlert } = useAlertContext();
+  return (
+    <Button
+      title="New Widget"
+      onAction={() => {
+        openAlert({
+          heading: `Select type`,
+          content: <WidgetTypes types={widgetTypes} />,
+          primaryAction: {
+            title: 'Cancel',
+            onAction: closeAlert,
+            variant: 'primary'
+          }
+        });
+      }}
+    />
+  );
+}
+
+NewWidgetButton.propTypes = {
+  widgetTypes: PropTypes.arrayOf(
+    PropTypes.shape({
+      code: PropTypes.string,
+      name: PropTypes.string,
+      description: PropTypes.string,
+      createWidgetUrl: PropTypes.string
+    })
+  ).isRequired
+};
+
+export const layout = {
+  areaId: 'pageHeadingRight',
+  sortOrder: 10
+};
+
+export const query = `
+  query Query {
+    widgetTypes {
+      code
+      name
+      description
+      createWidgetUrl
+    }
+  }
+`;

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

@@ -0,0 +1,15 @@
+const {
+  buildFilterFromUrl
+} = require('@evershop/evershop/src/lib/util/buildFilterFromUrl');
+const {
+  setContextValue
+} = require('../../../../graphql/services/contextHelper');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (request, response) => {
+  setContextValue(request, 'pageInfo', {
+    title: 'Widgets',
+    description: 'Widgets'
+  });
+  setContextValue(request, 'filtersFromUrl', buildFilterFromUrl(request));
+};

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

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

package/src/modules/cms/pages/admin/widgetNew/WidgetNewForm.jsx

@@ -0,0 +1,60 @@
+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 WidgetNewForm({ action }) {
+  const id = 'widgetForm';
+  return (
+    <Form
+      method="POST"
+      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!');
+          // Wait for 2 seconds to show the success message
+          setTimeout(() => {
+            // Redirect to the edit page
+            const editUrl = response.data.links.find(
+              (link) => link.rel === 'edit'
+            ).href;
+            window.location.href = editUrl;
+          }, 1500);
+        }
+      }}
+      submitBtn={false}
+      id={id}
+    >
+      <Area id={id} noOuter />
+    </Form>
+  );
+}
+
+WidgetNewForm.propTypes = {
+  action: PropTypes.string.isRequired
+};
+
+export const layout = {
+  areaId: 'content',
+  sortOrder: 10
+};
+
+export const query = `
+  query Query {
+    action: url(routeId: "createWidget")
+    gridUrl: url(routeId: "widgetGrid")
+  }
+`;

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

@@ -0,0 +1,11 @@
+const {
+  setContextValue
+} = require('../../../../graphql/services/contextHelper');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (request, response) => {
+  setContextValue(request, 'pageInfo', {
+    title: 'Create a new widget',
+    description: 'Create a new widget'
+  });
+};

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

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

package/src/modules/cms/pages/admin/widgetNew/typeValidate.js

@@ -0,0 +1,21 @@
+const {
+  getEnabledWidgets
+} = require('@evershop/evershop/src/lib/util/getEnabledWidgets');
+const { buildUrl } = require('@evershop/evershop/src/lib/router/buildUrl');
+const {
+  setContextValue
+} = require('../../../../graphql/services/contextHelper');
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (request, response, delegate, next) => {
+  const { type } = request.params;
+  const enabledWidgets = getEnabledWidgets();
+
+  if (!enabledWidgets.find((widget) => widget.type === type)) {
+    // Redirect to the widget grid if the widget type is not found
+    response.redirect(buildUrl('widgetGrid'));
+  } else {
+    setContextValue(request, 'type', type);
+    next();
+  }
+};

package/src/modules/cms/pages/frontStore/all/Breadcrumb.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 function Breadcrumb({ pageInfo: { breadcrumbs } }) {
   return breadcrumbs.length ? (
-    <div className="page-width my-2">
+    <div className="breadcrumb page-width my-8">
       {breadcrumbs.map((breadcrumb, index) =>
         index === breadcrumbs.length - 1 ? (
           <span key={index}>{breadcrumb.title}</span>

package/src/modules/cms/pages/frontStore/all/Footer.jsx

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 function Footer({ themeConfig: { copyRight } }) {
   return (
     <div className="footer__default">
-      <div className="page-width grid grid-cols-1 md:grid-cols-2 gap-2 justify-between">
+      <div className="page-width grid grid-cols-1 md:grid-cols-2 gap-8 justify-between">
         <div>
-          <div className="card-icons flex justify-center space-x-1 md:justify-start">
+          <div className="card-icons flex justify-center space-x-4 md:justify-start">
             <div>
               <svg
                 xmlns="http://www.w3.org/2000/svg"

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

@@ -8,7 +8,7 @@ export default function Layout() {
   return (
     <>
       <LoadingBar />
-      <div className="header flex justify-between">
+      <div className="header grid grid-cols-3">
         <Area
           id="header"
           noOuter
@@ -17,7 +17,7 @@ export default function Layout() {
               component: { default: Area },
               props: {
                 id: 'icon-wrapper',
-                className: 'icon-wrapper flex justify-between space-x-1'
+                className: 'icon-wrapper flex justify-end space-x-4'
               },
               sortOrder: 20
             }
@@ -25,7 +25,7 @@ export default function Layout() {
         />
       </div>
       <main className="content">
-        <Area id="content" className="" noOuter />
+        <Area id="content" noOuter />
       </main>
       <div className="footer">
         <Area id="footer" noOuter coreComponents={[]} />

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

@@ -246,3 +246,16 @@ table {
 button.outline {
   outline: none;
 }
+
+.editor__html {
+  a {
+    color: var(--interactive);
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+html .prose {
+  font-size: 100%;
+}

package/src/modules/cms/pages/frontStore/all/Logo.jsx

@@ -8,7 +8,7 @@ export default function Logo({
   }
 }) {
   return (
-    <div className="logo">
+    <div className="logo md:ml-0 flex justify-center items-center">
       {src && (
         <a href="/" className="logo-icon">
           <img src={src} alt={alt} width={width} height={height} />
@@ -66,7 +66,7 @@ Logo.defaultProps = {
 
 export const layout = {
   areaId: 'header',
-  sortOrder: 1
+  sortOrder: 10
 };
 
 export const query = `

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

@@ -1,10 +1,8 @@
 .logo {
-  display: flex;
   a.logo-icon {
     svg {
-      width: 3rem;
-      height: 3rem;
+      width: 4rem;
+      height: 4rem;
     }
-    margin-right: 0.5rem;
   }
 }

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

@@ -4,7 +4,7 @@
   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/frontStore/cmsPageView/Layout.jsx

@@ -12,9 +12,9 @@ export default function Layout() {
         <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 className="page-width grid grid-cols-1 md:grid-cols-2 gap-8 justify-between">
           <div>
-            <div className="card-icons flex justify-center space-x-1 md:justify-start">
+            <div className="card-icons flex justify-center space-x-4 md:justify-start">
               <div>
                 <svg
                   xmlns="http://www.w3.org/2000/svg"

package/src/modules/cms/pages/frontStore/cmsPageView/View.jsx

@@ -1,13 +1,15 @@
 /* eslint-disable react/no-danger */
 import PropTypes from 'prop-types';
 import React from 'react';
-import { CKEditor } from '@components/common/CKEditor';
+import Editor from '@components/common/Editor';
 
 export default function Page({ page }) {
   return (
     <div className="page-width">
-      <h1 className="text-center mb-3">{page.name}</h1>
-      <CKEditor content={page.content} />
+      <div className="prose prose-base max-w-none">
+        <h1 className="text-center">{page.name}</h1>
+        <Editor rows={page.content} />
+      </div>
     </div>
   );
 }

package/src/modules/cms/pages/frontStore/cmsPageView/index.js

@@ -1,24 +1,18 @@
-const { select } = require('@evershop/postgres-query-builder');
 const { pool } = require('@evershop/evershop/src/lib/postgres/connection');
 const {
   setContextValue
 } = require('../../../../graphql/services/contextHelper');
+const {
+  getCmsPagesBaseQuery
+} = require('../../../services/getCmsPagesBaseQuery');
 
 module.exports = async (request, response, delegate, next) => {
   try {
-    const query = select();
+    const query = getCmsPagesBaseQuery();
     query
-      .from('cms_page')
-      .leftJoin('cms_page_description')
-      .on(
-        'cms_page.cms_page_id',
-        '=',
-        'cms_page_description.cms_page_description_cms_page_id'
-      );
-
-    query.where('cms_page_description.url_key', '=', request.params.url_key);
+      .where('cms_page_description.url_key', '=', request.params.url_key)
+      .and('cms_page.status', '=', 1);
     const page = await query.load(pool);
-
     if (page === null) {
       response.status(404);
       next();

package/src/modules/cms/pages/frontStore/cmsPageView/route.json

@@ -1,4 +1,5 @@
 {
   "methods": ["GET"],
-  "path": "/page/:url_key"
+  "path": "/page/:url_key",
+  "name": "Static Page"
 }

package/src/modules/cms/pages/frontStore/homepage/route.json

@@ -1,4 +1,5 @@
 {
   "methods": ["GET"],
-  "path": "/"
+  "path": "/",
+  "name": "Home Page"
 }

package/src/modules/cms/pages/frontStore/notFound/NotFound.jsx

@@ -6,7 +6,7 @@ import { _ } from '@evershop/evershop/src/lib/locale/translate';
 
 function Name() {
   return (
-    <h1 className="page-name text-center mt-25 mb-15">
+    <h1 className="page-name text-center mt-10 mb-6">
       {_('404 Page Not Found')}
     </h1>
   );
@@ -18,7 +18,7 @@ function Content({ continueShoppingUrl }) {
       <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={_('Continue shopping')}
           url={continueShoppingUrl}
@@ -35,8 +35,8 @@ Content.propTypes = {
 
 export default function NotFound({ continueShoppingUrl }) {
   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/frontStore/notFound/route.json

@@ -1,4 +1,5 @@
 {
   "methods": ["GET"],
-  "path": "/notfound"
+  "path": "/notfound",
+  "name": "Not Found"
 }

package/src/modules/cms/pages/frontStore/staticAsset/[context]staticAssets[auth].js

@@ -1,5 +1,5 @@
 const staticMiddleware = require('@evershop/evershop/src/lib/middlewares/static');
 
-module.exports = (request, response, stack, next) => {
+module.exports = (request, response, delegate, next) => {
   staticMiddleware(request, response, next);
 };

package/src/modules/cms/services/CMSPageCollection.js

@@ -20,16 +20,16 @@ class CMSPageCollection {
     );
 
     cmsPageCollectionFilters.forEach((filter) => {
-      const check = filters.find((f) => f.key === filter.key);
-      if (check) {
-        if (filter.operation.includes(check.operation)) {
-          filter.callback(
-            this.baseQuery,
-            check.operation,
-            check.value,
-            currentFilters
-          );
-        }
+      const check = filters.find(
+        (f) => f.key === filter.key && filter.operation.includes(f.operation)
+      );
+      if (filter.key === '*' || check) {
+        filter.callback(
+          this.baseQuery,
+          check?.operation,
+          check?.value,
+          currentFilters
+        );
       }
     });
 

package/src/modules/cms/services/WidgetCollection.js

@@ -0,0 +1,62 @@
+const { camelCase } = require('@evershop/evershop/src/lib/util/camelCase');
+const { pool } = require('@evershop/evershop/src/lib/postgres/connection');
+const { getValue } = require('@evershop/evershop/src/lib/util/registry');
+
+class WidgetCollection {
+  constructor(baseQuery) {
+    this.baseQuery = baseQuery;
+  }
+
+  async init(filters = [], isAdmin = false) {
+    if (!isAdmin) {
+      this.baseQuery.andWhere('widget.status', '=', 't');
+    }
+    const currentFilters = [];
+
+    // Apply the filters
+    const widgetCollectionFilters = await getValue(
+      'widgetCollectionFilters',
+      []
+    );
+
+    widgetCollectionFilters.forEach((filter) => {
+      const check = filters.find(
+        (f) => f.key === filter.key && filter.operation.includes(f.operation)
+      );
+      if (filter.key === '*' || check) {
+        filter.callback(
+          this.baseQuery,
+          check?.operation,
+          check?.value,
+          currentFilters
+        );
+      }
+    });
+
+    // Clone the main query for getting total right before doing the paging
+    const totalQuery = this.baseQuery.clone();
+    totalQuery.select('COUNT(widget.widget_id)', 'total');
+    totalQuery.removeOrderBy();
+    totalQuery.removeLimit();
+
+    this.currentFilters = currentFilters;
+    this.totalQuery = totalQuery;
+  }
+
+  async items() {
+    const items = await this.baseQuery.execute(pool);
+    return items.map((row) => camelCase(row));
+  }
+
+  async total() {
+    // Call items to get the total
+    const total = await this.totalQuery.execute(pool);
+    return total[0].total;
+  }
+
+  currentFilters() {
+    return this.currentFilters;
+  }
+}
+
+module.exports.WidgetCollection = WidgetCollection;

package/src/modules/cms/services/getWidgetsBaseQuery.js

@@ -0,0 +1,7 @@
+const { select } = require('@evershop/postgres-query-builder');
+
+module.exports.getWidgetsBaseQuery = () => {
+  const query = select().from('widget');
+
+  return query;
+};

package/src/modules/cms/services/page/createPage.js

@@ -22,8 +22,7 @@ function validatePageDataBeforeInsert(data) {
     'name',
     'url_key',
     'content',
-    'meta_title',
-    'layout'
+    'meta_title'
   ];
   const jsonSchema = getValueSync('createPageDataJsonSchema', pageDataSchema);
   const validate = ajv.compile(jsonSchema);

package/src/modules/cms/services/page/pageDataSchema.json

@@ -5,10 +5,6 @@
       "type": ["string", "integer"],
       "enum": ["0", "1", 0, 1]
     },
-    "layout": {
-      "type": "string",
-      "enum": ["oneColumn", "twoColumnsLeft", "twoColumnsRight", "threeColumns"]
-    },
     "name": {
       "type": "string"
     },

package/src/modules/cms/services/registerDefaultWidgetCollectionFilters.js

@@ -0,0 +1,62 @@
+const {
+  OPERATION_MAP
+} = require('@evershop/evershop/src/lib/util/filterOperationMapp');
+const { getValueSync } = require('@evershop/evershop/src/lib/util/registry');
+
+module.exports = async function registerDefaultWidgetCollectionFilters() {
+  // List of default supported filters
+  const defaultFilters = [
+    {
+      key: 'name',
+      operation: ['eq', 'like'],
+      callback: (query, operation, value, currentFilters) => {
+        if (operation === 'eq') {
+          query.andWhere('widget.name', '=', value);
+        } else {
+          query.andWhere('widget.name', 'ilike', `%${value}%`);
+        }
+        currentFilters.push({
+          key: 'name',
+          operation,
+          value
+        });
+      }
+    },
+    {
+      key: 'status',
+      operation: ['eq'],
+      callback: (query, operation, value, currentFilters) => {
+        query.andWhere('widget.status', OPERATION_MAP[operation], value);
+        currentFilters.push({
+          key: 'status',
+          operation,
+          value
+        });
+      }
+    },
+    {
+      key: 'ob',
+      operation: ['eq'],
+      callback: (query, operation, value, currentFilters) => {
+        const widgetCollectionSortBy = getValueSync('widgetCollectionSortBy', {
+          name: (query) => query.orderBy('widget.name'),
+          type: (query) => query.orderBy('widget.type'),
+          area: (query) => query.orderBy('widget.area'),
+          route: (query) => query.orderBy('widget.route'),
+          status: (query) => query.orderBy('widget.status')
+        });
+
+        if (widgetCollectionSortBy[value]) {
+          widgetCollectionSortBy[value](query, operation);
+          currentFilters.push({
+            key: 'ob',
+            operation,
+            value
+          });
+        }
+      }
+    }
+  ];
+
+  return defaultFilters;
+};