@riosst100/pwa-marketplace 1.0.0

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@riosst100/pwa-marketplace",
+  "author": "riosst100@gmail.com",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "pwa-studio": {
+    "targets": {
+      "intercept": "src/intercept.js"
+    }
+  },
+  "dependencies": {
+    "axios": "^1.6.5"
+  },
+  "license": "MIT",
+  "private": false
+}

package/src/Utilities/graphQL.js

@@ -0,0 +1,76 @@
+const debug = require('@magento/pwa-buildpack/lib/util/debug').makeFileLogger(__filename);
+
+const fetch = require('node-fetch');
+const graphQLQueries = require('@riosst100/pwa-multi-website/src/queries');
+const https = require('https');
+
+// To be used with `node-fetch` in order to allow self-signed certificates.
+const httpsAgent = new https.Agent({ rejectUnauthorized: false });
+
+const fetchQuery = query => {
+    const targetURL = new URL('graphql', process.env.MAGENTO_BACKEND_URL);
+    const headers = {
+        'Content-Type': 'application/json',
+        'Accept-Encoding': 'gzip',
+        Accept: 'application/json',
+        'User-Agent': 'pwa-buildpack',
+        Host: targetURL.host
+    };
+
+    if (process.env.STORE_VIEW_CODE) {
+        headers['store'] = process.env.STORE_VIEW_CODE;
+    }
+
+    debug('Fetching query: %s', query);
+
+    return fetch(targetURL.toString(), {
+        agent: targetURL.protocol === 'https:' ? httpsAgent : null,
+        body: JSON.stringify({ query }),
+        headers: headers,
+        method: 'POST'
+    })
+        .then(result => {
+            debug('Result received');
+            debug('Status: %s', result.status);
+
+            return result.json();
+        })
+        .catch(err => {
+            debug('Error received: %s', err);
+
+            console.error(err);
+
+            throw err;
+        })
+        .then(json => {
+            if (json && json.errors && json.errors.length > 0) {
+                console.warn(
+                    '\x1b[36m%s\x1b[0m',
+                    'As of version 12.1.0, PWA Studio requires the appropriate PWA metapackage to be installed on the backend.\n' +
+                        'For more information, refer to the 12.1.0 release notes here: https://github.com/magento/pwa-studio/releases/tag/v12.1.0'
+                );
+
+                return Promise.reject(
+                    new Error(
+                        json.errors[0].message +
+                            ` (... ${json.errors.length} errors total)`
+                    )
+                );
+            }
+
+            return json.data;
+        });
+};
+
+/**
+ * An async function that will fetch the availableStores
+ *
+ * @returns Promise
+ */
+const getAvailableWebsitesConfigData = () => {
+    return fetchQuery(graphQLQueries.getAvailableWebsitesConfigData);
+};
+
+module.exports = {
+    getAvailableWebsitesConfigData
+};

package/src/componentOverrideMapping.js

@@ -0,0 +1,11 @@
+module.exports = componentOverrideMapping = {
+    [`@magento/venia-ui/lib/components/Adapter/adapter.js`]: '@riosst100/pwa-multi-website/src/overwrites/venia-ui/lib/components/Adapter/adapter.js',
+    [`@magento/venia-ui/lib/components/Header/header.js`]: '@riosst100/pwa-multi-website/src/overwrites/venia-ui/lib/components/Header/header.js',
+    [`@magento/venia-ui/lib/components/Header/storeSwitcher.js`]: '@riosst100/pwa-multi-website/src/overwrites/venia-ui/lib/components/Header/storeSwitcher.js',
+    [`@magento/venia-ui/lib/components/Header/switcherItem.js`]: '@riosst100/pwa-multi-website/src/overwrites/venia-ui/lib/components/Header/switcherItem.js',
+    [`@magento/venia-ui/lib/components/StoreCodeRoute/storeCodeRoute.js`]: '@riosst100/pwa-multi-website/src/overwrites/venia-ui/lib/components/StoreCodeRoute/storeCodeRoute.js',
+    [`@magento/peregrine/lib/talons/Adapter/useAdapter.js`]: '@riosst100/pwa-multi-website/src/overwrites/peregrine/lib/talons/Adapter/useAdapter.js',
+    [`@magento/peregrine/lib/talons/Header/useStoreSwitcher.js`]: '@riosst100/pwa-multi-website/src/overwrites/peregrine/lib/talons/Header/useStoreSwitcher.js',
+    [`@magento/peregrine/lib/talons/Header/storeSwitcher.gql.js`]: '@riosst100/pwa-multi-website/src/overwrites/peregrine/lib/talons/Header/storeSwitcher.gql.js',
+    [`@magento/pwa-buildpack/lib/queries/getAvailableStoresConfigData.graphql`]: '@riosst100/pwa-multi-website/src/overwrites/pwa-buildpack/lib/queries/getAvailableStoresConfigData.graphql'
+};

