MWPW-153599: M@S Studio initial commit (#22)

* initial commit

* remove aue canvas

* remove aue canvas

* wip

* wip

* WIP

* npm test works

* fix eslint

* iterate over mas.js integration with the other modules

* iterate over mas.js integration with the other modules

* style fix

* fix test

* update readme

* add EOF

* add EOF

* fix tests

* pr review

* refactor test utils

* move sp-theme out of the wc

* add eof

* Rename Hub to Studio

.gitignore

@@ -1,6 +1,5 @@
 .hlx/*
 logs/*
-
 helix-importer-ui
 .DS_Store
 *.bak
@@ -10,4 +9,6 @@ coverage
 node_modules
 dist
 stats.json
-packages/web-components/screenshots/Chrome/failed/*
+web-components/screenshots/Chrome/failed/*
+server.crt
+server.key

.nvmrc

@@ -0,0 +1 @@
+20

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "tabWidth": 4
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "search.followSymlinks": false,
+    "files.exclude": {
+        "mas.js": true
+    }
+}

README.md

@@ -18,10 +18,16 @@ npm run lint
 ```
 
 ## Local development
+```
+npm run build
+aem up
+```
 
 Refer to the corresponding README.md under any of the packages:
-* commerce - constain generic commerce-related logic, 'price' and 'checkout-link' web components
+* commerce - contains generic commerce-related logic, 'price' and 'checkout-link' web components
 * web-components - merch-card, merch-offer-selector and other web components
+* studio - M@S Studio for creating, updating and publishing merch fragments
+
 
 #### Troubleshooting
 Please reach out to us in `#tacocat-friends` for any questions.

commerce/build.mjs

@@ -10,7 +10,7 @@ console.log(`you're building from branch ${branch} with commit ${commitHash}`);
 
 const { metafile } = await build({
     alias: {
-        react: './src/react-shim.js',
+        react: '../mocks/react.js',
     },
     banner: {
         js: `// branch: ${branch} commit: ${commitHash} ${new Date().toUTCString()}`,
@@ -20,7 +20,7 @@ const { metafile } = await build({
     format: 'esm',
     metafile: true,
     minify: true,
-    outfile: './lib/commerce.js',
+    outfile: '../lib/commerce.js',
     platform: 'browser',
     sourcemap: true,
     target: ['es2020'],

commerce/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "@wcms/commerce",
+    "name": "@adobe/mas-commerce",
     "version": "2.0.0",
     "files": [
         "lib",
@@ -13,48 +13,35 @@
     "scripts": {
         "build": "npm run build:bundle && npm run build:types",
         "build:bundle": "node ./build.mjs",
-        "build:types": "cp ./src/index.d.ts ./lib/commerce.d.ts",
+        "build:types": "cp ./src/index.d.ts ../lib/commerce.d.ts",
         "build:watch": "npm run build:bundle --watch",
         "test": "wtr --config ./web-test-runner.config.mjs --coverage --watch",
-        "test:ci": "wtr --config ./web-test-runner.config.mjs --debug",
-        "test:file": "wtr --config ./web-test-runner.config.mjs --coverage --watch"
+        "test:ci": "wtr --config ./web-test-runner.config.mjs"
     },
     "dependencies": {
-        "@dexter/tacocat-consonant-templates": "file:../deps/tacocat-consonant-templates-1.13.0.tgz",
-        "@dexter/tacocat-core": "file:../deps/tacocat-core-1.12.2.tgz",
-        "@dexter/tacocat-wcs-client": "file:../deps/tacocat-wcs-client-1.17.0.tgz",
-        "@pandora/commerce-checkout-url-builder": "file:../deps/commerce-checkout-url-builder-1.6.0.tgz",
-        "@pandora/data-models-odm": "file:../deps/data-models-odm-0.5.4.tgz",
-        "@pandora/data-source-wcs": "file:../deps/data-source-wcs-0.2.8.tgz",
-        "@pandora/data-source-utils": "file:../deps/data-source-utils-0.3.1.tgz",
-        "@pandora/fetch": "file:../deps/fetch-1.3.4.tgz",
-        "@pandora/react-auth-provider": "file:../deps/react-auth-provider-1.2.1.tgz",
-        "@pandora/react-env-provider": "file:../deps/react-env-provider-1.2.2.tgz",
-        "@pandora/react-fetch-provider": "file:../deps/react-fetch-provider-1.2.2.tgz",
-        "@pandora/logger": "file:../deps/logger-1.3.0.tgz"
+        "@dexter/tacocat-consonant-templates": "file:./internal/tacocat-consonant-templates-1.13.0.tgz",
+        "@dexter/tacocat-core": "file:./internal/tacocat-core-1.12.2.tgz",
+        "@dexter/tacocat-wcs-client": "file:./internal/tacocat-wcs-client-1.17.0.tgz",
+        "@pandora/commerce-checkout-url-builder": "file:./internal/commerce-checkout-url-builder-1.6.0.tgz",
+        "@pandora/data-models-odm": "file:./internal/data-models-odm-0.5.4.tgz",
+        "@pandora/data-source-wcs": "file:./internal/data-source-wcs-0.2.8.tgz",
+        "@pandora/data-source-utils": "file:./internal/data-source-utils-0.3.1.tgz",
+        "@pandora/fetch": "file:./internal/fetch-1.3.4.tgz",
+        "@pandora/react-auth-provider": "file:./internal/react-auth-provider-1.2.1.tgz",
+        "@pandora/react-env-provider": "file:./internal/react-env-provider-1.2.2.tgz",
+        "@pandora/react-fetch-provider": "file:./internal/react-fetch-provider-1.2.2.tgz",
+        "@pandora/logger": "file:./internal/logger-1.3.0.tgz"
     },
     "devDependencies": {
-        "@dexter/eslint-config-tacocat": "file:../deps/eslint-config-tacocat-1.1.2.tgz",
-        "@esm-bundle/chai": "4.3.4-fix.0",
-        "@esm-bundle/chai-as-promised": "7.1.1",
-        "@types/chai-as-promised": "7.1.5",
-        "@types/sinon": "10.0.15",
         "@web/dev-server-import-maps": "^0.1.1",
-        "@web/test-runner": "0.13.27",
-        "@web/test-runner-commands": "0.6.1",
-        "@web/test-runner-playwright": "0.10.1",
-        "esbuild": "0.18.11",
-        "eslint": "8.20.0",
-        "eslint-config-airbnb-base": "15.0.0",
-        "eslint-plugin-chai-friendly": "0.7.2",
-        "eslint-plugin-compat": "4.0.2",
-        "eslint-plugin-ecmalist": "1.0.8",
-        "eslint-plugin-import": "2.26.0",
-        "sinon": "13.0.1"
+        "@web/test-runner": "^0.13.27",
+        "@web/test-runner-commands": "^0.6.1",
+        "@web/test-runner-visual-regression": "^0.9.0",
+        "esbuild": "0.18.11"
     },
     "repository": {
         "type": "git",
         "url": "[email protected]:adobecom/mas.git",
-        "directory": "packages/commerce"
+        "directory": "commerce"
     }
 }

commerce/src/checkout-link.js

@@ -81,7 +81,7 @@ export class HTMLCheckoutAnchorElement extends HTMLAnchorElement {
         // @ts-ignore
         const elements = selectPlaceholders(
             HTMLCheckoutAnchorElement,
-            container
+            container,
         );
         return elements;
     }
@@ -119,7 +119,7 @@ export class HTMLCheckoutAnchorElement extends HTMLAnchorElement {
         }
         const options = service.collectCheckoutOptions(
             overrides,
-            this.placeholder
+            this.placeholder,
         );
         if (!options.wcsOsi.length) return false;
         let extraOptions;
@@ -137,14 +137,14 @@ export class HTMLCheckoutAnchorElement extends HTMLAnchorElement {
         offers = offers.map((offer) => selectOffers(offer, options));
         const checkoutAction = await service.buildCheckoutAction(
             offers.flat(),
-            { ...extraOptions, ...options }
+            { ...extraOptions, ...options },
         );
         return this.renderOffers(
             offers.flat(),
             options,
             {},
             checkoutAction,
-            version
+            version,
         );
     }
 
@@ -161,13 +161,13 @@ export class HTMLCheckoutAnchorElement extends HTMLAnchorElement {
         options,
         overrides = {},
         checkoutAction = undefined,
-        version = undefined
+        version = undefined,
     ) {
         if (!this.isConnected) return false;
         const service = useService();
         if (!service) return false;
         const extraOptions = JSON.parse(
-            this.placeholder.dataset.extraOptions ?? 'null'
+            this.placeholder.dataset.extraOptions ?? 'null',
         );
         options = { ...extraOptions, ...options, ...overrides };
         version ??= this.placeholder.togglePending(options);

commerce/src/checkout.js

@@ -55,14 +55,14 @@ export function Checkout({ providers, settings }, dataProviders) {
         const workflow = toEnumeration(
             checkoutWorkflow,
             CheckoutWorkflow,
-            Defaults.checkoutWorkflow
+            Defaults.checkoutWorkflow,
         );
         let workflowStep = CheckoutWorkflowStep.CHECKOUT;
         if (workflow === CheckoutWorkflow.V3) {
             workflowStep = toEnumeration(
                 checkoutWorkflowStep,
                 CheckoutWorkflowStep,
-                Defaults.checkoutWorkflowStep
+                Defaults.checkoutWorkflowStep,
             );
         }
         const options = omitProperties({
@@ -96,7 +96,7 @@ export function Checkout({ providers, settings }, dataProviders) {
         const checkoutAction = await dataProviders.getCheckoutAction?.(
             offers,
             options,
-            instance.imsSignedInPromise
+            instance.imsSignedInPromise,
         );
         if (checkoutAction) {
             return checkoutAction;
@@ -148,14 +148,14 @@ export function Checkout({ providers, settings }, dataProviders) {
             data.items.push(
                 quantity[0] === 1
                     ? { id: offerId }
-                    : { id: offerId, quantity: quantity[0] }
+                    : { id: offerId, quantity: quantity[0] },
             );
         } else {
             data.items.push(
                 ...offers.map(({ offerId }, index) => ({
                     id: offerId,
                     quantity: quantity[index] ?? Defaults.quantity,
-                }))
+                })),
             );
         }
         return buildCheckoutUrl(workflow, data);

commerce/src/ims.js

@@ -10,7 +10,6 @@ export function imsReady({ interval = 200, maxAttempts = 25 } = {}) {
         function poll() {
             if (window.adobeIMS?.initialized) {
                 resolve();
-                // eslint-disable-next-line no-plusplus
             } else if (++count > maxAttempts) {
                 log.debug('Timeout');
                 resolve();
@@ -24,7 +23,9 @@ export function imsReady({ interval = 200, maxAttempts = 25 } = {}) {
 
 /** @type {Commerce.Ims.imsSignedIn} */
 export function imsSignedIn(imsReadyPromise) {
-    return imsReadyPromise.then(() => window.adobeIMS.isSignedInUser());
+    return imsReadyPromise.then(
+        () => window.adobeIMS?.isSignedInUser() ?? false,
+    );
 }
 
 /** @type {Commerce.Ims.imsCountry} */
@@ -40,7 +41,7 @@ export function imsCountry(imsSignedInPromise) {
             (error) => {
                 log.error('Unable to get user country:', error);
                 return undefined;
-            }
+            },
         );
     });
 }