Product picker update

universal-editor-product-picker/app.config.yaml

@@ -1,3 +1,17 @@
 extensions:
   universal-editor/ui/1:
     $include: src/universal-editor-ui-1/ext.config.yaml
+  aem/cf-console-admin/1:
+    operations:
+      view:
+        - type: web
+          impl: index.html#/cf-admin-console
+    actions: actions
+    web: src/universal-editor-ui-1/web-src
+    hooks:
+      pre-app-run: nod.e node_modules/@adobe/uix-guest/scripts/generate-metadata.js
+      pre-app-build: node node_modules/@adobe/uix-guest/scripts/generate-metadata.js
+      post-app-deploy: ./hooks/post-deploy.js
+
+
+

universal-editor-product-picker/src/app-metadata.json

@@ -0,0 +1,11 @@
+{
+    "extensions": [
+        {
+            "extensionPoint": "universal-editor/ui/1"
+        },
+        {
+            "extensionPoint": "aem/cf-console-admin/1",
+            "url": "index.html#/cf-admin-console"
+        }
+    ]
+}

universal-editor-product-picker/src/universal-editor-ui-1/web-src/app-metadata.json

@@ -0,0 +1,12 @@
+{
+    "extensions": [
+        {
+            "extensionPoint": "aem/cf-console-admin/1",
+            "url": "index.html#/cf-admin-console"
+        },
+        {
+            "extensionPoint": "universal-editor/ui/1",
+            "url": "index.html"
+        }
+    ]
+}

universal-editor-product-picker/src/universal-editor-ui-1/web-src/src/components/App.js

@@ -5,6 +5,7 @@
 import React from "react";
 import ErrorBoundary from "react-error-boundary";
 import { HashRouter as Router, Routes, Route } from "react-router-dom";
+import CFAdminEditorExtensionRegistration from './CFAdminEditorExtensionRegistration';
 import ExtensionRegistration from "./ExtensionRegistration";
 import ProductField from "./ProductField";
 import ProductPickerModal from "./ProductPickerModal";
@@ -20,11 +21,15 @@ function App() {
             element={<ExtensionRegistration />}
           />
           <Route
-            exact path="product-field"
+            exact path="/cf-admin-console"
+            element={<CFAdminEditorExtensionRegistration />}
+          />
+          <Route
+            exact path="/product-field"
             element={<ProductField />}
           />
           <Route
-            exact path="product-picker-modal"
+            exact path="/product-picker-modal"
             element={<ProductPickerModal />}
           />
         </Routes>

universal-editor-product-picker/src/universal-editor-ui-1/web-src/src/components/CFAdminEditorExtensionRegistration.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License")
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { useEffect } from 'react';
+import { Text } from '@adobe/react-spectrum';
+import { extensionId } from './constants';
+import { register } from '@adobe/uix-guest';
+import metadata from '../../app-metadata.json';
+
+export default function () {
+  useEffect(() => {
+    const init = async () => {
+      const guestConnection = await register({
+        id: extensionId,
+        metadata,
+        methods: {
+          field: {
+            getDefinitions: () => {
+              const dataType = guestConnection.configuration?.["component-type"] || "product_picker";
+              return [
+                {
+                  fieldNameExp: '^sku$',
+                  dataType: dataType,
+                  url: '/index.html#/product-field',
+                },
+              ];
+            },
+          },
+        },
+      });
+      localStorage.setItem('product-picker-is-cf-admin', 'true');
+    };
+    init().catch(console.error);
+  }, []);
+  return <Text>IFrame for integration with Host (AEM)... CF Admin Console</Text>;
+};

universal-editor-product-picker/src/universal-editor-ui-1/web-src/src/components/ExtensionRegistration.js

@@ -3,13 +3,15 @@
  */
 import { Text } from "@adobe/react-spectrum";
 import { register } from "@adobe/uix-guest";
-import { extensionId } from "./Constants";
+import { extensionId } from "./constants";
+import metadata from '../../app-metadata.json';
 
 function ExtensionRegistration() {
   const init = async () => {
     const guestConnection = await register({
       id: extensionId,
       debug: true,
+      metadata,
       methods: {
         canvas: {
           getRenderers() {
@@ -26,6 +28,7 @@ function ExtensionRegistration() {
         },
       },
     });
+    localStorage.setItem('product-picker-is-cf-admin', 'false');
   };
   init().catch(console.error);
 

universal-editor-product-picker/src/universal-editor-ui-1/web-src/src/components/ProductField.js

@@ -15,7 +15,8 @@ import {
   Item,
   Grid,
   ListView,
-
+  View,
+  Flex,
 } from "@adobe/react-spectrum";
 import { extensionId, localStorageKeySelectedProducts } from "./constants";
 import {
@@ -41,6 +42,8 @@ export default function () {
         parent: { paddingBottom: 10 },
       });
 
+      const currentProducts = await guestConnection.host.field.getDefaultValue();
+      setSelections(convertProductSelectionsFromStringToList(currentProducts));
     })().catch((e) =>
       console.log("Extension got the error during initialization:", e)
     );
@@ -58,28 +61,28 @@ export default function () {
       const selections = convertProductSelectionsFromStringToList(selectionsAsString);
       setSelections(selections);
 
-      window.addEventListener('storage', handleStorageChange);
     })().catch((e) =>
       console.log("Extension got the error during pre-selected products processing:", e)
     );
 
-    return () => {
-      window.removeEventListener('storage', handleStorageChange);
+    const saveProductField = (value) => {
+      guestConnection.host.field.onChange(value);
     };
-  }, [guestConnection]);
 
