@evershop/evershop 1.1.0 → 1.2.1

package/src/components/admin/widgets/CollectionProductsSetting.jsx

@@ -0,0 +1,203 @@
+import { Card } from '@components/admin/cms/Card';
+import Spinner from '@components/common/Spinner';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useQuery } from 'urql';
+import CheckIcon from '@heroicons/react/outline/CheckIcon';
+import { SimplePageination } from '@components/common/SimplePagination';
+import { Field } from '@components/common/form/Field';
+
+const SearchQuery = `
+  query Query ($filters: [FilterInput!]) {
+    collections(filters: $filters) {
+      items {
+        collectionId
+        uuid
+        code
+        name
+      }
+      total
+    }
+  }
+`;
+
+function CollectionProductsSetting({
+  collectionProductsWidget: { collection, count }
+}) {
+  const limit = 10;
+  const [inputValue, setInputValue] = React.useState(null);
+  const [selectedCollection, setSelectedCollection] =
+    React.useState(collection);
+  const [page, setPage] = React.useState(1);
+
+  const [result, reexecuteQuery] = useQuery({
+    query: SearchQuery,
+    variables: {
+      filters: inputValue
+        ? [
+            { key: 'name', operation: 'like', value: inputValue },
+            { key: 'page', operation: 'eq', value: page.toString() },
+            { key: 'limit', operation: 'eq', value: limit.toString() }
+          ]
+        : [
+            { key: 'limit', operation: 'eq', value: limit.toString() },
+            { key: 'page', operation: 'eq', value: page.toString() }
+          ]
+    },
+    pause: true
+  });
+
+  React.useEffect(() => {
+    reexecuteQuery({ requestPolicy: 'network-only' });
+  }, []);
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (inputValue !== null) {
+        reexecuteQuery({ requestPolicy: 'network-only' });
+      }
+    }, 1500);
+
+    return () => clearTimeout(timer);
+  }, [inputValue]);
+
+  React.useEffect(() => {
+    reexecuteQuery({ requestPolicy: 'network-only' });
+  }, [page]);
+
+  const { data, fetching, error } = result;
+
+  if (error) {
+    return (
+      <p>
+        There was an error fetching collections.
+        {error.message}
+      </p>
+    );
+  }
+
+  return (
+    <div>
+      <div className="modal-content">
+        <Card.Session title="Select a collection">
+          <div>
+            <div className="border rounded border-divider mb-8">
+              <input
+                type="text"
+                value={inputValue}
+                placeholder="Search collections"
+                onChange={(e) => setInputValue(e.target.value)}
+              />
+              <Field
+                type="hidden"
+                name="settings[collection]"
+                value={selectedCollection}
+                validationRules={['notEmpty']}
+              />
+            </div>
+            {fetching && (
+              <div className="p-3 border border-divider rounded flex justify-center items-center">
+                <Spinner width={25} height={25} />
+              </div>
+            )}
+            {!fetching && data && (
+              <div className="divide-y">
+                {data.collections.items.length === 0 && (
+                  <div className="p-3 border border-divider rounded flex justify-center items-center">
+                    {inputValue ? (
+                      <p>
+                        No collections found for query &quot;{inputValue}&rdquo;
+                      </p>
+                    ) : (
+                      <p>You have no collections to display</p>
+                    )}
+                  </div>
+                )}
+                {data.collections.items.map((collection) => (
+                  <div
+                    key={collection.uuid}
+                    className="grid grid-cols-8 gap-8 py-4 border-divider items-center"
+                  >
+                    <div className="col-span-6">
+                      <h3>{collection.name}</h3>
+                    </div>
+                    <div className="col-span-2 text-right">
+                      <div className="flex items-center">
+                        {!(collection.code === selectedCollection) && (
+                          <button
+                            type="button"
+                            className="button secondary"
+                            onClick={(e) => {
+                              e.preventDefault();
+                              setSelectedCollection(collection.code);
+                            }}
+                          >
+                            Select
+                          </button>
+                        )}
+                        {collection.code === selectedCollection && (
+                          <CheckIcon width={20} height={20} />
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </Card.Session>
+        <Card.Session title="Number of products to display">
+          <div className="flex justify-between gap-8">
+            <Field
+              type="text"
+              name="settings[count]"
+              value={count}
+              validationRules={['notEmpty']}
+            />
+          </div>
+        </Card.Session>
+      </div>
+      <Card.Session>
+        <div className="flex justify-between gap-8">
+          <SimplePageination
+            total={data?.collections.total}
+            count={data?.collections?.items?.length || 0}
+            page={page}
+            hasNext={limit * page < data?.collections.total}
+            setPage={setPage}
+          />
+        </div>
+      </Card.Session>
+    </div>
+  );
+}
+
+CollectionProductsSetting.propTypes = {
+  collectionProductsWidget: PropTypes.shape({
+    collection: PropTypes.string,
+    count: PropTypes.number
+  })
+};
+
+CollectionProductsSetting.defaultProps = {
+  collectionProductsWidget: {
+    collection: '',
+    count: 5
+  }
+};
+
+export default CollectionProductsSetting;
+
+export const query = `
+  query Query($collection: String, $count: Int) {
+    collectionProductsWidget(collection: $collection, count: $count) {
+      collection
+      count
+    }
+  }
+`;
+
+export const variables = `{
+  collection: getWidgetSetting("collection"),
+  count: getWidgetSetting("count")
+}`;

package/src/components/admin/widgets/TextBlockSetting.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Editor from '@components/common/form/fields/Editor';
+import { Field } from '@components/common/form/Field';
+
+export default function TextBlockSetting({
+  textWidget: { text, className },
+  browserApi,
+  deleteApi,
+  uploadApi,
+  folderCreateApi
+}) {
+  return (
+    <div>
+      <Field
+        type="text"
+        name="settings[className]"
+        label="Custom css classes"
+        value={className}
+        placeholder="Custom css classes"
+      />
+      <Editor
+        name="settings[text]"
+        label="Content"
+        value={text}
+        browserApi={browserApi}
+        deleteApi={deleteApi}
+        uploadApi={uploadApi}
+        folderCreateApi={folderCreateApi}
+      />
+    </div>
+  );
+}
+
+TextBlockSetting.propTypes = {
+  browserApi: PropTypes.string.isRequired,
+  deleteApi: PropTypes.string.isRequired,
+  uploadApi: PropTypes.string.isRequired,
+  folderCreateApi: PropTypes.string.isRequired,
+  textWidget: PropTypes.shape({
+    // eslint-disable-next-line react/forbid-prop-types
+    text: PropTypes.array,
+    className: PropTypes.string
+  })
+};
+
+TextBlockSetting.defaultProps = {
+  textWidget: {
+    text: [],
+    className: ''
+  }
+};
+
+export const query = `
+  query Query($text: String, $className: String) {
+    textWidget(text: $text, className: $className) {
+      text
+      className
+    }
+    browserApi: url(routeId: "fileBrowser", params: [{key: "0", value: ""}])
+    deleteApi: url(routeId: "fileDelete", params: [{key: "0", value: ""}])
+    uploadApi: url(routeId: "imageUpload", params: [{key: "0", value: ""}])
+    folderCreateApi: url(routeId: "folderCreate")
+  }
+`;
+
+export const variables = `{
+  text: getWidgetSetting("text"),
+  className: getWidgetSetting("className")
+}`;

package/src/components/common/Area.jsx

@@ -5,6 +5,7 @@ import React from 'react';
 import { useAppState } from '@components/common/context/app';
 
 function Area(props) {
+  const context = useAppState();
   const {
     id,
     coreComponents,
@@ -17,14 +18,30 @@ function Area(props) {
 
   const areaComponents = (() => {
     const areaCoreComponents = coreComponents || [];
+    const widgets = context.widgets || [];
+    const wildCardWidgets = components['*'] || {};
+    const assignedWidgets = [];
+
+    widgets.forEach((widget) => {
+      const w = wildCardWidgets[widget.type];
+      if (widget.areaId.includes(id) && w !== undefined) {
+        assignedWidgets.push({
+          id: widget.id,
+          sortOrder: widget.sortOrder,
+          props: widget.props,
+          component: w.component
+        });
+      }
+    });
     const cs =
       components[id] === undefined
-        ? areaCoreComponents
-        : areaCoreComponents.concat(Object.values(components[id]));
-
+        ? areaCoreComponents.concat(assignedWidgets)
+        : areaCoreComponents
+            .concat(Object.values(components[id]))
+            .concat(assignedWidgets);
     return cs.sort((obj1, obj2) => obj1.sortOrder - obj2.sortOrder);
   })();
-
+  const { propsMap } = context;
   let WrapperComponent = React.Fragment;
   if (noOuter !== true) {
     if (wrapper !== undefined) {
@@ -43,17 +60,15 @@ function Area(props) {
     areaWrapperProps = { className: className || '' };
   }
 
-  const context = useAppState();
-
   return (
     <WrapperComponent {...areaWrapperProps}>
       {areaComponents.map((w, index) => {
         const C = w.component.default;
         // eslint-disable-next-line no-shadow
         const { id } = w;
-        const { propsMap } = context;
         const propsData = context.graphqlResponse;
         const propKeys = propsMap[id] || [];
+
         const componentProps = propKeys.reduce((acc, map) => {
           const { origin, alias } = map;
           acc[origin] = propsData[alias];
@@ -95,7 +110,15 @@ Area.propTypes = {
   wrapper: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   // eslint-disable-next-line react/forbid-prop-types
   wrapperProps: PropTypes.object,
-  components: PropTypes.shape({}).isRequired
+  components: PropTypes.shape({
+    '*': PropTypes.objectOf(
+      PropTypes.shape({
+        component: PropTypes.shape({
+          default: PropTypes.elementType
+        })
+      })
+    )
+  }).isRequired
 };
 
 Area.defaultProps = {

package/src/components/common/Badge.jsx

@@ -27,7 +27,7 @@ export default function Badge({
     : 'default';
   return (
     <span className={`${badgeVariant} badge`}>
-      <span className={`${badgeProgress} progress rounded-100`}>
+      <span className={`${badgeProgress} progress rounded-full`}>
         {progress === 'partiallycomplete' && <span />}
       </span>
       <span className="self-center title">{title}</span>

package/src/components/common/Editor.jsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import getRowClasses from './form/fields/editor/GetRowClasses';
+import getColumnClasses from './form/fields/editor/GetColumnClasses';
+
+function Paragraph({ data }) {
+  return <p dangerouslySetInnerHTML={{ __html: data.text }} />;
+}
+
+Paragraph.propTypes = {
+  data: PropTypes.shape({
+    text: PropTypes.string.isRequired
+  }).isRequired
+};
+
+function Header({ data }) {
+  const Tag = `h${data.level}`;
+  return <Tag>{data.text}</Tag>;
+}
+
+Header.propTypes = {
+  data: PropTypes.shape({
+    level: PropTypes.number.isRequired,
+    text: PropTypes.string.isRequired
+  }).isRequired
+};
+
+function List({ data }) {
+  return (
+    <ul>
+      {data.items.map((item, index) => (
+        <li key={index}>{item}</li>
+      ))}
+    </ul>
+  );
+}
+
+List.propTypes = {
+  data: PropTypes.shape({
+    items: PropTypes.arrayOf(PropTypes.string).isRequired
+  }).isRequired
+};
+
+function Quote({ data }) {
+  return (
+    <blockquote>
+      <p>&quot;{data.text}&quot;</p>
+      {data.caption && <cite>- {data.caption}</cite>}
+    </blockquote>
+  );
+}
+
+Quote.propTypes = {
+  data: PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    caption: PropTypes.string
+  }).isRequired
+};
+
+function Image({ data }) {
+  const { file, caption, withBorder, withBackground, stretched, url } = data;
+
+  const imageStyles = {
+    border: withBorder ? '1px solid #ccc' : 'none',
+    backgroundColor: withBackground ? '#f9f9f9' : 'transparent',
+    width: stretched ? '100%' : 'auto',
+    display: 'block',
+    maxWidth: '100%',
+    margin: '0 auto' // Center the image if not stretched
+  };
+
+  const imageElement = (
+    <img src={file.url} alt={caption || 'Image'} style={imageStyles} />
+  );
+
+  return (
+    <div>
+      {url ? (
+        <a href={url} target="_blank" rel="noopener noreferrer">
+          {imageElement}
+        </a>
+      ) : (
+        imageElement
+      )}
+      {caption && (
+        <p style={{ textAlign: 'center', marginTop: '10px' }}>{caption}</p>
+      )}
+    </div>
+  );
+}
+
+Image.propTypes = {
+  data: PropTypes.shape({
+    file: PropTypes.shape({
+      url: PropTypes.string.isRequired
+    }).isRequired,
+    caption: PropTypes.string,
+    withBorder: PropTypes.bool,
+    withBackground: PropTypes.bool,
+    stretched: PropTypes.bool,
+    url: PropTypes.string
+  }).isRequired
+};
+
+function RawHtml({ data }) {
+  return <div dangerouslySetInnerHTML={{ __html: data.html }} />;
+}
+
+RawHtml.propTypes = {
+  data: PropTypes.shape({
+    html: PropTypes.string.isRequired
+  }).isRequired
+};
+
+function RenderEditorJS({ blocks }) {
+  return (
+    <div className="prose prose-base max-w-none">
+      {blocks.map((block, index) => {
+        switch (block.type) {
+          case 'paragraph':
+            return <Paragraph key={index} data={block.data} />;
+          case 'header':
+            return <Header key={index} data={block.data} />;
+          case 'list':
+            return <List key={index} data={block.data} />;
+          case 'image':
+            return <Image key={index} data={block.data} />;
+          case 'quote':
+            return <Quote key={index} data={block.data} />;
+          case 'raw':
+            return <RawHtml key={index} data={block.data} />;
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}
+
+RenderEditorJS.propTypes = {
+  blocks: PropTypes.arrayOf(
+    PropTypes.shape({
+      type: PropTypes.string.isRequired,
+      // eslint-disable-next-line react/forbid-prop-types
+      data: PropTypes.object.isRequired
+    })
+  ).isRequired
+};
+
+export default function Editor({ rows }) {
+  return (
+    <div className="editor__html">
+      {rows.map((row, index) => {
+        const rowClasses = getRowClasses(row.size);
+        return (
+          <div
+            className={`row__container mt-12 grid md:${rowClasses} grid-cols-1 gap-8`}
+            key={index}
+          >
+            {row.columns.map((column, index) => {
+              const columnClasses = getColumnClasses(column.size);
+              return (
+                <div
+                  className={`column__container md:${columnClasses} col-span-1`}
+                  key={index}
+                >
+                  {column.data?.blocks && (
+                    <RenderEditorJS blocks={column.data?.blocks} />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+Editor.propTypes = {
+  rows: PropTypes.arrayOf(
+    PropTypes.shape({
+      size: PropTypes.number.isRequired,
+      columns: PropTypes.arrayOf(
+        PropTypes.shape({
+          size: PropTypes.number.isRequired,
+          // eslint-disable-next-line react/forbid-prop-types
+          data: PropTypes.object
+        })
+      ).isRequired
+    })
+  ).isRequired
+};

package/src/components/common/Notification.scss

@@ -6,6 +6,7 @@
   width: 320px;
   box-sizing: border-box;
   color: #fff;
+  background-color: transparent;
 }
 .Toastify__toast-container--top-left {
   top: 1em;

package/src/components/common/SimplePagination.jsx

@@ -5,13 +5,13 @@ import ChevronDoubleRightIcon from '@heroicons/react/outline/ChevronRightIcon';
 
 export function SimplePageination({ total, count, page, hasNext, setPage }) {
   return (
-    <div className="simple__pagination flex gap-1 items-center">
+    <div className="simple__pagination flex gap-4 items-center">
       <div>
         <span>
           {count} of {total}
         </span>
       </div>
-      <div className="flex gap-1">
+      <div className="flex gap-4">
         {page > 1 && (
           <a
             className="hover:text-interactive border rounded p-[5px] border-divider"

package/src/components/common/form/Form.jsx

@@ -196,7 +196,7 @@ export function Form(props) {
         >
           {children}
           {submitBtn === true && (
-            <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={btnText || 'Save'}
                 onAction={() => {

package/src/components/common/form/fields/Checkbox.jsx

@@ -49,7 +49,7 @@ function Checkbox({
           />
           {_isChecked === true && <CheckedIcon />}
           {_isChecked === false && <UnCheckedIcon />}
-          <span className="pl-05">{label}</span>
+          <span className="pl-2">{label}</span>
           <input type="hidden" name={name} value={_isChecked ? 1 : 0} />
         </label>
       </div>

package/src/components/common/form/fields/Ckeditor.jsx

@@ -255,11 +255,11 @@ function FileBrowser({
           </a>
         </div>
         <div>
-          <div className="grid grid-cols-4 gap-2">
+          <div className="grid grid-cols-4 gap-8">
             <div className="col-span-1">
-              <div className="current-path mb-4">
+              <div className="current-path mb-16">
                 <div className="flex">
-                  <div className="pr-1">You are here:</div>
+                  <div className="pr-4">You are here:</div>
                   <div>
                     <a
                       href="#"
@@ -285,7 +285,7 @@ function FileBrowser({
                   ))}
                 </div>
               </div>
-              <ul className="mt-15 mb-15">
+              <ul className="mt-6 mb-6">
                 {folders.map((f, i) => (
                   <li
                     key={i}
@@ -307,7 +307,7 @@ function FileBrowser({
                       />
                     </svg>
                     <a
-                      className="pl-05 hover:underline"
+                      className="pl-2 hover:underline"
                       href="#"
                       onClick={(e) => onSelectFolder(e, f)}
                     >
@@ -327,7 +327,7 @@ function FileBrowser({
                   placeholder="New folder"
                   ref={newFolderRefInput}
                 />
-                <div className="mt-1">
+                <div className="mt-4">
                   <a
                     href="#"
                     onClick={(e) =>
@@ -341,8 +341,8 @@ function FileBrowser({
               </div>
             </div>
             <div className="col-span-3">
-              <div className="error text-critical mb-2">{error}</div>
-              <div className="tool-bar grid grid-cols-3 gap-1 mb-2">
+              <div className="error text-critical mb-8">{error}</div>
+              <div className="tool-bar grid grid-cols-3 gap-4 mb-8">
                 <Button
                   variant="critical"
                   outline
@@ -373,7 +373,7 @@ function FileBrowser({
                 </label>
               </div>
               {files.length === 0 && <div>There is no file to display.</div>}
-              <div className="grid grid-cols-9 gap-1">
+              <div className="grid grid-cols-9 gap-4">
                 {files.map((f) => (
                   <File file={f} select={onSelectFile} />
                 ))}
@@ -422,8 +422,8 @@ export default function CkeditorField({
 
   return (
     <div className="ckeditor">
-      <label htmlFor="description mt-1">{label}</label>
-      <div className="image-icon mt-1">
+      <label htmlFor="description mt-4">{label}</label>
+      <div className="image-icon mt-4">
         <a
           href="#"
           onClick={(e) => {