Merge branch 'feature/catalog-product' into develop

config/middlewares.ts

@@ -1,6 +1,24 @@
 export default [
   'strapi::errors',
-  'strapi::security',
+  {
+    name: 'strapi::security',
+    config: {
+      contentSecurityPolicy: {
+        useDefaults: true,
+        directives: {
+          'connect-src': ['\'self\'', 'https:'],
+          'img-src': ['\'self\'', 'data:', 'blob:', 'res.cloudinary.com'],
+          'media-src': [
+            '\'self\'',
+            'data:',
+            'blob:',
+            'res.cloudinary.com',
+          ],
+          upgradeInsecureRequests: null,
+        },
+      },
+    },
+  },
   'strapi::cors',
   'strapi::poweredBy',
   'strapi::logger',

config/plugins.ts

@@ -20,6 +20,25 @@ module.exports = ({env}) => ({
   },
   'import-export-entries': {
     enabled: true
-  }
+  },
+  'vendors': {
+    enabled: true,
+    resolve: './src/plugins/vendors'
+  },
+  upload: {
+    config: {
+      provider: 'cloudinary',
+      providerOptions: {
+        cloud_name: 'djgzqzujy',
+        api_key: '161331531972295',
+        api_secret: '-Yk554hkcAD9x7_pkPN_2knXAMg',
+      },
+      actionOptions: {
+        upload: {},
+        uploadStream: {},
+        delete: {},
+      },
+    },
+  },
   // ...
 });

package.json

@@ -13,18 +13,19 @@
     "generate:staging": "node scripts/strapi/build-staging.js"
   },
   "dependencies": {
-    "@strapi/plugin-i18n": "4.6.0",
+    "@strapi/plugin-i18n": "4.10.2",
-    "@strapi/plugin-users-permissions": "4.6.0",
+    "@strapi/plugin-users-permissions": "4.10.2",
-    "@strapi/provider-email-nodemailer": "4.5.6",
+    "@strapi/provider-email-nodemailer": "4.10.2",
-    "@strapi/strapi": "^4.6.0",
+    "@strapi/provider-upload-cloudinary": "4.10.2",
-    "@strapi/utils": "4.5.6",
+    "@strapi/strapi": "4.10.2",
-    "better-sqlite3": "7.4.6",
+    "@strapi/utils": "4.10.2",
+    "better-sqlite3": "8.3.0",
+    "cloudinary": "^1.41.0",
     "mysql": "2.18.1",
-    "pg": "8.8.0",
+    "pg": "8.10.0",
-    "strapi-plugin-import-export-entries": "1.18.0",
+    "strapi-plugin-import-export-entries": "1.19.1",
-    "strapi-plugin-meilisearch": "^0.9.1",
+    "strapi-plugin-menus": "1.4.1",
-    "strapi-plugin-menus": "1.2.1",
+    "strapi-plugin-populate-deep": "2.0.0"
-    "strapi-plugin-populate-deep": "1.1.2"
   },
   "author": {
     "name": "A Strapi developer"
@@ -36,5 +37,8 @@
     "node": ">=14.19.1 <=18.x.x",
     "npm": ">=6.0.0"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "request": "^2.88.2"
+  }
 }

src/api/page/content-types/page/schema.json

@@ -24,9 +24,14 @@
       "repeatable": false,
       "component": "shared.seo"
     },
-    "Login": {
+    "home": {
       "type": "dynamiczone",
-      "components": []
+      "components": [
+        "media.mosaic",
+        "content.text-box",
+        "media.video-box",
+        "content.carousel"
+      ]
     }
   }
 }

src/api/vendor/content-types/vendor/schema.json

@@ -0,0 +1,36 @@
+{
+  "kind": "collectionType",
+  "collectionName": "vendor",
+  "info": {
+    "singularName": "vendor",
+    "pluralName": "vendors",
+    "displayName": "Vendor",
+    "description": ""
+  },
+  "options": {
+    "draftAndPublish": true
+  },
+  "pluginOptions": {},
+  "attributes": {
+    "name": {
+      "type": "string"
+    },
+    "slug": {
+      "type": "uid",
+      "targetField": "name",
+      "required": true,
+      "private": true
+    },
+    "active": {
+      "type": "boolean"
+    },
+    "admin_users": {
+      "type": "relation",
+      "relation": "oneToMany",
+      "target": "admin::user"
+    },
+    "override": {
+      "type": "boolean"
+    }
+  }
+}

src/api/vendor/controllers/vendor.ts

@@ -0,0 +1,7 @@
+/**
+ * vendor controller
+ */
+
+import { factories } from '@strapi/strapi'
+
+export default factories.createCoreController('api::vendor.vendor');

src/api/vendor/routes/vendor.ts

@@ -0,0 +1,7 @@
+/**
+ * vendor router
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreRouter('api::vendor.vendor');

src/api/vendor/services/vendor.ts

@@ -0,0 +1,7 @@
+/**
+ * vendor service
+ */
+
+import { factories } from '@strapi/strapi';
+
+export default factories.createCoreService('api::vendor.vendor');