-  const saveProductField = (value) => {
-    guestConnection.host.field.onChange(value);
-  };
+    const handleStorageChange = (event) => {
+      if (event.key === localStorageKeySelectedProducts) {
+        const selectionsAsString = event.newValue;
+        saveProductField(selectionsAsString);
+        setSelections(convertProductSelectionsFromStringToList(selectionsAsString));
+      }
+    };
 
-  const handleStorageChange = (event) => {
-    if (event.key === localStorageKeySelectedProducts) {
-      const selectionsAsString = event.newValue;
+    window.addEventListener('storage', handleStorageChange);
 
-      saveProductField(selectionsAsString);
-      setSelections(convertProductSelectionsFromStringToList(selectionsAsString));
-    }
-  };
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, [guestConnection]);
 
   const setStorageValue = (value) => {
     localStorage.setItem(localStorageKeySelectedProducts, value);
@@ -118,38 +121,49 @@ export default function () {
     getAllowedDropOperations: () => ['move'],
   });
 
+  const isCFAdmin = localStorage.getItem('product-picker-is-cf-admin') === 'true';
+
   return (
     <Provider theme={defaultTheme}>
-      <Grid
-        areas={[
-          "field-label product-picker-button",
-          "selected-products-list selected-products-list",
-        ]}
-        columns={["2fr", "1fr"]}
-        alignItems={"center"}
-        rowGap={"size-100"}
-      >
-        <LabeledValue label="Selected Products" value="" gridArea="field-label" />
-        <TooltipTrigger crossOffset={25} placement="end bottom" gridArea="product-picker-button">
-          <ActionButton onPress={showModal} aria-label="Select Products">
-            <Box />
-          </ActionButton>
-          <Tooltip>Select product</Tooltip>
-        </TooltipTrigger>
-        <ListView
-          items={selections}
-          dragAndDropHooks={dragAndDropHooks}
-          selectionMode="multiple"
-          selectionStyle="highlight"
-          width="100%"
-          height="100%"
-          density="spacious"
-          aria-label="Selected Products"
-          gridArea="selected-products-list"
-        >
-          {(item) => <Item>{item.sku}</Item>}
-        </ListView>
-      </Grid>
+      <View padding={isCFAdmin ? "" : "size-100"} marginTop={isCFAdmin ? "size-100" : ""} backgroundColor={isCFAdmin ? "gray-50" : ""}>
+        <Grid
+          areas={[
+            "field-label product-picker-button",
+            "selected-products-list selected-products-list",
+          ]}
+          columns={["2fr", "auto"]}
+          alignItems={"center"}
+          rowGap={"size-100"}
+        > 
+          <LabeledValue label="Products Picker" value="" gridArea="field-label" />
+          <Flex direction="row-reverse">
+            <ActionButton onPress={showModal} aria-label="Select Products" label="Select" gridArea="product-picker-button">
+              <Box />
+              <span 
+                style={{
+                  fontSize: "var(--spectrum-fieldlabel-text-size, var(--spectrum-global-dimension-font-size-75))",
+                  paddingLeft: "var(--spectrum-actionbutton-icon-padding-x, var(--spectrum-global-dimension-size-85))",
+                  paddingRight: "var(--spectrum-actionbutton-icon-padding-x, var(--spectrum-global-dimension-size-85))"
+                }}
+              >Select products</span>
+            </ActionButton>
+          </Flex>
+          {selections.length > 0 && (
+            <ListView
+              items={selections}
+              dragAndDropHooks={dragAndDropHooks}
+              selectionMode="multiple"
+              selectionStyle="highlight"
+              width="100%"
+              density="spacious"
+              aria-label="Products"
+              gridArea="selected-products-list"
+            >
+              {(item) => <Item>{item.sku}</Item>}
+            </ListView>
+          )}
+        </Grid>
+      </View>
     </Provider>
   );
 };