package/src/components/Header/websiteSwitcher.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+
+import { useWebsiteSwitcher } from '@riosst100/pwa-multi-website/src/talons/Header/useWebsiteSwitcher';
+import { availableRoutes } from '@magento/venia-ui/lib/components/Routes/routes';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './websiteSwitcher.module.css';
+import WebsiteSwitcherItem from './websiteSwitcherItem';
+import Shimmer from './websiteSwitcher.shimmer';
+
+const WebsiteSwitcher = props => {
+    const {
+        availableStores,
+        currentGroupName,
+        currentWebsiteName,
+        handleSwitchWebsite,
+        storeGroups,
+        storeMenuRef,
+        storeMenuTriggerRef,
+        storeMenuIsOpen,
+        handleTriggerClick
+    } = useWebsiteSwitcher({ availableRoutes });
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const menuClassName = storeMenuIsOpen ? classes.menu_open : classes.menu;
+
+    if (!availableStores) return <Shimmer />;
+
+    if (availableStores.size <= 1) return null;
+
+    const groups = [];
+    const hasOnlyOneGroup = storeGroups.size === 1;
+
+    storeGroups.forEach((group, key) => {
+        const stores = [];
+        group.forEach(({ storeGroupName, websiteCode, websiteName, isCurrent, storeCode }) => {
+            let label = `${websiteName}`;
+            stores.push(
+                <li
+                    aria-selected={currentWebsiteName}
+                    role="option"
+                    key={storeCode}
+                    className={classes.menuItem}
+                    data-cy="WebsiteSwitcher-view"
+                >
+                    <WebsiteSwitcherItem
+                        active={isCurrent}
+                        onClick={handleSwitchWebsite}
+                        option={storeCode}
+                        option2={websiteCode}
+                    >
+                        {label}
+                    </WebsiteSwitcherItem>
+                </li>
+            );
+        });
+
+        groups.push(
+            <ul
+                role="listbox"
+                className={classes.groupList}
+                key={key}
+                data-cy="WebsiteSwitcher-group"
+            >
+                {stores}
+            </ul>
+        );
+    });
+
+    let triggerLabel = `${currentWebsiteName}`;
+
+    return (
+        <div className={classes.root} data-cy="WebsiteSwitcher-root">
+            <button
+                data-cy="WebsiteSwitcher-triggerButton"
+                className={classes.trigger}
+                aria-label={currentWebsiteName || ''}
+                onClick={handleTriggerClick}
+                ref={storeMenuTriggerRef}
+                data-cy="WebsiteSwitcher-trigger"
+                aria-expanded={storeMenuIsOpen}
+            >
+                {triggerLabel}
+            </button>
+            <div
+                ref={storeMenuRef}
+                className={menuClassName}
+                data-cy="WebsiteSwitcher-menu"
+            >
+                <div className={classes.groups}>{groups}</div>
+            </div>
+        </div>
+    );
+};
+
+export default WebsiteSwitcher;
+
+WebsiteSwitcher.propTypes = {
+    classes: shape({
+        groupList: string,
+        groups: string,
+        menu: string,
+        menu_open: string,
+        menuItem: string,
+        root: string,
+        trigger: string
+    })
+};

package/src/components/Header/websiteSwitcher.module.css

