Add Admin UI SDK support

Author: nuzil

INSTALL.md

@@ -15,6 +15,7 @@ To required environment add:
 
 * I/O Management API with OAuth Server-to-Server
 * I/O Events
+* Adobe Commerce as a Cloud Service (SaaS) - is required to manage authorization between the application and your Adobe Commerce instance.
 
 
 ### Adobe API Mesh (Optional)
@@ -98,3 +99,13 @@ Add to `.env` line `FEED_GENERATOR_PROVIDER_ID=<id>`
 
 11. The app is ready to use. Please save the link to your application environment. Additionally, you can replicate all steps in your production environment and publish the application, so it will be available on your exchange dashboard.
 
+## Adding to Adobe Admin UI (SaaS)
+
+For Adobe Commerce SaaS, you can add the module to be available in your Commerce Admin.
+
+1. Go to Stores -> Configuration in your Adobe Commerce Admin
+2. Go to Adobe Services -> Admin UI SDK
+3. Click "Configure extensions" and choose respective Environment and Application.
+4. Save changes.
+
+For more information and troubleshooting please go to: https://developer.adobe.com/commerce/extensibility/admin-ui-sdk/configuration/

README.md

@@ -199,7 +199,9 @@ Header and Footer currently have a support to variables (Only 1 actually)
 
 Variables are defined using double curly braces (`{{ }}`) and correspond to fields in the Adobe Commerce GraphQL product output. For example, `{{sku}}` will be replaced with the product's SKU.
 
-##### Additional parameters
+##### Additional parameterss
+
+Note: The examples in 'Additional parameters' show how to use the parameters. The tag names may be different in your API, as they are specific to your system.
 
 ###### Repeating Tags with `count`
 
@@ -217,15 +219,14 @@ To select a specific element from an array, use the `index` property. This will
 <g:product_type>{{categories.name index="2"}}</g:product_type>
 ```
 
-##### Selecting Attribute with Specific code
+##### Selecting Attribute with Specific code (SaaS specific feature) 
 
 ```xml
 <color>{{attributes.value code='color'}}</color>
 ```
 
 Add attributes.value is an Array of attributes, to get specific attribute, you can use "code" parameter and define attribute with which code you want to use.
 
-
 #### Example for Google Feed
 
 ##### Header
@@ -242,11 +243,11 @@ Add attributes.value is an Array of attributes, to get specific attribute, you c
   <g:id>{{sku}}</g:id>
   <title>{{name}}</title>
   <description>{{description.html}}</description>
-  <link>https://www.URL.com/{{detail_page}}</link>
+  <link>https://www.URL.com/{{url_key}}</link>
   <g:image_link>{{image.url}}</g:image_link>
   <g:condition>new</g:condition>
   <g:price>{{price_range.maximum_price.final_price.value}} {{price_range.maximum_price.final_price.currency}}</g:price>
-  <g:product_type index=2>{{categories.name}}</g:product_type>
+  <g:category index="2">{{categories.name}}</g:category>
   <g:mpn>{{sku}}</g:mpn>
   <g:additional_image_link><![CDATA[{{image.url}}?width=350&height=350&fit=crop]]></g:additional_image_link>
 </item>
@@ -257,10 +258,11 @@ Add attributes.value is an Array of attributes, to get specific attribute, you c
 ```xml
 <item>
   <sku>{{sku}}</sku>
-  <weight>{{SimpleProduct||weight}}</weight>
-  <image>{{media_gallery.url count="2"}}</image>
+  <weight>{{description}}</weight>
+  <image>{{images.url count="2"}}</image>
   <color>{{attributes.value code='color'}}</color>