src/components/actions/button.json

@@ -0,0 +1,29 @@
+{
+  "collectionName": "components_actions_buttons",
+  "info": {
+    "displayName": "button"
+  },
+  "options": {},
+  "attributes": {
+    "title": {
+      "type": "string"
+    },
+    "path": {
+      "type": "string"
+    },
+    "type": {
+      "type": "enumeration",
+      "enum": [
+        "primary",
+        "secondary"
+      ]
+    },
+    "source": {
+      "type": "enumeration",
+      "enum": [
+        "external",
+        "internal"
+      ]
+    }
+  }
+}

src/components/content/carousel.json

@@ -0,0 +1,18 @@
+{
+  "collectionName": "components_content_carousels",
+  "info": {
+    "displayName": "carousel",
+    "description": ""
+  },
+  "options": {},
+  "attributes": {
+    "title": {
+      "type": "string"
+    },
+    "items": {
+      "type": "component",
+      "repeatable": true,
+      "component": "media.carousel-item"
+    }
+  }
+}

src/components/content/text-box.json

@@ -0,0 +1,35 @@
+{
+  "collectionName": "components_content_text_boxes",
+  "info": {
+    "displayName": "Text Box"
+  },
+  "options": {},
+  "attributes": {
+    "title": {
+      "type": "string"
+    },
+    "content": {
+      "type": "richtext"
+    },
+    "imageLeft": {
+      "allowedTypes": [
+        "images",
+        "files",
+        "videos",
+        "audios"
+      ],
+      "type": "media",
+      "multiple": false
+    },
+    "imageRight": {
+      "allowedTypes": [
+        "images",
+        "files",
+        "videos",
+        "audios"
+      ],
+      "type": "media",
+      "multiple": false
+    }
+  }
+}

src/components/media/carousel-image.json

@@ -0,0 +1,28 @@
+{
+  "collectionName": "components_media_carousel_images",
+  "info": {
+    "displayName": "carousel image",
+    "description": ""
+  },
+  "options": {},
+  "attributes": {
+    "orientation": {
+      "type": "enumeration",
+      "enum": [
+        "rightside",
+        "leftside"
+      ]
+    },
+    "cover": {
+      "type": "media",
+      "multiple": false,
+      "required": false,
+      "allowedTypes": [
+        "images",
+        "files",
+        "videos",
+        "audios"
+      ]
+    }
+  }
+}

src/components/media/carousel-item.json

@@ -0,0 +1,33 @@
+{
+  "collectionName": "components_media_carousel_items",
+  "info": {
+    "displayName": "carousel item",
+    "description": ""
+  },
+  "options": {},
+  "attributes": {
+    "title": {
+      "type": "string"
+    },
+    "subtitle": {
+      "type": "string"
+    },
+    "illustration": {
+      "type": "component",
+      "repeatable": false,
+      "component": "media.carousel-image"
+    },
+    "actions": {
+      "type": "component",
+      "repeatable": true,
+      "component": "actions.button"
+    },
+    "columns": {
+      "type": "enumeration",
+      "enum": [
+        "one",
+        "two"
+      ]
+    }
+  }
+}

src/components/media/mosaic-item.json

@@ -0,0 +1,18 @@
+{
+  "collectionName": "components_media_mosaic_items",
+  "info": {
+    "displayName": "Mosaic item"
+  },
+  "options": {},
+  "attributes": {
+    "icon": {
+      "type": "string"
+    },
+    "title": {
+      "type": "string"
+    },
+    "description": {
+      "type": "string"
+    }
+  }
+}

src/components/media/mosaic.json

@@ -0,0 +1,21 @@
+{
+  "collectionName": "components_media_mosaics",
+  "info": {
+    "displayName": "mosaic",
+    "description": ""
+  },
+  "options": {},
+  "attributes": {
+    "title": {
+      "type": "string"
+    },
+    "subtitle": {
+      "type": "string"
+    },
+    "items": {
+      "type": "component",
+      "repeatable": true,
+      "component": "media.mosaic-item"
+    }
+  }
+}

src/components/media/video-box.json

@@ -0,0 +1,25 @@
+{
+  "collectionName": "components_media_video_boxes",
+  "info": {
+    "displayName": "Video Box"
+  },
+  "options": {},
+  "attributes": {
+    "title": {
+      "type": "string"
+    },
+    "description": {
+      "type": "richtext"
+    },
+    "video": {
+      "allowedTypes": [
+        "images",
+        "files",
+        "videos",
+        "audios"
+      ],
+      "type": "media",
+      "multiple": false
+    }
+  }
+}

src/components/shared/seo.json

@@ -19,18 +19,23 @@
       "repeatable": false,
       "component": "shared.shared-image"
     },
-    "Meta": {
-      "displayName": "meta",
-      "type": "component",
-      "repeatable": true,
-      "component": "meta.meta"
-    },
     "preventIndexing": {
       "type": "boolean",
       "default": false
     },
     "structuredData": {
       "type": "json"
+    },
+    "metaType": {
+      "type": "enumeration",
+      "enum": [
+        "article",
+        "website",
+        "profile",
+        "video",
+        "music",
+        "book"
+      ]
     }
   }
 }