@@ -0,0 +1,111 @@
+.root {
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-start from global;
+    composes: max-w-site from global;
+    composes: mx-auto from global;
+    composes: my-0 from global;
+    composes: px-xs from global;
+    composes: py-2xs from global;
+    composes: relative from global;
+
+    composes: sm_justify-items-end from global;
+}
+
+.trigger {
+    composes: max-w-[15rem] from global;
+    composes: overflow-ellipsis from global;
+    composes: overflow-hidden from global;
+    composes: whitespace-nowrap from global;
+
+    composes: sm_max-w-full from global;
+}
+
+.menu {
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: bottom-md from global;
+    composes: left-xs from global;
+    composes: max-w-[90vw] from global;
+    composes: opacity-0 from global;
+    composes: pb-2xs from global;
+    composes: pt-2xs from global;
+    composes: right-auto from global;
+    composes: rounded from global;
+    composes: shadow-menu from global;
+    composes: top-auto from global;
+    composes: w-max from global;
+    composes: z-menu from global;
+    transform: translate3d(0, -8px, 0);
+    transition-duration: 192ms;
+    transition-timing-function: var(--venia-global-anim-out);
+    transition-property: opacity, transform, visibility;
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
+    visibility: hidden;
+
+    composes: sm_bottom-auto from global;
+    composes: sm_left-auto from global;
+    composes: sm_right-xs from global;
+    composes: sm_top-md from global;
+}
+
+.menu_open {
+    composes: menu;
+
+    composes: opacity-100 from global;
+    transform: translate3d(0, 4px, 0);
+    transition-duration: 224ms;
+    transition-timing-function: var(--venia-global-anim-in);
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
+    visibility: visible;
+}
+
+.menuItem {
+    composes: hover_bg-subtle from global;
+}
+
+.groups {
+    composes: max-h-[24rem] from global;
+    composes: overflow-auto from global;
+}
+
+.groupList {
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: pb-2xs from global;
+    composes: pt-2xs from global;
+
+    composes: last_border-none from global;
+}
+
+/*
+ * Mobile-specific styles.
+ */
+
+@media (max-width: 639px) {
+    .root:only-child {
+        grid-column: 2;
+    }
+
+    /* TODO @TW: cannot compose */
+    .root:last-child .menu {
+        right: 1rem;
+        left: auto;
+    }
+
+    .menu {
+        transform: translate3d(0, 8px, 0);
+    }
+
+    .menu_open {
+        transform: translate3d(0, -4px, 0);
+    }
+}

package/src/components/Header/websiteSwitcher.shimmer.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+
+export default () => {
+    return <Shimmer width={6} height={2.25} />;
+};

package/src/components/Header/websiteSwitcherItem.js

