@evershop/evershop 1.1.0 → 1.2.1

package/src/components/frontStore/checkout/checkout/summary/cart/Total.jsx

@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { _ } from '@evershop/evershop/src/lib/locale/translate';
 
-export function Total({ total, taxAmount, displayCheckoutPriceIncludeTax }) {
+export function Total({ total, totalTaxAmount, priceIncludingTax }) {
   return (
     <div className="summary-row grand-total flex justify-between">
-      {(displayCheckoutPriceIncludeTax && (
+      {(priceIncludingTax && (
         <div>
           <div>
             <div className="font-bold">
@@ -13,7 +13,7 @@ export function Total({ total, taxAmount, displayCheckoutPriceIncludeTax }) {
             </div>
             <div>
               <span className="italic">
-                ({_('Inclusive of tax ${taxAmount}', { taxAmount })})
+                ({_('Inclusive of tax ${totalTaxAmount}', { totalTaxAmount })})
               </span>
             </div>
           </div>
@@ -29,10 +29,10 @@ export function Total({ total, taxAmount, displayCheckoutPriceIncludeTax }) {
 
 Total.propTypes = {
   total: PropTypes.string.isRequired,
-  taxAmount: PropTypes.string.isRequired,
-  displayCheckoutPriceIncludeTax: PropTypes.bool
+  totalTaxAmount: PropTypes.string.isRequired,
+  priceIncludingTax: PropTypes.bool
 };
 
 Total.defaultProps = {
-  displayCheckoutPriceIncludeTax: false
+  priceIncludingTax: false
 };

package/src/components/frontStore/checkout/success/summary/items/ItemOptions.jsx

@@ -11,7 +11,7 @@ export function ItemOptions({ options = [] }) {
   const language = get(useAppState(), 'language', 'en');
 
   return (
-    <div className="cart-item-options mt-05">
+    <div className="cart-item-options mt-2">
       <ul className="list-basic">
         {options.map((o, i) => (
           // eslint-disable-next-line react/no-array-index-key

package/src/components/frontStore/checkout/success/summary/items/Items.jsx

@@ -4,7 +4,7 @@ import { ItemVariantOptions } from '@components/frontStore/checkout/cart/items/I
 import './Items.scss';
 import ProductNoThumbnail from '@components/common/ProductNoThumbnail';
 
-function Items({ items, displayCheckoutPriceIncludeTax }) {
+function Items({ items, priceIncludingTax }) {
   return (
     <div id="summary-items">
       <table className="listing items-table">
@@ -37,9 +37,9 @@ function Items({ items, displayCheckoutPriceIncludeTax }) {
               </td>
               <td>
                 <span>
-                  {displayCheckoutPriceIncludeTax
-                    ? item.total.text
-                    : item.subTotal.text}
+                  {priceIncludingTax
+                    ? item.lineTotalInclTax.text
+                    : item.lineTotal.text}
                 </span>
               </td>
             </tr>
@@ -57,13 +57,16 @@ Items.propTypes = {
       productName: PropTypes.string.isRequired,
       qty: PropTypes.number.isRequired,
       thumbnail: PropTypes.string,
-      total: PropTypes.shape({
+      lineTotalInclTax: PropTypes.shape({
+        text: PropTypes.string.isRequired
+      }).isRequired,
+      lineTotal: PropTypes.shape({
         text: PropTypes.string.isRequired
       }).isRequired,
       variantOptions: PropTypes.string
     })
   ).isRequired,
-  displayCheckoutPriceIncludeTax: PropTypes.bool.isRequired
+  priceIncludingTax: PropTypes.bool.isRequired
 };
 
 export { Items };

package/src/components/frontStore/checkout/success/summary/order/OrderSummary.jsx

@@ -12,29 +12,25 @@ function OrderSummary({
   subTotalInclTax,
   shippingMethodName,
   shippingFeeInclTax,
-  taxAmount,
+  totalTaxAmount,
   discountAmount,
   coupon,
   grandTotal,
-  displayCheckoutPriceIncludeTax
+  priceIncludingTax
 }) {
   return (
     <div className="checkout-summary-block">
       <Subtotal
         count={items.length}
-        total={
-          displayCheckoutPriceIncludeTax ? subTotalInclTax.text : subTotal.text
-        }
+        total={priceIncludingTax ? subTotalInclTax.text : subTotal.text}
       />
       <Shipping method={shippingMethodName} cost={shippingFeeInclTax.text} />
-      {!displayCheckoutPriceIncludeTax && (
-        <Tax taxClass="" amount={taxAmount.text} />
-      )}
+      {!priceIncludingTax && <Tax taxClass="" amount={totalTaxAmount.text} />}
       <Discount code={coupon} discount={discountAmount.text} />
       <Total
         total={grandTotal.text}
-        displayCheckoutPriceIncludeTax={displayCheckoutPriceIncludeTax}
-        taxAmount={taxAmount.text}
+        priceIncludingTax={priceIncludingTax}
+        totalTaxAmount={totalTaxAmount.text}
       />
     </div>
   );
@@ -68,10 +64,10 @@ OrderSummary.propTypes = {
   subTotalInclTax: PropTypes.shape({
     text: PropTypes.string
   }),
-  taxAmount: PropTypes.shape({
+  totalTaxAmount: PropTypes.shape({
     text: PropTypes.string
   }),
-  displayCheckoutPriceIncludeTax: PropTypes.bool.isRequired
+  priceIncludingTax: PropTypes.bool.isRequired
 };
 
 OrderSummary.defaultProps = {
@@ -92,7 +88,7 @@ OrderSummary.defaultProps = {
   subTotalInclTax: {
     text: '0.00'
   },
-  taxAmount: {
+  totalTaxAmount: {
     text: '0.00'
   }
 };

package/src/components/frontStore/checkout/success/summary/order/Total.jsx

@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { _ } from '@evershop/evershop/src/lib/locale/translate';
 
-export function Total({ total, taxAmount, displayCheckoutPriceIncludeTax }) {
+export function Total({ total, totalTaxAmount, priceIncludingTax }) {
   return (
     <div className="summary-row grand-total">
-      {(displayCheckoutPriceIncludeTax && (
+      {(priceIncludingTax && (
         <div>
           <div>
             <div className="font-bold">
@@ -13,7 +13,7 @@ export function Total({ total, taxAmount, displayCheckoutPriceIncludeTax }) {
             </div>
             <div>
               <span className="italic">
-                ({_('Inclusive of tax ${taxAmount}', { taxAmount })})
+                ({_('Inclusive of tax ${totalTaxAmount}', { totalTaxAmount })})
               </span>
             </div>
           </div>
@@ -29,6 +29,6 @@ export function Total({ total, taxAmount, displayCheckoutPriceIncludeTax }) {
 
 Total.propTypes = {
   total: PropTypes.number.isRequired,
-  taxAmount: PropTypes.number.isRequired,
-  displayCheckoutPriceIncludeTax: PropTypes.bool.isRequired
+  totalTaxAmount: PropTypes.number.isRequired,
+  priceIncludingTax: PropTypes.bool.isRequired
 };

package/src/components/frontStore/customer/address/addressForm/AddressFormLoadingSkeleton.jsx

@@ -4,14 +4,14 @@ import './AddressFormLoadingSkeleton.scss';
 export function AddressFormLoadingSkeleton() {
   return (
     <div className="address-loading-skeleton">
-      <div className="grid gap-2 grid-cols-2">
+      <div className="grid gap-8 grid-cols-2">
         <div className="skeleton" />
         <div className="skeleton" />
       </div>
       <div className="skeleton" />
       <div className="skeleton" />
       <div className="skeleton" />
-      <div className="grid gap-2 grid-cols-2">
+      <div className="grid gap-8 grid-cols-2">
         <div className="skeleton" />
         <div className="skeleton" />
       </div>

package/src/components/frontStore/customer/address/addressForm/NameAndTelephone.jsx

@@ -9,7 +9,7 @@ export function NameAndTelephone({
   isFieldRequired
 }) {
   return (
-    <div className="grid grid-cols-2 gap-1">
+    <div className="grid grid-cols-2 gap-4">
       <div>
         <Field
           type="text"

package/src/components/frontStore/customer/address/addressForm/ProvinceAndPostcode.jsx

@@ -12,7 +12,7 @@ export function ProvinceAndPostcode({
   isFieldRequired
 }) {
   return (
-    <div className="grid grid-cols-2 gap-1 mt-1">
+    <div className="grid grid-cols-2 gap-4 mt-4">
       <Province
         allowCountries={allowCountries}
         selectedCountry={selectedCountry}

package/src/components/frontStore/customer/checkout/Edit.jsx

@@ -52,9 +52,9 @@ export function Edit({
 
   return (
     <div className="">
-      <h4 className="mb-1 mt-1">{_('Contact information')}</h4>
+      <h4 className="mb-4 mt-4">{_('Contact information')}</h4>
       {!customer && (
-        <div className="mb-1">
+        <div className="mb-4">
           <span>{_('Already have an account?')}</span>{' '}
           <a className="text-interactive hover:underline" href={loginUrl}>
             {_('Login')}

package/src/components/frontStore/customer/detail/Order.jsx

@@ -6,11 +6,11 @@ import ProductNoThumbnail from '@components/common/ProductNoThumbnail';
 export default function Order({ order }) {
   return (
     <div className="order border-divider">
-      <div className="order-inner grid grid-cols-1 md:grid-cols-3 gap-2">
+      <div className="order-inner grid grid-cols-1 md:grid-cols-3 gap-8">
         <div className="order-items col-span-2">
           {order.items.map((item) => (
-            <div className="order-item mb-1 flex gap-2 items-center">
-              <div className="thumbnail border border-divider p-1 rounded">
+            <div className="order-item mb-4 flex gap-8 items-center">
+              <div className="thumbnail border border-divider p-4 rounded">
                 {item.thumbnail && (
                   <img
                     style={{ maxWidth: '6rem' }}
@@ -42,7 +42,7 @@ export default function Order({ order }) {
               <span className="font-bold">
                 {_('Order')}: #{order.orderNumber}
               </span>
-              <span className="italic pl-1">{order.createdAt.text}</span>
+              <span className="italic pl-4">{order.createdAt.text}</span>
             </div>
           </div>
           <div className="order-total-value font-bold">

package/src/components/frontStore/stripe/checkout/CheckoutForm.jsx

@@ -167,7 +167,7 @@ export default function CheckoutForm({ stripePublishableKey }) {
 
   if (result.error) {
     return (
-      <div className="flex p-2 justify-center items-center text-critical">
+      <div className="flex p-8 justify-center items-center text-critical">
         {error.message}
       </div>
     );
@@ -197,7 +197,7 @@ export default function CheckoutForm({ stripePublishableKey }) {
       </div>
       {/* Show any error that happens when processing the payment */}
       {error && (
-        <div className="card-error text-critical mb-2" role="alert">
+        <div className="card-error text-critical mb-8" role="alert">
           {error}
         </div>
       )}

package/src/components/frontStore/stripe/checkout/TestCards.jsx

@@ -68,7 +68,7 @@ function TestCards({ showTestCard, testSuccess, testFailure }) {
             <rect x="116.25" y="12.61" width="2.73" height="9.64" />
           </svg>
         </div>
-        <div className="self-center flex space-x-1">
+        <div className="self-center flex space-x-4">
           <Button
             onAction={testSuccess}
             title="Test success"

package/src/components/frontStore/widgets/BasicMenu.jsx

@@ -0,0 +1,129 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function BasicMenu({
+  basicMenuWidget: { menus, isMain, className }
+}) {
+  const [isOpen, setIsOpen] = React.useState(!isMain);
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const listingClasses = isMain
+    ? 'md:flex md:justify-center md:space-x-10 absolute md:relative left-[-2.5rem] md:left-0 top-full md:top-auto mt-2 md:mt-0 w-screen md:w-auto md:bg-transparent p-4 md:p-0 min-w-[250px] bg-white z-30 divide-y md:divide-y-0'
+    : 'flex justify-center space-x-10 relative left-[-2.5rem] md:left-0 top-full md:top-auto mt-2 md:mt-0 w-screen md:w-auto md:bg-transparent p-4 md:p-0 min-w-[250px] bg-white z-30';
+  return (
+    <div className={className}>
+      <div className="flex justify-start gap-6 items-center">
+        <nav className="p-4 relative md:flex md:justify-center">
+          <div className="flex justify-between items-center">
+            {isMain && (
+              <div className="md:hidden">
+                <a
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    toggleMenu();
+                  }}
+                  className="text-black focus:outline-none"
+                >
+                  <svg
+                    className="w-9 h-9"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M4 6h16M4 12h16m-7 6h7"
+                    />
+                  </svg>
+                </a>
+              </div>
+            )}
+            <ul className={`${isOpen ? 'block' : 'hidden'}  ${listingClasses}`}>
+              {menus.map((item, index) => (
+                <li key={index} className="relative group">
+                  <a
+                    href={item.url}
+                    className="hover:text-gray-300 transition-colors block md:inline-block px-4 py-4 md:px-0 md:py-0"
+                  >
+                    {item.name}
+                  </a>
+                  {item.children.length > 0 && (
+                    <ul className="md:absolute left-0 top-full mt-0 md:mt-3 w-48 bg-white md:shadow-lg rounded-md md:opacity-0 md:group-hover:opacity-100 md:group-hover:translate-y-0 transform transition-all duration-300 ease-in-out min-w-full md:min-w-[250px] z-30 md:border-t-4">
+                      {item.children.map((subItem, subIndex) => (
+                        <li key={subIndex}>
+                          <a
+                            href={subItem.url}
+                            className="block px-8 md:px-4 py-3 text-gray-700 hover:bg-gray-100"
+                          >
+                            {subItem.name}
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </nav>
+      </div>
+    </div>
+  );
+}
+
+BasicMenu.propTypes = {
+  basicMenuWidget: PropTypes.shape({
+    menus: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string,
+        name: PropTypes.string,
+        url: PropTypes.string,
+        type: PropTypes.string,
+        uuid: PropTypes.string,
+        children: PropTypes.arrayOf(
+          PropTypes.shape({
+            name: PropTypes.string,
+            url: PropTypes.string,
+            type: PropTypes.string,
+            uuid: PropTypes.string
+          })
+        )
+      })
+    ),
+    isMain: PropTypes.bool,
+    className: PropTypes.string
+  }).isRequired
+};
+
+export const query = `
+  query Query($settings: JSON) {
+    basicMenuWidget(settings: $settings) {
+      menus {
+        id
+        name
+        url
+        type
+        uuid
+        children {
+          name
+          url
+          type
+          uuid
+        }
+      }
+      isMain
+      className
+    }
+  }
+`;
+
+export const variables = `{
+  settings: getWidgetSetting()
+}`;

package/src/{modules/catalog/pages/frontStore/homepage/FeaturedProducts.jsx → components/frontStore/widgets/CollectionProducts.jsx}

@@ -2,23 +2,23 @@ import ProductList from '@components/frontStore/catalog/product/list/List';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-export default function FeaturedProducts({ collection }) {
+export default function CollectionProducts({ collection }) {
   if (!collection) {
     return null;
   }
   return (
-    <div className="pt-3">
+    <div className="pt-12">
       <div className="page-width">
-        <h3 className="mt-3 mb-3 text-center uppercase h5 tracking-widest">
-          {collection.name}
+        <h3 className="mt-12 mb-12 text-center uppercase h5 tracking-widest">
+          {collection?.name}
         </h3>
-        <ProductList products={collection.products.items} countPerRow={4} />
+        <ProductList products={collection?.products?.items} countPerRow={4} />
       </div>
     </div>
   );
 }
 
-FeaturedProducts.propTypes = {
+CollectionProducts.propTypes = {
   collection: PropTypes.shape({
     collectionId: PropTypes.number.isRequired,
     name: PropTypes.string.isRequired,
@@ -46,41 +46,49 @@ FeaturedProducts.propTypes = {
         })
       ).isRequired
     }).isRequired
+  }).isRequired,
+  collectionProductsWidget: PropTypes.shape({
+    count: PropTypes.number
   }).isRequired
 };
 
-export const layout = {
-  areaId: 'content',
-  sortOrder: 15
-};
-
 export const query = `
-  query query {
-    collection (code: "homepage") {
+  query Query($collection: String, $count: ID) {
+    collection (code: $collection) {
       collectionId
       name
-      products (filters: [{key: "limit", operation: eq, value: "4"}]) {
+      products (filters: [{key: "limit", operation: eq, value: $count}]) {
         items {
-          productId
-          name
-          sku
-          price {
-            regular {
-              value
-              text
-            }
-            special {
-              value
-              text
-            }
-            }
-          image {
-            alt
-            url: listing
-          }
-          url
+          ...Product
         }
       }
     }
   }
 `;
+
+export const fragments = `
+  fragment Product on Product {
+    productId
+    name
+    price {
+      regular {
+        value
+        text
+      }
+      special {
+        value
+        text
+      }
+    }
+    image {
+      alt
+      url: listing
+    }
+    url
+  }
+`;
+
+export const variables = `{
+  collection: getWidgetSetting("collection"),
+  count: getWidgetSetting("count")
+}`;

package/src/components/frontStore/widgets/TextBlock.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Editor from '@components/common/Editor';
+
+export default function TextBlock({ textWidget: { text, className } }) {
+  return (
+    <div className={`text-block-widget ${className}`}>
+      <Editor rows={text} />
+    </div>
+  );
+}
+
+TextBlock.propTypes = {
+  textWidget: PropTypes.shape({
+    // eslint-disable-next-line react/forbid-prop-types
+    text: PropTypes.array,
+    className: PropTypes.string
+  })
+};
+
+TextBlock.defaultProps = {
+  textWidget: {
+    text: [],
+    className: ''
+  }
+};
+
+export const query = `
+  query Query($text: String, $className: String) {
+    textWidget(text: $text, className: $className) {
+      ...TextBlockWidget
+    }
+  }
+`;
+
+export const fragments = `
+  fragment TextBlockWidget on TextBlockWidget {
+    text
+    className
+  }
+`;
+
+export const variables = `{
+  text: getWidgetSetting("text"),
+  className: getWidgetSetting("className")
+}`;

package/src/lib/componee/getComponentsByRoute.js

@@ -4,6 +4,7 @@ const { getEnabledExtensions } = require('../../../bin/extension');
 const { scanRouteComponents } = require('./scanForComponents');
 const { getConfig } = require('../util/getConfig');
 const { CONSTANTS } = require('../helpers');
+const { getEnabledWidgets } = require('../util/getEnabledWidgets');
 
 // eslint-disable-next-line no-multi-assign
 module.exports = exports = {};
@@ -11,11 +12,23 @@ module.exports = exports = {};
 exports.getComponentsByRoute = function getComponentsByRoute(route) {
   const modules = [...getCoreModules(), ...getEnabledExtensions()];
   const theme = getConfig('system.theme');
+
+  let components;
   if (theme) {
-    return Object.values(
+    components = Object.values(
       scanRouteComponents(route, modules, resolve(CONSTANTS.THEMEPATH, theme))
     );
   } else {
-    return Object.values(scanRouteComponents(route, modules));
+    components = Object.values(scanRouteComponents(route, modules));
+  }
+  const widgets = getEnabledWidgets();
+  if (!route.isAdmin) {
+    // Add widgets to components
+    return components.concat((widgets || []).map((widget) => widget.component));
+  } else {
+    // Add widgets to components
+    return components.concat(
+      (widgets || []).map((widget) => widget.setting_component)
+    );
   }
 };

package/src/lib/event/event-manager.js

@@ -70,7 +70,7 @@ async function loadEvents(count) {
   }
 
   if (events.length > 0) {
-    query.and(
+    query.andWhere(
       'uuid',
       'NOT IN',
       events.map((event) => event.uuid)

package/src/lib/middleware/tests/app/modules/404page/pages/frontStore/product/route.json

@@ -1,4 +1,5 @@
 {
   "methods": ["GET"],
-  "path": "/product/:id"
+  "path": "/product/:id",
+  "name": "Product single page"
 }

package/src/lib/middlewares/static.js

@@ -20,7 +20,9 @@ module.exports = exports = (request, response, next) => {
     request.url = request.originalUrl.replace('/assets', '');
   }
 
-  if (existsSync(join(CONSTANTS.ROOTPATH, '.evershop/build', path))) {
+  if (path.endsWith('/')) {
+    response.status(404).send('Not Found');
+  } else if (existsSync(join(CONSTANTS.ROOTPATH, '.evershop/build', path))) {
     staticMiddleware(join(CONSTANTS.ROOTPATH, '.evershop/build'))(
       request,
       response,

package/src/lib/response/render.js

@@ -34,18 +34,16 @@ function renderDevelopment(request, response) {
   }
   // We can not get devMiddleware from response.locals
   // because there are 2 build (current route, and notFound)
-  const devMiddleware = route.webpackMiddleware;
   const contextValue = {
     graphqlResponse: get(response, 'locals.graphqlResponse', {}),
-    propsMap: get(response, 'locals.propsMap', {})
+    propsMap: get(response, 'locals.propsMap', {}),
+    widgets: get(response, 'locals.widgets', [])
   };
   const safeContextValue = jsesc(contextValue, {
     json: true,
     isScriptContext: true
   });
-  const { stats } = devMiddleware.context;
-  // let stat = jsonWebpackStats.find(st => st.compilation.name === route.id);
-  const { assetsByChunkName } = stats.toJson();
+  const { assetsByChunkName } = response.locals.jsonWebpackStats;
 
   const notFoundFile = request.currentRoute?.isAdmin
     ? 'adminNotFound.js'
@@ -94,7 +92,8 @@ function renderProduction(request, response) {
   ));
   const contextValue = {
     graphqlResponse: get(response, 'locals.graphqlResponse', {}),
-    propsMap: get(response, 'locals.propsMap', {})
+    propsMap: get(response, 'locals.propsMap', {}),
+    widgets: get(response, 'locals.widgets', [])
   };
   const safeContextValue = jsesc(contextValue, {
     json: true,

package/src/lib/router/Router.js

@@ -34,7 +34,7 @@ class Router {
 
 const router = new Router();
 exports.addRoute = (route) => router.addRoute(route);
-exports.getFrontStoreRoutes = () => router.getFronStoreRoutes();
+exports.getFrontStoreRoutes = () => router.getFrontStoreRoutes();
 exports.getAdminRoutes = () => router.getAdminRoutes();
 exports.getRoutes = () => router.getRoutes();
 exports.empty = () => router.empty();