-  <price>{{SimpleProduct||price_range.maximum_price.final_price.value}}</price>
+  <color>{{attributes.value code='weight'}}</color>
+  <price>{{SimpleProductView||price.final.amount.value}} {{SimpleProductView||price.final.amount.currency}}</price>
 </item>
 ```
 

adobe-api/mesh/README.md

@@ -13,7 +13,7 @@ then
 
 ### API Mesh access
 
-Mesh api GraphQl endpoint follows next patter https://graph.adobe.io/api/{meshId}/graphql?api_key={mesh_api_key}
+Mesh api GraphQl endpoint follows next pattern https://graph.adobe.io/api/{meshId}/graphql?api_key={mesh_api_key}
 
 {mesh_api_key} can be moved to headers, so GQL endpoint will be
 https://graph.adobe.io/api/{meshId}/graphql and need to add header `X-Api-Key` with value `{mesh_api_key}`
@@ -47,7 +47,7 @@ After this `aio api-mesh` commands should works fine.
 
 -------------------------------------------------
 
-If Adobe Mesh Gql response fail need to check source URL (magento.host): SSL certificate MUST be VALID, otherwise Mesh GQL enpoint response error.
+If Adobe Mesh Gql response fail need to check source URL (magento.host): SSL certificate MUST be VALID, otherwise Mesh GQL endpoint response error.
 
 -------------------------------------------------
 
@@ -63,7 +63,7 @@ If Adobe Mesh Gql response fail need to check source URL (magento.host): SSL cer
         "handler": {
           "openapi": {
             "source": "https://magento.host/rest/schema?services=storeWebsiteRepositoryV1",
-             // can be udpated to /rest/schema?services=all if we want to use all rest enpoint in mesh
+             // can be updated to /rest/schema?services=all if we want to use all rest enpoint in mesh
             
             "schemaHeaders": {
               "Authorization": "Bearer {context.headers['x-ac-api-token']}" 

src/commerce-backend-ui-1/actions/regenerateFeed/index.js

@@ -1,5 +1,9 @@
 const { Core, Events } = require('@adobe/aio-sdk')
 const uuid = require('uuid')
+
+const { getImsAccessToken } = require('@adobe/commerce-sdk-auth')
+const { fromParams } = require('../auth')
+
 const {
   CloudEvent
 } = require("cloudevents");
@@ -12,8 +16,6 @@ async function main (params) {
 
   try {
 
-    console.log("called index.js")
- 
     params['payload'] = {"uuid": params.uuid}
 
     // check for missing request input parameters and headers
@@ -26,8 +28,14 @@ async function main (params) {
     }
 
     // extract the user Bearer token from the Authorization header
-    const token = getBearerToken(params)
+    let token = getBearerToken(params)
 
+    const authParams = fromParams(params)
+    if (authParams?.ims) {
+        const imsResponse = await getImsAccessToken(authParams.ims)
+        token = imsResponse.access_token
+    }
+
     // initialize the client
     const orgId = params.__ow_headers['x-gw-ims-org-id']
 

src/commerce-backend-ui-1/actions/utils/generation.js

@@ -42,15 +42,15 @@ async function generateFeed(uuid, params) {
                 "expiration": "2023-03-03T12:58:47.000Z",
                 "value": {
                     "created_at": "2023-03-02T12:58:47.770Z",
-                    "feedBody": "<item>\n  <g:id>{{sku}}</g:id>\n  <title>{{SimpleProduct||weight}}</title>\n  \n <g:image_link>{{image.url count='2'}}</g:image_link>\n </item>",
+                    "feedBody": "<item>\n  <g:id>{{sku}}</g:id>\n  <g:category index=\"2\">{{categories.name}}</g:category>\n  \n <g:image_link>{{image.url count='2'}}</g:image_link>\n </item>",
                     "feedFooter": "</items>",
                     "feedHeader": "<items>",
                     "feedName": "Test XML",
                     "feed_type": "xml",
                     "generated_at": "",
                     "status": "pending",
                     "store_code": "de||main_website_store||base",
-                    "searchQuery": "Motiv",
+                    "searchQuery": "Gum",
 //                    "filterQuery": "{\n   \"attribute\": \"price\",\n   \"range\": {\n     \"from\": 10,\n     \"to\": 100\n   }\n}"
                 }
             }

src/commerce-backend-ui-1/actions/utils/placeholderHandler.js

@@ -119,32 +119,33 @@ const handleCategories = (placeholder, item, feed, type) => {
   let itemCounter = 0;
   for (let placeholderPart of placeholderParts) {
 
-    if (value.toString() === "") { 
-
-      if (itemCounter === 0) {
-
-        /**
-         * @ToDo Consider to use index as a property for define position of the value in the array if there are multiple values
-         * Example: 
-         * Categories: {{categories.name index=0}}
-         * Json: 
-         * {
-         *  "categories": [
-         *   {"name": "Category 1"},
-         *   {"name": "Category 2"}
-         * ]
-         * }
-         */
-        // if (placeholderProperties['index'] !== undefined) {
-          // value = item[placeholderPart][placeholderProperties['index']];
-        // } else {
-          value = item[placeholderPart][0];
-        // }
-      } else {
-        value = item[placeholderPart]  
+    if (typeof value !== "undefined") {
+
+    if (value.toString() === "") {
+        if (itemCounter === 0) {
+          /**
+           * @ToDo Consider to use index as a property for define position of the value in the array if there are multiple values
+           * Example: 
+           * Categories: {{categories.name index=0}}
+           * Json: 
+           * {
+           *  "categories": [
+           *   {"name": "Category 1"},
+           *   {"name": "Category 2"}
+           * ]
+           * }
+           */
+          // if (placeholderProperties['index'] !== undefined) {
+            // value = item[placeholderPart][placeholderProperties['index']];
+          // } else {
+            value = item[placeholderPart][0];
+          // }
+        } else {
+          value = item[placeholderPart]  
+        }
+      } else { 
+        value = value[placeholderPart];
       }
-    } else { 
-      value = value[placeholderPart];
     }
     itemCounter++;
   }