@@ -0,0 +1,47 @@
+import React, { useCallback } from 'react';
+import { Check } from 'react-feather';
+import { bool, func, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon/icon';
+import defaultClasses from './websiteSwitcherItem.module.css';
+
+const WebsiteSwitcherItem = props => {
+    const { active, onClick, option, option2, children } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const handleClick = useCallback(() => {
+        onClick(option, option2);
+    }, [option, option2, onClick]);
+
+    const activeIcon = active ? (
+        <Icon data-cy="WebsiteSwitcherItem-activeIcon" size={20} src={Check} />
+    ) : null;
+
+    return (
+        <button
+            data-cy="WebsiteSwitcherItem-button"
+            className={classes.root}
+            disabled={active}
+            onClick={handleClick}
+        >
+            <span className={classes.content}>
+                <span className={classes.text}>{children}</span>
+                {activeIcon}
+            </span>
+        </button>
+    );
+};
+
+WebsiteSwitcherItem.propTypes = {
+    active: bool,
+    classes: shape({
+        content: string,
+        root: string,
+        text: string
+    }),
+    onClick: func,
+    option: string
+};
+
+export default WebsiteSwitcherItem;

package/src/components/Header/websiteSwitcherItem.module.css

@@ -0,0 +1,20 @@
+.root {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: w-full from global;
+}
+
+.content {
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: grid-cols-[1fr] from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: px-xs from global;
+    composes: py-2xs from global;
+    composes: w-full from global;
+}
+
+.text {
+    composes: text-left from global;
+}

package/src/index.js

@@ -0,0 +1,7 @@
+/**
+ * Custom index for the extension attention this file should be not delete!
+ * It is use as main file but this can be empty by default only need to exits.
+ *
+ * A project index.js should contain default exports like:
+ * export { default } from './components/main';
+ */

package/src/intercept.js

@@ -0,0 +1,50 @@
+const componentOverrideMapping = require('./componentOverrideMapping');
+const moduleOverridePlugin = require('./moduleOverrideWebpackPlugin');
+const { DefinePlugin } = require('webpack');
+const { getAvailableWebsitesConfigData } = require('./Utilities/graphQL');
+
+/**
+ * Custom intercept file for the extension
+ * By default you can only use target of @magento/pwa-buildpack.
+ *
+ * If do want extend @magento/peregrine or @magento/venia-ui
+ * you should add them to peerDependencies to your package.json
+ *
+ * If you want to add overwrites for @magento/venia-ui components you can use
+ * moduleOverrideWebpackPlugin and componentOverrideMapping
+ */
+module.exports = async targets => {
+  targets.of('@magento/pwa-buildpack').specialFeatures.tap(flags => {
+      /**
+       *  Wee need to activated esModules and cssModules to allow build pack to load our extension
+       * {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}.
+       */
+      flags[targets.name] = { esModules: true, cssModules: true, graphqlQueries: true };
+  });
+
+  targets.of('@magento/pwa-buildpack').webpackCompiler.tap(compiler => {
+      new moduleOverridePlugin(componentOverrideMapping).apply(compiler);
+  });
+
+  targets.of('@magento/pwa-buildpack').envVarDefinitions.tap((defs) => {
+    defs.sections.push({
+      name: "Default Website Code",
+      variables: [
+        {
+          name: "WEBSITE_CODE",
+          type: "str",
+          desc: "Default Website Code for Multi Website Extension",
+        },
+      ],
+    });
+  });
+
+  const availableWebsites = await getAvailableWebsitesConfigData();
+
+  targets.of('@magento/pwa-buildpack').webpackCompiler.tap(compiler => {
+    new DefinePlugin({
+      AVAILABLE_WEBSITES: JSON.stringify(availableWebsites.availableStoresByUserIp),
+      WEBSITE_CODE: process.env.WEBSITE_CODE
+    }).apply(compiler);
+  });
+};

package/src/moduleOverrideWebpackPlugin.js

@@ -0,0 +1,71 @@
+const path = require('path');
+const glob = require('glob');
+
+module.exports = class NormalModuleOverridePlugin {
+  constructor(moduleOverrideMap) {
+    this.name = 'NormalModuleOverridePlugin';
+    this.moduleOverrideMap = moduleOverrideMap;
+  }
+
+  requireResolveIfCan(id, options = undefined) {
+    try {
+      return require.resolve(id, options);
+    } catch (e) {
+      return undefined;
+    }
+  }
+  resolveModulePath(context, request) {
+    const filePathWithoutExtension = path.resolve(context, request);
+    const files = glob.sync(`${filePathWithoutExtension}@(|.*)`);
+    if (files.length === 0) {
+      throw new Error(`There is no file '${filePathWithoutExtension}'`);
+    }
+    if (files.length > 1) {
+      throw new Error(
+        `There is more than one file '${filePathWithoutExtension}'`
+      );
+    }
+
+    return require.resolve(files[0]);
+  }
+
+  resolveModuleOverrideMap(context, map) {
+    return Object.keys(map).reduce(
+      (result, x) => ({
+        ...result,
+        [require.resolve(x)]:
+          this.requireResolveIfCan(map[x]) ||
+          this.resolveModulePath(context, map[x]),
+      }),
+      {}
+    );
+  }
+
+  apply(compiler) {
+    if (Object.keys(this.moduleOverrideMap).length === 0) {
+      return;
+    }
+
+    const moduleMap = this.resolveModuleOverrideMap(
+      compiler.context,
+      this.moduleOverrideMap
+    );
+
+    compiler.hooks.normalModuleFactory.tap(this.name, (nmf) => {
+      nmf.hooks.beforeResolve.tap(this.name, (resolve) => {
+        if (!resolve) {
+          return;
+        }
+
+        const moduleToReplace = this.requireResolveIfCan(resolve.request, {
+          paths: [resolve.context],
+        });
+        if (moduleToReplace && moduleMap[moduleToReplace]) {
+          resolve.request = moduleMap[moduleToReplace];
+        }
+
+        return resolve;
+      });
+    });
+  }
+};