@evershop/evershop 1.1.0 → 1.2.1

package/src/modules/customer/pages/admin/customerGrid/Grid.jsx

@@ -85,7 +85,7 @@ function Actions({ customers = [], 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) => (
@@ -95,7 +95,7 @@ function Actions({ customers = [], 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>
@@ -133,7 +133,7 @@ export default function CustomerGrid({
       <Card.Session
         title={
           <Form submitBtn={false}>
-            <div className="flex gap-2 justify-center items-center">
+            <div className="flex gap-8 justify-center items-center">
               <Area
                 id="customerGridFilter"
                 noOuter

package/src/modules/customer/pages/frontStore/account/AccountDetails.jsx

@@ -7,14 +7,14 @@ export default function AccountDetails({ account }) {
   return (
     <div className="account-details">
       <div className="account-details-inner">
-        <div className="grid grid-cols-1 gap-1">
-          <div className="account-details-name flex gap-1">
+        <div className="grid grid-cols-1 gap-4">
+          <div className="account-details-name flex gap-4">
             <div>
               <User width={20} height={20} />
             </div>
             <div>{account.fullName}</div>
           </div>
-          <div className="account-details-email flex gap-1">
+          <div className="account-details-email flex gap-4">
             <div>
               <EmailIcon width={20} height={20} />
             </div>

package/src/modules/customer/pages/frontStore/account/Layout.jsx

@@ -20,15 +20,15 @@ export default function Layout({ logoutUrl }) {
   return (
     <div>
       <h1 className="text-center">{_('My Account')}</h1>
-      <div className="page-width mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
+      <div className="page-width mt-12 grid grid-cols-1 md:grid-cols-3 gap-12">
         <div className="col-span-1 md:col-span-2">
-          <div className="border-b mb-1 border-textSubdued">
+          <div className="border-b mb-4 border-textSubdued">
             <h2>{_('Order History')}</h2>
           </div>
           <Area id="accountPageLeft" noOuter />
         </div>
         <div className="col-span-1">
-          <div className="border-b mb-1 flex justify-between items-center  border-textSubdued">
+          <div className="border-b mb-4 flex justify-between items-center  border-textSubdued">
             <h2>{_('Account Details')}</h2>
             <a className="text-interactive" href="#" onClick={(e) => logout(e)}>
               {_('Logout')}

package/src/modules/customer/pages/frontStore/account/OrderHistory.jsx

@@ -12,7 +12,7 @@ export default function OrderHistory({ customer: { orders = [] } }) {
         </div>
       )}
       {orders.map((order) => (
-        <div className="order-history-order border-divider py-2">
+        <div className="order-history-order border-divider py-8">
           <Order order={order} key={order.orderId} />
         </div>
       ))}

package/src/modules/customer/pages/frontStore/account/route.json

@@ -1,4 +1,5 @@
 {
   "methods": ["GET"],
-  "path": "/account"
+  "path": "/account",
+  "name": "Account page"
 }

package/src/modules/customer/pages/frontStore/login/LoginForm.jsx

@@ -19,7 +19,7 @@ export default function LoginForm({
       <div className="login-form flex justify-center items-center">
         <div className="login-form-inner">
           <h1 className="text-center">{_('Login')}</h1>
-          {error && <div className="text-critical mb-1">{error}</div>}
+          {error && <div className="text-critical mb-4">{error}</div>}
           <Form
             id="loginForm"
             action={action}
@@ -60,7 +60,7 @@ export default function LoginForm({
               ]}
             />
           </Form>
-          <div className="text-center mt-1 gap-2 flex justify-center">
+          <div className="text-center mt-4 gap-8 flex justify-center">
             <a className="text-interactive" href={registerUrl}>
               {_('Create an account')}
             </a>

package/src/modules/customer/pages/frontStore/login/route.json

@@ -1,4 +1,5 @@
 {
   "methods": ["GET"],
-  "path": "/account/login"
+  "path": "/account/login",
+  "name": "Login page"
 }

package/src/modules/customer/pages/frontStore/register/RegisterForm.jsx

@@ -16,7 +16,7 @@ export default function RegisterForm({ action, homeUrl, loginApi, loginUrl }) {
       <div className="register-form flex justify-center items-center">
         <div className="register-form-inner">
           <h1 className="text-center">{_('Create A New Account')}</h1>
-          {error && <div className="text-critical mb-1">{error}</div>}
+          {error && <div className="text-critical mb-4">{error}</div>}
           <Form
             id="registerForm"
             action={action}
@@ -99,7 +99,7 @@ export default function RegisterForm({ action, homeUrl, loginApi, loginUrl }) {
               ]}
             />
           </Form>
-          <div className="text-center mt-1">
+          <div className="text-center mt-4">
             <span>
               {_('Already have an account?')}
               <a className="text-interactive" href={loginUrl}>

package/src/modules/customer/pages/frontStore/register/route.json

@@ -1,4 +1,5 @@
 {
   "methods": ["GET"],
-  "path": "/account/register"
+  "path": "/account/register",
+  "name": "Register page"
 }

package/src/modules/customer/pages/frontStore/resetPasswordPage/ResetPasswordForm.jsx

@@ -31,7 +31,7 @@ function ResetForm({ action, onSuccess }) {
       <div className="reset-password-form flex justify-center items-center">
         <div className="reset-password-form-inner">
           <h1 className="text-center">{_('Enter your email address')}</h1>
-          {error && <div className="text-critical mb-1">{error}</div>}
+          {error && <div className="text-critical mb-4">{error}</div>}
           <Form
             id="resetPasswordForm"
             action={action}
@@ -58,7 +58,7 @@ function ResetForm({ action, onSuccess }) {
               placeholder={_('Email')}
               validationRules={['notEmpty', 'email']}
             />
-            <div className="form-submit-button flex border-t border-divider mt-1 pt-1">
+            <div className="form-submit-button flex border-t border-divider mt-4 pt-4">
               <Button
                 title={_('RESET PASSWORD')}
                 type="submit"

package/src/modules/customer/pages/frontStore/resetPasswordPage/route.json

@@ -1,4 +1,5 @@
 {
   "methods": ["GET"],
-  "path": "/account/reset-password"
+  "path": "/account/reset-password",
+  "name": "Reset password page"
 }

package/src/modules/customer/pages/frontStore/updatePasswordPage/UpdatePasswordForm.jsx

@@ -37,8 +37,8 @@ function UpdateForm({ action, onSuccess }) {
     <div className="flex justify-center items-center">
       <div className="update-password-form flex justify-center items-center">
         <div className="update-password-form-inner">
-          <h2 className="text-center mb-2">{_('Enter your new password')}</h2>
-          {error && <div className="text-critical mb-1">{error}</div>}
+          <h2 className="text-center mb-8">{_('Enter your new password')}</h2>
+          {error && <div className="text-critical mb-4">{error}</div>}
           <Form
             id="updatePasswordForm"
             action={action}
@@ -66,7 +66,7 @@ function UpdateForm({ action, onSuccess }) {
               validationRules={['notEmpty']}
             />
             <Field name="token" type="hidden" value={token} />
-            <div className="form-submit-button flex border-t border-divider mt-1 pt-1">
+            <div className="form-submit-button flex border-t border-divider mt-4 pt-4">
               <Button
                 title={_('UPDATE PASSWORD')}
                 type="submit"

package/src/modules/customer/pages/frontStore/updatePasswordPage/route.json

@@ -1,4 +1,5 @@
 {
   "methods": ["GET"],
-  "path": "/account/update-password"
+  "path": "/account/update-password",
+  "name": "Update password page"
 }

package/src/modules/customer/services/CustomerCollection.js

@@ -18,16 +18,16 @@ class CustomerCollection {
     );
 
     customerCollectionFilters.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/customer/services/CustomerGroupCollection.js

@@ -17,16 +17,16 @@ class CustomerGroupCollection {
     );
 
     customerGroupCollectionFilters.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/graphql/pages/global/[bodyParser]buildQuery[graphql].js

@@ -1,5 +1,6 @@
 const path = require('path');
 const JSON5 = require('json5');
+const uniqid = require('uniqid');
 const { readFileSync } = require('fs');
 const isDevelopmentMode = require('@evershop/evershop/src/lib/util/isDevelopmentMode');
 const isProductionMode = require('@evershop/evershop/src/lib/util/isProductionMode');
@@ -9,10 +10,18 @@ const {
 const { CONSTANTS } = require('@evershop/evershop/src/lib/helpers');
 const { getRoutes } = require('@evershop/evershop/src/lib/router/Router');
 const { error } = require('@evershop/evershop/src/lib/log/logger');
+
+const {
+  getEnabledWidgets
+} = require('@evershop/evershop/src/lib/util/getEnabledWidgets');
+const { get } = require('@evershop/evershop/src/lib/util/get');
+const {
+  loadWidgetInstances
+} = require('../../../cms/services/widget/loadWidgetInstances');
 // eslint-disable-next-line no-unused-vars
 const { getContextValue } = require('../../services/contextHelper');
 
-module.exports = (request, response) => {
+module.exports = async (request, response, delegate, next) => {
   let query;
   if (isDevelopmentMode()) {
     let route;
@@ -28,7 +37,7 @@ module.exports = (request, response) => {
     }
     const devMiddleware = route.webpackMiddleware;
     const { outputFileSystem } = devMiddleware.context;
-    const jsonWebpackStats = devMiddleware.context.stats.toJson();
+    const { jsonWebpackStats } = response.locals;
     const { outputPath } = jsonWebpackStats;
 
     query = outputFileSystem.readFileSync(
@@ -54,6 +63,8 @@ module.exports = (request, response) => {
       'utf8'
     );
   }
+  const widgetInstances = await loadWidgetInstances(request);
+  const enabledWidgets = getEnabledWidgets();
   if (query) {
     // Parse the query
     // Use regex to replace "getContextValue_'base64 encoded string'"
@@ -75,9 +86,232 @@ module.exports = (request, response) => {
     });
     try {
       const json = JSON5.parse(query);
-      // Get all variables definition and build the operation name
-      const variables = JSON5.parse(json.variables);
+      // We need to get the list of applicable widgets and remove all the queries and variable that are not used
+      let applicableWidgets = [];
+      const { currentRoute } = request;
+      if (
+        currentRoute?.isAdmin === false ||
+        ['widgetNew', 'widgetEdit'].includes(currentRoute?.id)
+      ) {
+        applicableWidgets = widgetInstances.map((widget) => {
+          const widgetSpecs = enabledWidgets.find(
+            (enabledWidget) => enabledWidget.type === widget.type
+          );
+          const componentPath = currentRoute?.isAdmin
+            ? widgetSpecs.setting_component
+            : widgetSpecs.component;
+          const componentKey = currentRoute?.isAdmin
+            ? widgetSpecs.settingComponentKey
+            : widgetSpecs.componentKey;
+          return {
+            uuid: widget.uuid,
+            type: widget.type,
+            settings: widget.settings,
+            component: componentPath,
+            componentKey
+          };
+        });
+      }
+
       let operation = 'query Query';
+      const { fragments } = json;
+      const { propsMap } = json;
+      let queryStr = '';
+      let variables;
+
+      if (applicableWidgets.length > 0) {
+        applicableWidgets.forEach((widget) => {
+          const widgetKey = widget.componentKey;
+          let widgetQuery = json.queries[widgetKey];
+          // Deep clone the widget variables
+          let widgetVariables = JSON.parse(
+            JSON.stringify(json.variables[widgetKey])
+          );
+          const regex = /\\"getWidgetSetting_([a-zA-Z0-9+/=]*)\\"/g;
+          widgetQuery = widgetQuery.replace(regex, (match, p1) => {
+            const base64 = p1;
+            const decoded = Buffer.from(base64, 'base64').toString('ascii');
+            // Accept max 2 arguments from the decoded string, the fist one is the path to the setting object (a.b.c) and the second one is the default value
+            // Get the actual value from the setting of the current widget
+            // eslint-disable-next-line
+            const path = decoded.split(',')[0];
+            const defaultValue = decoded.split(',')[1] || undefined;
+            let value = get(widget.settings, path, defaultValue);
+            // JSON sringify without adding double quotes to the property name
+            value = JSON5.stringify(value, { quote: '"' });
+            // Escape the value so we can insert it into the query
+            if (value) {
+              value = value.replace(/"/g, '\\"');
+            }
+            return value;
+          });
+          // Use regex to find if there is any variable inside the query by checking if there is any string started with `$variable_` and no special character after that. If there is a match, we will replace it with the another unique name to make it unique
+          const variableRegex = /\$variable_([a-zA-Z0-9]+)/g;
+          const variableMatch = widgetQuery.match(variableRegex);
+          const variableList = [];
+          if (variableMatch) {
+            widgetQuery = widgetQuery.replace(variableRegex, (match, p1) => {
+              const newId = `${uniqid()}`;
+              variableList.push({
+                origin: `variable_${p1}`,
+                new: `variable_${newId}`
+              });
+              // Check if p1 already exists in the variableList
+              // If it does, we will replace it with the newId
+              const test = variableList.find(
+                (variable) => variable.origin === `variable_${p1}`
+              );
+              if (test) {
+                return `$${test.new}`;
+              } else {
+                return `$variable_${newId}`;
+              }
+            });
+          }
+
+          // Now we need to process the widgetVariables.values and widgetVariables.defs
+          const widgetVariablesValues = Object.keys(
+            widgetVariables.values
+          ).reduce((acc, key) => {
+            const check = variableList.find(
+              (variable) => variable.origin === key
+            );
+            if (check) {
+              const variableRegex = /getWidgetSetting_([a-zA-Z0-9+/=]*)/g;
+              const v = widgetVariables.values[key];
+              if (typeof v === 'string') {
+                // A regext matching "getContextValue_'base64 encoded string'"
+                // Check if the value is a string and contains the getContextValue_ string
+                const variableMatch = v.match(variableRegex);
+                if (variableMatch) {
+                  // Replace the getContextValue_ string with the actual function
+                  const base64 = variableMatch[0].replace(
+                    variableRegex,
+                    (match, p1) => p1
+                  );
+                  const decoded = Buffer.from(base64, 'base64')
+                    .toString('ascii')
+                    .split(',')[0]
+                    .replace(/['"]+/g, '');
+                  // eslint-disable-next-line no-eval
+                  let actualValue;
+                  if (!decoded.trim()) {
+                    actualValue = widget.settings;
+                  } else {
+                    actualValue = get(widget.settings, decoded);
+                  }
+                  acc[check.new] = actualValue;
+                }
+              } else {
+                acc[check.new] = v;
+              }
+            }
+            return acc;
+          }, {});
+          const widgetVariablesDefs = widgetVariables.defs.reduce(
+            (acc, variable) => {
+              const check = variableList.find(
+                (v) => v.origin === variable.alias
+              );
+              if (check) {
+                acc.push({
+                  ...variable,
+                  alias: check.new
+                });
+              } else {
+                acc.push(variable);
+              }
+              return acc;
+            },
+            []
+          );
+          widgetVariables = {
+            values: widgetVariablesValues,
+            defs: widgetVariablesDefs
+          };
+          const originPropsMap = propsMap[widgetKey]; // [{origin: 'real field name', alias: 'bbbb'}, {origin: 'real field name', alias: 'ccc'}]
+          const widgetUUID = `e${widget.uuid.replace(/-/g, '')}`;
+          propsMap[widgetUUID] = [];
+          originPropsMap.forEach((prop) => {
+            const newAlias = `e${uniqid()}`;
+            widgetQuery = widgetQuery.replace(prop.alias, newAlias);
+            propsMap[widgetUUID].push({
+              origin: prop.origin,
+              alias: newAlias
+            });
+          });
+          json.queries[widgetUUID] = widgetQuery;
+          json.variables[widgetUUID] = widgetVariables;
+          // Now we merge the queries to the query as the string,
+          queryStr = Object.keys(json.queries).reduce((acc, key) => {
+            if (
+              !enabledWidgets.find(
+                (widget) =>
+                  widget.componentKey === key ||
+                  widget.settingComponentKey === key
+              )
+            ) {
+              // eslint-disable-next-line no-param-reassign
+              acc += `\n${json.queries[key]} `;
+            }
+            return acc;
+          }, '');
+
+          // Now we merge the variables
+          variables = Object.keys(json.variables).reduce(
+            (acc, key) => {
+              if (
+                !enabledWidgets.find(
+                  (widget) =>
+                    widget.componentKey === key ||
+                    widget.settingComponentKey === key
+                )
+              ) {
+                acc.values = { ...acc.values, ...json.variables[key].values };
+                acc.defs = [...acc.defs, ...json.variables[key].defs];
+              }
+              return acc;
+            },
+            { values: {}, defs: [] }
+          );
+        });
+      } else {
+        // Just delete resolvable queries and variables
+        queryStr = Object.keys(json.queries).reduce((acc, key) => {
+          if (
+            enabledWidgets.find(
+              (widget) =>
+                widget.componentKey === key ||
+                widget.settingComponentKey === key
+            )
+          ) {
+            delete json.queries[key];
+          } else {
+            // eslint-disable-next-line no-param-reassign
+            acc += `\n${json.queries[key]} `;
+          }
+          return acc;
+        }, '');
+
+        variables = Object.keys(json.variables).reduce(
+          (acc, key) => {
+            if (
+              enabledWidgets.find(
+                (widget) =>
+                  widget.componentKey === key ||
+                  widget.settingComponentKey === key
+              )
+            ) {
+              delete json.variables[key];
+            } else {
+              acc.values = { ...acc.values, ...json.variables[key].values };
+              acc.defs = [...acc.defs, ...json.variables[key].defs];
+            }
+            return acc;
+          },
+          { values: {}, defs: [] }
+        );
+      }
       if (variables.defs.length > 0) {
         const variablesString = variables.defs
           .map((variable) => `$${variable.alias}: ${variable.type}`)
@@ -106,9 +340,10 @@ module.exports = (request, response) => {
           }
         });
       }
-      request.body.graphqlQuery = `${operation} { ${json.query} } ${json.fragments}`;
+      request.body.graphqlQuery = `${operation} { ${queryStr} } ${fragments}`;
       request.body.graphqlVariables = variables.values;
-      request.body.propsMap = json.propsMap;
+      request.body.propsMap = propsMap;
+      next();
     } catch (e) {
       error(e);
       throw error;

package/src/modules/graphql/pages/global/[buildQuery]graphql[notification].js

@@ -1,5 +1,9 @@
-const { execute } = require('graphql');
-const { parse } = require('graphql');
+const {
+  execute,
+  parse,
+  specifiedRules,
+  NoUnusedFragmentsRule
+} = require('graphql');
 const { validate } = require('graphql/validation');
 const { debug } = require('@evershop/evershop/src/lib/log/logger');
 const adminSchema = require('../../services/buildSchema');
@@ -28,18 +32,18 @@ module.exports = async function graphql(request, response, delegate, next) {
       } else {
         const document = parse(graphqlQuery);
         // Validate the query
-
-        const validationErrors = validate(schema, document);
+        const validationErrors = validate(
+          schema,
+          document,
+          specifiedRules.filter((rule) => rule !== NoUnusedFragmentsRule)
+        );
         if (validationErrors.length > 0) {
           const formatedErrorMessage = graphqlErrorMessageFormat(
             graphqlQuery,
             validationErrors[0].locations[0].line,
             validationErrors[0].locations[0].column
           );
-          debug(
-            'critical',
-            `GraphQL validation error: ${formatedErrorMessage}`
-          );
+          debug(`GraphQL validation error: ${formatedErrorMessage}`);
           next(validationErrors[0]);
         } else {
           const context = getContext(request);