src/components/utils/navigate.json

@@ -0,0 +1,19 @@
+{
+  "collectionName": "components_utils_navigates",
+  "info": {
+    "displayName": "Navigate"
+  },
+  "options": {},
+  "attributes": {
+    "path": {
+      "type": "string"
+    },
+    "source": {
+      "type": "enumeration",
+      "enum": [
+        "external",
+        "internal"
+      ]
+    }
+  }
+}

src/extensions/users-permissions/content-types/user/schema.json

@@ -9,8 +9,7 @@
     "displayName": "User"
   },
   "options": {
-    "draftAndPublish": false,
+    "draftAndPublish": false
-    "timestamps": true
   },
   "attributes": {
     "username": {

src/plugins/vendors/README.md

@@ -0,0 +1,3 @@
+# Strapi plugin vendors
+
+A quick description of vendors.

src/plugins/vendors/admin/src/api/products.api.ts

@@ -0,0 +1,23 @@
+import {request} from "@strapi/helper-plugin";
+import {get, has, isEmpty, pickBy, set} from "lodash";
+import {auth} from '@strapi/helper-plugin';
+
+const productsRequests = {
+  getProducts: async () => {
+    try {
+      const response = await request("/vendors/products/list", {method: "GET", headers: {
+        Authorization: `Bearer ${auth.getToken()}`
+        }});
+
+      return response;
+    } catch (e) {
+      return {
+        error: true,
+        message: e
+      }
+    }
+
+    return [];
+  },
+};
+export default productsRequests;

src/plugins/vendors/admin/src/components/Initializer/index.tsx

@@ -0,0 +1,24 @@
+/**
+ *
+ * Initializer
+ *
+ */
+
+import { useEffect, useRef } from 'react';
+import pluginId from '../../pluginId';
+
+type InitializerProps = {
+  setPlugin: (id: string) => void;
+};
+
+const Initializer = ({ setPlugin }: InitializerProps) => {
+  const ref = useRef(setPlugin);
+
+  useEffect(() => {
+    ref.current(pluginId);
+  }, []);
+
+  return null;
+};
+
+export default Initializer;

src/plugins/vendors/admin/src/components/PluginIcon/index.tsx

@@ -0,0 +1,12 @@
+/**
+ *
+ * PluginIcon
+ *
+ */
+
+import React from 'react';
+import { Puzzle } from '@strapi/icons';
+
+const PluginIcon = () => <Puzzle />;
+
+export default PluginIcon;

src/plugins/vendors/admin/src/components/SubMenu/index.tsx

@@ -0,0 +1,141 @@
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+import React, {useState} from 'react';
+import {
+  SubNavLink,
+  SubNav,
+  SubNavHeader,
+  SubNavSections,
+  SubNavSection,
+  TextButton,
+  SubNavLinkSection,
+  Box
+} from '@strapi/design-system';
+import {Apps, ExclamationMarkCircle, Plus} from "@strapi/icons";
+
+import './index.css';
+import getPluginRoute from "../../utils/base-route";
+import {ROUTES} from "../../utils/constants";
+
+const SubMenu = () => {
+  const [search, setSearch] = useState('');
+  const catalog = [
+    {
+      id: 1,
+      label: 'Products',
+      icon: <ExclamationMarkCircle/>,
+      to: `${getPluginRoute()}${ROUTES.CatalogProducts}`,
+      active: false,
+    },
+    {
+      id: 2,
+      label: 'Categories',
+      to: `${getPluginRoute()}${ROUTES.CatalogCategories}`,
+      active: false,
+    },
+    {
+      id: 2,
+      label: 'Filters',
+      to: `${getPluginRoute()}${ROUTES.CatalogFilters}`,
+      active: false,
+    },
+  ];
+  const customers = [
+    {
+      id: 1,
+      label: 'Orders',
+      icon: <ExclamationMarkCircle/>,
+      to: `${getPluginRoute()}${ROUTES.CustomersOrders}`,
+      active: false,
+    },
+    {
+      id: 2,
+      label: 'Coupons',
+      to: `${getPluginRoute()}${ROUTES.CustomersCoupons}`,
+      active: false,
+    },
+  ];
+  const parameters = [
+    {
+      id: 1,
+      label: 'General',
+      icon: <ExclamationMarkCircle/>,
+      to: `${getPluginRoute()}${ROUTES.ParametersGeneral}`,
+      active: false,
+    },
+    {
+      id: 2,
+      label: 'Products',
+      to: `${getPluginRoute()}${ROUTES.ParametersProducts}`,
+      active: false,
+    },
+    {
+      id: 3,
+      label: 'Shipping',
+      icon: <Apps/>,
+      to: `${getPluginRoute()}${ROUTES.ParametersShipping}`,
+      active: true
+    },
+    {
+      id: 4,
+      label: 'Payments',
+      to: `${getPluginRoute()}${ROUTES.ParametersPayments}`,
+      active: false,
+    },
+    {
+      id: 4,
+      label: 'Accounts & Privacy',
+      to: `${getPluginRoute()}${ROUTES.ParametersAccounts}`,
+      active: false,
+    },
+    {
+      id: 4,
+      label: 'Emails',
+      to: `${getPluginRoute()}${ROUTES.ParametersEmails}`,
+      active: false,
+    },
+    {
+      id: 4,
+      label: 'Integration',
+      to: `${getPluginRoute()}${ROUTES.ParametersIntegration}`,
+      active: false,
+    },
+    {
+      id: 4,
+      label: 'Advanced',
+      to: `${getPluginRoute()}${ROUTES.ParametersAdvanced}`,
+      active: false,
+    }
+  ];
+
+  return (
+    <SubNav ariaLabel="Builder sub nav">
+      <SubNavHeader searchable value={search} onClear={() => setSearch('')}
+                    onChange={e => setSearch(e.target.value)} label="Vendors admin" searchLabel="Search..."/>
+      <SubNavSections>
+        <SubNavSection label="Catalog" collapsable badgeLabel={catalog.length.toString()}>
+          {catalog.map(link => <SubNavLink to={link.to} active={link.active} key={link.id}>
+            {link.label}
+          </SubNavLink>)}
+        </SubNavSection>
+        <SubNavSection label="Customers" collapsable badgeLabel={customers.length.toString()}>
+          {customers.map(link => <SubNavLink to={link.to} active={link.active} key={link.id}>
+            {link.label}
+          </SubNavLink>)}
+        </SubNavSection>
+        <SubNavSection label="Parameters" collapsable badgeLabel={parameters.length.toString()}>
+          {parameters.map(link => <SubNavLink to={link.to} key={link.id}>
+            {link.label}
+          </SubNavLink>)}
+        </SubNavSection>
+      </SubNavSections>
+    </SubNav>
+  );
+};
+
+export default SubMenu;

src/plugins/vendors/admin/src/index.tsx

@@ -0,0 +1,69 @@
+import {prefixPluginTranslations} from '@strapi/helper-plugin';
+
+import pluginPkg from '../../package.json';
+import pluginId from './pluginId';
+import Initializer from './components/Initializer';
+import PluginIcon from './components/PluginIcon';
+import {PERMISSION} from "./utils/constants";
+
+const name = pluginPkg.strapi.name;
+
+export default {
+  register(app: any) {
+    app.addMenuLink({
+      to: `/plugins/${pluginId}`,
+      icon: PluginIcon,
+      intlLabel: {
+        id: `${pluginId}.plugin.name`,
+        defaultMessage: name,
+      },
+      Component: async () => {
+        const component = await import(/* webpackChunkName: "[request]" */ './pages/App');
+
+        return component;
+      },
+      permissions: [
+        // Uncomment to set the permissions of the plugin here
+        // {
+        //   action: '', // the action name should be plugin::plugin-name.actionType
+        //   subject: null,
+        // },
+      ],
+    });
+    const plugin = {
+      id: pluginId,
+      initializer: Initializer,
+      isReady: false,
+      name,
+    };
+
+    app.registerPlugin(plugin);
+  },
+
+  bootstrap(app: any) {
+  },
+
+  async registerTrads(app: any) {
+    const {locales} = app;
+
+    const importedTrads = await Promise.all(
+      (locales as any[]).map((locale) => {
+        return import(`./translations/${locale}.json`)
+          .then(({default: data}) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
+};

src/plugins/vendors/admin/src/pages/App/index.css

@@ -0,0 +1,11 @@
+.vendors-container {
+  display: grid;
+  grid-template-columns: 14.5rem 1fr;
+  grid-template-rows: 1fr;
+}
+
+.vendors-container .vendors-section {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}

src/plugins/vendors/admin/src/pages/App/index.tsx

@@ -0,0 +1,38 @@
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+import React from 'react';
+import {Switch, Route} from 'react-router-dom';
+import {AnErrorOccurred} from '@strapi/helper-plugin';
+
+import getPluginRoute from "../../utils/base-route";
+import {ROUTES} from "../../utils/constants";
+import SubMenu from "../../components/SubMenu";
+
+import CatalogProductsPage from "../Catalog/Products";
+
+import HomePage from '../HomePage';
+
+import './index.css';
+
+const App = () => {
+  return (
+    <div className='vendors-container'>
+      <aside>
+        <SubMenu/>
+      </aside>
+      <section className='vendors-section'>
+        <Switch>
+          <Route path={getPluginRoute()} component={HomePage} exact/>
+          <Route path={`${getPluginRoute()}${ROUTES.CatalogProducts}`} component={CatalogProductsPage} exact/>
+          <Route component={AnErrorOccurred}/>
+        </Switch>
+      </section>
+    </div>
+  );
+};
+
+export default App;

src/plugins/vendors/admin/src/pages/Catalog/Categories/index.tsx

@@ -0,0 +1,19 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+import pluginId from '../../../pluginId';
+
+const CatalogCategoriesPage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s Category's Page</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default CatalogCategoriesPage;

src/plugins/vendors/admin/src/pages/Catalog/Filters/index.tsx

@@ -0,0 +1,19 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+import pluginId from '../../../pluginId';
+
+const CatalogFiltersPage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s Filter's Page</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default CatalogFiltersPage;

src/plugins/vendors/admin/src/pages/Catalog/Products/ProductEmpty/index.tsx

@@ -0,0 +1,19 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+import { EmptyStateLayout, Button } from '@strapi/design-system';
+import {Cross, Plus} from "@strapi/icons";
+
+const CatalogProductEmpty = () => {
+   return (
+    <EmptyStateLayout content="You don't have any content yet..." action={<Button variant="secondary" startIcon={<Plus />}>
+      Create your first product
+    </Button>} />
+  );
+};
+
+export default CatalogProductEmpty;

src/plugins/vendors/admin/src/pages/Catalog/Products/ProductHeader/index.tsx

@@ -0,0 +1,26 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React, {useState} from 'react';
+import {HeaderLayout, Button, Link} from '@strapi/design-system';
+import {ArrowLeft, Pencil, Plus} from "@strapi/icons";
+import getPluginRoute from "../../../../utils/base-route";
+
+const CatalogProductHeader = ({total}) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <HeaderLayout navigationAction={<Link startIcon={<ArrowLeft/>} to={getPluginRoute()}>
+      Go back
+    </Link>} primaryAction={<Button startIcon={<Plus/>} onClick={() => setIsVisible(true)}>
+      Add an entry
+    </Button>} secondaryAction={<Button variant="tertiary" startIcon={<Pencil/>}>
+      Edit
+    </Button>} title="Products" subtitle={total + " entries found"} as="h2"/>
+  );
+};
+
+export default CatalogProductHeader;

src/plugins/vendors/admin/src/pages/Catalog/Products/ProductPagination/index.tsx

@@ -0,0 +1,38 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+import {Pagination, PreviousLink, PageLink, NextLink} from '@strapi/design-system';
+import {NavLink} from 'react-router-dom';
+
+const CatalogProductPagination = () => {
+
+  const buildUrlWithPageParams = (page: number) => {
+    const url = new URL(window.location.href);
+    const searchParams = new URLSearchParams(url.searchParams);
+    searchParams.set("page", page.toString());
+    return `${url.pathname.replace('admin/', '')}?${searchParams.toString()}`;
+  }
+
+  return (
+    <Pagination>
+      <PreviousLink as={NavLink} to={buildUrlWithPageParams(1)}>
+        Previous
+      </PreviousLink>
+      <PageLink as={NavLink} to={buildUrlWithPageParams(1)}>
+        1
+      </PageLink>
+      <PageLink as={NavLink} to={buildUrlWithPageParams(2)}>
+        2
+      </PageLink>
+      <NextLink as={NavLink} to={buildUrlWithPageParams(2)}>
+        Next page
+      </NextLink>
+    </Pagination>
+  );
+};
+
+export default CatalogProductPagination;

src/plugins/vendors/admin/src/pages/Catalog/Products/ProductTable/index.tsx

@@ -0,0 +1,97 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+import {
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Td,
+  Th,
+  BaseCheckbox,
+  Typography,
+  Avatar,
+  Flex,
+  IconButton,
+  VisuallyHidden,
+  Box
+} from '@strapi/design-system';
+import {Pencil, Plus, Trash} from "@strapi/icons";
+
+const CatalogProductTable = ({items}) => {
+  const ROW_COUNT = 6;
+  const COL_COUNT = 10;
+
+  const entry = {
+    cover: 'https://avatars.githubusercontent.com/u/3874873?v=4',
+    description: 'Chez Léon is a human sized Parisian',
+    category: 'French cuisine',
+    contact: 'Leon Lafrite'
+  };
+
+  return (
+    <Table colCount={COL_COUNT} rowCount={ROW_COUNT}>
+      <Thead>
+        <Tr>
+          <Th>
+            <BaseCheckbox aria-label="Select all entries"/>
+          </Th>
+          <Th>
+            <Typography variant="sigma">ID</Typography>
+          </Th>
+          <Th>
+            <Typography variant="sigma">Cover</Typography>
+          </Th>
+          <Th>
+            <Typography variant="sigma">Description</Typography>
+          </Th>
+          <Th>
+            <Typography variant="sigma">Categories</Typography>
+          </Th>
+          <Th>
+            <Typography variant="sigma">Contact</Typography>
+          </Th>
+          <Th>
+            <VisuallyHidden>Actions</VisuallyHidden>
+          </Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {items.map(entry => <Tr key={entry.id}>
+          <Td>
+            <BaseCheckbox aria-label={`Select ${entry.contact}`}/>
+          </Td>
+          <Td>
+            <Typography textColor="neutral800">{entry.id}</Typography>
+          </Td>
+          <Td>
+            <Avatar src={entry.cover} alt={entry.contact}/>
+          </Td>
+          <Td>
+            <Typography textColor="neutral800">{entry.description}</Typography>
+          </Td>
+          <Td>
+            <Typography textColor="neutral800">{entry.category}</Typography>
+          </Td>
+          <Td>
+            <Typography textColor="neutral800">{entry.contact}</Typography>
+          </Td>
+          <Td>
+            <Flex>
+              <IconButton onClick={() => console.log('edit')} label="Edit" noBorder icon={<Pencil/>}/>
+              <Box paddingLeft={1}>
+                <IconButton onClick={() => console.log('delete')} label="Delete" noBorder icon={<Trash/>}/>
+              </Box>
+            </Flex>
+          </Td>
+        </Tr>)}
+      </Tbody>
+    </Table>
+  );
+};
+
+export default CatalogProductTable;

src/plugins/vendors/admin/src/pages/Catalog/Products/index.tsx

@@ -0,0 +1,50 @@
+/*
+ *
+ * HomePage
+ *
+ */
+import React, {useEffect, useState} from 'react';
+import {Box, Typography} from '@strapi/design-system';
+import {LoadingIndicatorPage, auth} from '@strapi/helper-plugin';
+
+import productsRequests from "../../../api/products.api";
+
+import CatalogProductTable from "./ProductTable";
+import CatalogProductPagination from "./ProductPagination";
+import CatalogProductEmpty from "./ProductEmpty";
+import CatalogProductHeader from "./ProductHeader";
+
+const CatalogProductsPage = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    productsRequests.getProducts().then((products) => {
+      console.log(products);
+      console.log(auth.getUserInfo());
+      setProducts(products);
+      setIsLoading(false);
+    });
+  }, [setProducts]);
+
+  const hasProducts = () => products.length > 0;
+
+  if (isLoading) return <LoadingIndicatorPage/>;
+
+  return (
+    <Box background={'#f6f6f9'}>
+      <CatalogProductHeader total={products.length}/>
+
+      {!hasProducts() && (<Box paddingLeft={10} paddingRight={10}>
+        <CatalogProductEmpty/>
+      </Box>)}
+
+      {hasProducts() && (<Box paddingLeft={10} paddingRight={10}>
+        <CatalogProductTable items={products}/>
+        <CatalogProductPagination/>
+      </Box>)}
+    </Box>
+  );
+};
+
+export default CatalogProductsPage;

src/plugins/vendors/admin/src/pages/Customers/Coupons/index.tsx

@@ -0,0 +1,19 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+import pluginId from '../../../pluginId';
+
+const CustomersCouponsPage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s Coupon's page</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default CustomersCouponsPage;

src/plugins/vendors/admin/src/pages/Customers/Orders/index.tsx

@@ -0,0 +1,19 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+import pluginId from '../../../pluginId';
+
+const CustomersOrdersPage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s Order's Page</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default CustomersOrdersPage;

src/plugins/vendors/admin/src/pages/HomePage/index.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 import pluginId from '../../pluginId';
 
-const DashboardPage: React.VoidFunctionComponent = () => {
+const HomePage = () => {
   return (
     <div>
       <h1>{pluginId}&apos;s HomePage</h1>
@@ -16,4 +16,4 @@ const DashboardPage: React.VoidFunctionComponent = () => {
   );
 };
 
-export default DashboardPage;
+export default HomePage;

src/plugins/vendors/admin/src/pages/Parameters/Accounts/index.tsx

@@ -0,0 +1,19 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+import pluginId from '../../../pluginId';
+
+const ParametersAccountsPage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s Shipping's parameter Page</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default ParametersAccountsPage;

src/plugins/vendors/admin/src/pages/Parameters/Advanced/index.tsx

@@ -0,0 +1,19 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+import pluginId from '../../../pluginId';
+
+const ParametersAdvancedPage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s Shipping's parameter Page</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default ParametersAdvancedPage;

src/plugins/vendors/admin/src/pages/Parameters/Emails/index.tsx

@@ -0,0 +1,19 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+import pluginId from '../../../pluginId';
+
+const ParametersEmailsPage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s Shipping's parameter Page</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default ParametersEmailsPage;

src/plugins/vendors/admin/src/pages/Parameters/General/index.tsx

@@ -0,0 +1,19 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+import pluginId from '../../../pluginId';
+
+const ParametersGeneralPage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s General's parameter Page</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default ParametersGeneralPage;

src/plugins/vendors/admin/src/pages/Parameters/Integration/index.tsx

@@ -0,0 +1,19 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+import pluginId from '../../../pluginId';
+
+const ParametersIntegrationPage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s Shipping's parameter Page</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default ParametersIntegrationPage;

src/plugins/vendors/admin/src/pages/Parameters/Payments/index.tsx

@@ -0,0 +1,19 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+import pluginId from '../../../pluginId';
+
+const ParametersPaymentsPage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s Shipping's parameter Page</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default ParametersPaymentsPage;

src/plugins/vendors/admin/src/pages/Parameters/Products/index.tsx

@@ -0,0 +1,19 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+import pluginId from '../../../pluginId';
+
+const ParametersProductsPage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s Product's parameter Page</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default ParametersProductsPage;

src/plugins/vendors/admin/src/pages/Parameters/Shipping/index.tsx

@@ -0,0 +1,19 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+import pluginId from '../../../pluginId';
+
+const ParametersShippingPage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s Shipping's parameter Page</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default ParametersShippingPage;

src/plugins/vendors/admin/src/pluginId.ts

@@ -0,0 +1,5 @@
+import pluginPkg from '../../package.json';
+
+const pluginId = pluginPkg.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, '');
+
+export default pluginId;

src/plugins/vendors/admin/src/translations/en.json

@@ -0,0 +1,3 @@
+{
+  "vendors.plugin.name": "Vendors Admin"
+}

src/plugins/vendors/admin/src/translations/fr.json

@@ -0,0 +1,3 @@
+{
+  "vendors.plugin.name": "Boutique Admin"
+}

src/plugins/vendors/admin/src/utils/base-route.ts

@@ -0,0 +1,5 @@
+const PLUGIN_ROUTE = '/plugins/vendors';
+
+export default function getPluginRoute() {
+  return PLUGIN_ROUTE;
+}

src/plugins/vendors/admin/src/utils/constants.ts

@@ -0,0 +1,19 @@
+export enum ROUTES {
+  CatalogProducts = '/catalog/products',
+  CatalogCategories = '/catalog/categories',
+  CatalogFilters = '/catalog/filters',
+  CustomersOrders = '/customers/orders',
+  CustomersCoupons = '/customers/coupons',
+  ParametersGeneral = '/settings/general',
+  ParametersProducts = '/settings/products',
+  ParametersShipping = '/settings/shipping',
+  ParametersPayments = '/settings/payments',
+  ParametersAccounts = '/settings/accounts',
+  ParametersEmails = '/settings/emails',
+  ParametersIntegration = '/settings/integration',
+  ParametersAdvanced = '/settings/advanced',
+}
+
+export enum PERMISSION {
+  CatalogProductsRead = 'plugin::vendors.read'
+}

src/plugins/vendors/admin/src/utils/getTrad.ts

@@ -0,0 +1,5 @@
+import pluginId from '../pluginId';
+
+const getTrad = (id: string) => `${pluginId}.${id}`;
+
+export default getTrad;

src/plugins/vendors/custom.d.ts

@@ -0,0 +1,5 @@
+declare module '@strapi/design-system/*';
+declare module '@strapi/design-system';
+declare module '@strapi/icons';
+declare module '@strapi/icons/*';
+declare module '@strapi/helper-plugin';

src/plugins/vendors/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "vendors",
+  "version": "0.0.0",
+  "description": "This is the description of the plugin.",
+  "strapi": {
+    "name": "vendors",
+    "description": "Description of vendors plugin",
+    "kind": "plugin"
+  },
+  "dependencies": {
+    "@strapi/design-system": "^1.6.3",
+    "@strapi/helper-plugin": "^4.10.5",
+    "@strapi/icons": "^1.6.3",
+    "prop-types": "^15.7.2",
+    "strapi-helper-plugin": "^3.6.11"
+  },
+  "devDependencies": {
+    "@strapi/typescript-utils": "^4.6.0",
+    "@types/react": "^17.0.53",
+    "@types/react-dom": "^17.0.18",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.26",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.4",
+    "styled-components": "^5.3.6",
+    "typescript": "5.0.4"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.4",
+    "styled-components": "^5.3.6"
+  },
+  "author": {
+    "name": "A Strapi developer"
+  },
+  "maintainers": [
+    {
+      "name": "A Strapi developer"
+    }
+  ],
+  "engines": {
+    "node": ">=14.19.1 <=18.x.x",
+    "npm": ">=6.0.0"
+  },
+  "scripts": {
+    "develop": "tsc -p tsconfig.server.json -w",
+    "build": "tsc -p tsconfig.server.json"
+  },
+  "license": "MIT"
+}

src/plugins/vendors/server/bootstrap.ts

@@ -0,0 +1,20 @@
+import { Strapi } from '@strapi/strapi';
+
+const RBAC_ACTIONS = [
+  {
+    section: 'plugins',
+    displayName: `Access to vendor's administration page`,
+    uid: 'read',
+    pluginName: 'vendors',
+  },
+];
+
+export default async ({ strapi }: { strapi: any }) => {
+  await strapi.admin.services.permission.actionProvider.registerMany(RBAC_ACTIONS);
+
+  strapi.store({
+    environment: '',
+    type: 'plugin',
+    name: 'vendors',
+  });
+};

src/plugins/vendors/server/config/index.ts

@@ -0,0 +1,4 @@
+export default {
+  default: {},
+  validator() {},
+};

src/plugins/vendors/server/content-types/index.ts

@@ -0,0 +1 @@
+export default {};

src/plugins/vendors/server/controllers/index.ts

@@ -0,0 +1,5 @@
+import products from './products';
+
+export default {
+  products,
+};

src/plugins/vendors/server/controllers/products.ts

@@ -0,0 +1,28 @@
+import {Strapi} from '@strapi/strapi';
+import {string} from "prop-types";
+
+export default ({strapi}: { strapi: Strapi }) => ({
+  index(ctx) {
+    ctx.body = strapi
+      .plugin('vendors')
+      .service('vendors')
+      .getWelcomeMessage();
+  },
+  async list(ctx) {
+    const user = ctx.state.user;
+    strapi.log.debug(JSON.stringify(user));
+    const vendor = await strapi.plugin('vendors')
+      .service('vendors')
+      .get(user.roles.code);
+
+    if (!vendor) {
+      strapi.log.error('No vendor found');
+    }
+
+    strapi.log.debug(JSON.stringify(vendor));
+
+    ctx.body = await strapi.plugin('vendors')
+      .service('products')
+      .list(vendor.id);
+  }
+});

src/plugins/vendors/server/destroy.ts

@@ -0,0 +1,5 @@
+import { Strapi } from '@strapi/strapi';
+
+export default ({ strapi }: { strapi: Strapi }) => {
+  // destroy phase
+};

src/plugins/vendors/server/index.ts

@@ -0,0 +1,23 @@
+import register from './register';
+import bootstrap from './bootstrap';
+import destroy from './destroy';
+import config from './config';
+import contentTypes from './content-types';
+import controllers from './controllers';
+import routes from './routes';
+import middlewares from './middlewares';
+import policies from './policies';
+import services from './services';
+
+export default {
+  register,
+  bootstrap,
+  destroy,
+  config,
+  controllers,
+  routes,
+  services,
+  contentTypes,
+  policies,
+  middlewares,
+};

src/plugins/vendors/server/middlewares/index.ts

@@ -0,0 +1 @@
+export default {};

src/plugins/vendors/server/policies/index.ts

@@ -0,0 +1 @@
+export default {};

src/plugins/vendors/server/register.ts

@@ -0,0 +1,5 @@
+import { Strapi } from '@strapi/strapi';
+
+export default ({ strapi }: { strapi: Strapi }) => {
+  // registeration phase
+};

src/plugins/vendors/server/routes/index.ts

@@ -0,0 +1,18 @@
+export default [
+  {
+    method: 'GET',
+    path: '/',
+    handler: 'products.index',
+    config: {
+      policies: [],
+    },
+  },
+  {
+    method: 'GET',
+    path: '/products/list',
+    handler: 'products.list',
+    config: {
+      policies: [],
+    },
+  },
+];

src/plugins/vendors/server/services/index.ts

@@ -0,0 +1,7 @@
+import products from './products';
+import vendors from './vendors';
+
+export default {
+  products,
+  vendors
+};

src/plugins/vendors/server/services/products.ts

@@ -0,0 +1,17 @@
+import {Strapi} from '@strapi/strapi';
+
+export default ({strapi}: { strapi: Strapi }) => ({
+  getWelcomeMessage() {
+    return 'Welcome to Strapi 🚀';
+  },
+  async list(vendorId: string) {
+    console.log(vendorId);
+    return await strapi.query('api::product.product').findMany({
+      where: {
+        vendors: {
+          id: vendorId
+        }
+      }
+    });
+  }
+});

src/plugins/vendors/server/services/vendors.ts

@@ -0,0 +1,14 @@
+import {Strapi} from '@strapi/strapi';
+
+export default ({strapi}: { strapi: Strapi }) => ({
+  getWelcomeMessage() {
+    return 'Welcome to Strapi 🚀';
+  },
+  async get(roleName: string) {
+    return await strapi.query('api::vendor.vendor').findOne({
+      where: {
+        slug: roleName
+      }
+    });
+  }
+});

src/plugins/vendors/strapi-admin.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./admin/src').default;

src/plugins/vendors/strapi-server.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./dist/server');

src/plugins/vendors/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@strapi/typescript-utils/tsconfigs/admin",
+
+  "compilerOptions": {
+    "target": "ESNext",
+    "strict": true
+  },
+
+  "include": ["admin", "custom.d.ts"],
+
+  "exclude": [
+    "node_modules/",
+    "dist/",
+
+    // Do not include server files in the server compilation
+    "server/",
+    // Do not include test files
+    "**/*.test.ts"
+  ]
+}

src/plugins/vendors/tsconfig.server.json

@@ -0,0 +1,25 @@
+{
+  "extends": "@strapi/typescript-utils/tsconfigs/server",
+
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "."
+  },
+
+  "include": [
+    // Include the root directory
+    "server",
+    // Force the JSON files in the src folder to be included
+    "server/**/*.json"
+  ],
+
+  "exclude": [
+    "node_modules/",
+    "dist/",
+
+    // Do not include admin files in the server compilation
+    "admin/",
+    // Do not include test files
+    "**/*.test.ts"
+  ]
+}