Init Commit

Author: nuzil

.gitignore

@@ -0,0 +1,45 @@
+keys
+
+# package directories
+node_modules
+jspm_packages
+
+# build
+build
+dist
+.manifest-dist.yml
+
+# Config
+config.json
+.env*
+.aio
+
+# Adobe I/O console config
+console.json
+
+# Test output
+junit.xml
+
+# IDE & Temp
+.cache
+.idea
+.nyc_output
+.vscode
+coverage
+.aws.tmp.creds.json
+.wskdebug.props.tmp
+
+# Parcel
+.parcel-cache
+
+# OSX
+.DS_Store
+
+# yeoman
+.yo-repository
+
+# logs folder for aio-run-detached
+logs
+
+app.config.yaml
+adobe-api/mesh/mesh.json

DEVELOPMENT.md

@@ -0,0 +1,14 @@
+## Development information and test API keys for development process
+
+```
+apiKey: e973d547a68c403c87796a420b0e79cb
+mesh_source_url: https://edge-sandbox-graph.adobe.io/api/someUUID/graphql
+m-ac-rest-api-token: gc4chwfttwfewreey1jkk3nyzhjnened
+m-ac-gql-store-code: default
+```
+
+
+### Mesh.json variables:
+
+MAGENTOURL = https://eventing-clzaefa-bm5l4hpp6cb3s.eu-4.magentosite.cloud/
+TOKEN = gc4chwfttwfewreey1jkk3nyzhjnened

ExtensionRegistration.js

@@ -0,0 +1,17 @@
+import { register } from '@adobe/uix-guest';
+
+export default function ExtensionRegistration() {
+  init().catch(console.error);
+  return <></>;
+ }
+
+ const extensionId = 'comwrap-feed-generator'
+ 
+ const init = async () => {
+   await register({
+     id: extensionId,
+     methods: {
+     }
+   }
+ )
+}

INSTALL.md

@@ -0,0 +1,54 @@
+# Installation instructions
+
+## Prerequisites
+
+- Node.js 18+
+- Adobe I/O CLI
+
+## Adobe Console preparation
+
+### Create a new project
+
+Go to console.adobe.io and create a new project from template: "App Builder"
+
+To required environment add: 
+
+* I/O Management API with OAuth Server-to-Server
+* I/O Events
+
+
+### Adobe Api Mesh
+
+1. Add "Api Mesh" service to your environment.
+2. Rename file `adobe-api/mesh.json.dist` into `adobe-api/mesh.json`.
+3. Change required options inside `adobe-api/mesh.json`.
+    * MAGENTO-URL
+    * MAGENTO-TOKEN
+3. Provision Mesh by using this file.
+
+## Installation
+
+1. Clone the repository
+2. Run `npm install` to install the dependencies
+3. Go to [Project](https://developer.adobe.com/console), select Environment and click on "Download All" button.
+4. Execute `aio app use <path-to-file>` with file you just downloaded. (Merge files if you already have .env file)
+5. Edit `.env` file with your project details.
+Set following variables: 
+
+```
+MESH_SOURCE_URL= // Your Mesh URL 
+AC_API_TOKEN= // Adobe Commerce Integration Bearer Token
+AC_DEFAULT_STORE_CODE= // Default Adobe Commerce Store Code
+```
+
+6. Create Event Provider for Feed Generator. Run `aio event provider create` and define name. Copy `id` from output.
+Add to `.env` line `FEED_GENERATOR_PROVIDER_ID=<id>`
+
+7. Create Event Metadata for Feed Generator. Run `aio event eventmetadata create PROVIDERID`. Define event code as `feed.generate` and define description as `Generate Feed`.
+
+8. Go To your application environment via Browser. Click on "Add Service" -> Event -> 3rd Party Custom Events -> And select your provider and event subscription. In Receiver define "Runtime action" as `processGeneration` action.
+
+9. Run `aio app deploy` to deploy the app.
+
+10. App is ready to use. Pls save the link to your application environment. Additionally you can replacate all steps on your Production environment and publich application, so it will be available on your exchange dashboard.
+

README.md

@@ -0,0 +1,224 @@
+# Comwrap Feed Generator
+
+Feed Generator is a service that simplifies the process of generating product feeds. It ensures that you can easily integrate your store with various systems. With just a few configuration steps you can generate a feed that can be consumed by third-party marketplaces like Google and Facebook — or that can be used for integrating with any other third-party system. Currently module supports XML feed format. Another formats will come in the future.
+
+## Installation
+
+Pls see [INSTALL.md](INSTALL.md) for more details.
+
+## Home page / Grid
+
+On the application home page you will see list of the feeds:
+
+![Home page](./docs/images/a6b730f0-513e-4c80-ab0a-460cc80d4efd.png)
+
+For each feed you can: 
+
+* Edit Feed
+* Delete Feed
+
+On a feed list you can find: 
+
+* Feed name
+* UUID of the feed
+* Adobe Commerce Store to be used
+* File that being generated
+* Date of feed creation
+* Date of feed generation
+* Type of the feed
+* Status of the feed: 
+
+* **Pending - nothing yet happened with the feed, it just was created OR edited**
+* **In Process - generation is currently in progress**
+* **Generated - Feed it ready to be used**
+
+## Edit Feed
+
+On a Grid page you can click on a Feed name, and you will be landed on Edit page of selected feed: 
+
+![Edit Feed](./docs/images/c6960caf-13fb-4d76-a42b-e43d86b802bd.png)
+
+Here you can change the following elements: 
+
+| Field Name            | Description                                                                 |
+|-----------------------|-----------------------------------------------------------------------------|
+| Feed Name             | Name of the feed (will be used only on application UI)                      |
+| Feed Type             | Type of the feed:                                                           |
+|                       | - XML                                                                       |
+|                       | - CSV - Coming in future releases                                           |
+|                       | - JSON - Coming in future releases                                          |
+| Adobe Commerce Store  | Store of your AC system. Products data from selected store will be used.    |
+| Feed Header           | Header of the feed. *                                                       |
+| Item Body             | Body of the single feed element                                             |
+| Feed Footer           | Footer of the feed *                                                        |
+
+* Feed will be generated as following: Header + All Items + Footer
+
+### Feed Body
+
+For feed body variables can be used. Variables are representing GQL schem that being used (by default it is a Adobe Commerce schema).
+
+Example:
+
+```graphql
+products(search: "test", pageSize: 2) 
+{
+  items
+  {
+    name
+    description
+    image {
+      url
+    }
+    description {
+      html
+    }
+    price_range {
+      minimum_price {
+        regular_price {
+          value
+          currency
+        }
+      }
+    }
+  }
+}
+```
+
+Based on this GQL schema you can use the following variables (starting inside of the “items“ schema): 
+
+* {{name}}
+* {{description}}
+* {{image.url}}
+* {{description.html}}
+* {{price_range.minimum_price.regular_price.value}}
+* {{price_range.minimum_price.regular_price.currency}}
+
+… and so on depends on a schema used
+
+### Placeholders
+
+#### Fixed Variables
+
+Header and Footer currently have a support to variables (Only 1 actualy)
+
+`{{DATA}}` - Current Date/Time - will be in format 2024-10-21T14:45:30.123Z
+
+### Dynamic variables
+
+Variables are defined using double curly braces (`{{ }}`) and correspond to fields in the Magento GraphQL product output. For example, `{{sku}}` will be replaced with the product's SKU.
+
+##### Additonal parameters
+
+###### Repeating Tags with `count`
+
+When a variable corresponds to an array, you can use the `count` property to repeat the XML tag for each element in the array. For instance, using `count=5` will generate up to 5 tags, each containing a different value from the array.
+
+```xml
+<g:brand count=5>{{manufacturer}}</g:brand>
+```
+
+##### Selecting Specific Array Elements with `index`
+
+To select a specific element from an array, use the `index` property. This will generate a single tag with the value of the specified element from the array.
+
+```xml
+<g:product_type index=2>{{categories.name}}</g:product_type>
+```
+
+#### Example 
+
+```xml
+<item>
+  <g:id>{{sku}}</g:id>
+  <title>{{name}}</title>
+  <description>{{description.html}}</description>
+  <link>https://www.native-instruments.com/{{detail_page}}</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:availability>In Stock</g:availability>
+  <g:google_product_category><![CDATA[Arts &amp; Entertainment &gt; Hobbies &amp; Creative Arts &gt; Musical Instruments &gt; Electronic Musical Instruments]]></g:google_product_category>
+  <g:identifier_exists>true</g:identifier_exists>
+  <g:product_type index=2>{{categories.name}}</g:product_type>
+  <g:sale_price>{{price_range.minimum_price.final_price.value}}</g:sale_price>
+  <g:brand count=5>{{manufacturer}}</g:brand>
+  <g:mpn>{{sku}}</g:mpn>
+  <g:additional_image_link><![CDATA[{{image.url}}?width=350&height=350&fit=crop]]></g:additional_image_link>
+</item>
+```
+
+## Technical Module implementation
+
+Delete Feed - deleting current feed from the database and from all schedules
+
+Regenerate Feed - will fire event “generate.feed“ for particular feed ID. And this event will triggen and action that will create new feed.
+
+### app.config.yaml
+
+- List of all actions currently developed: `app.config.yaml`
+
+* `saveFeed` - save the feed action. Action being invoked after user submit feed form. 
+
+  Saving feed into key/value storage. Key for the feeds have to looks like following: `feed-UUID`.
+
+* `deleteFeed` - delete the feed action. Action being invoked after user click on Delete button 
+
+  Deleting the feed from storage by UUID
+
+* `getAllFeeds` - retrieve all feeds from the key/value storage and deliver JSON back. Invoked on dashboard while loading.
+
+  Retrieve all available feeds from the storage. Will be used by Dashboard to render feeds list.
+
+* `getFeedByUuid` - retrieve single feed by UUID
+
+* `regenerateFeed` - trigger feed generation. Will place a new event, that feed generation have to be started.
+
+  Creating new Event on adobe I/O. Event name: `feed.generate`.
+  This event means "Please start Force Regeneration to required feed UUID"
+
+* `processGeneration` - process generation action. Regenerate required feed. Currently ID is hardcoded
+
+  Action will be invoked when `feed.generate` event added.
+
+* `getGqlSchema` - retrieve graphql schema from target magento app.
+
+* `getAllStores` - get all Magento stores by API
+
+* `generateByCron` - trigger feed generation by OpenWisk alarms. 
+
+Action is running every 30 minutes and checking by feed settings if it have to be regenerate. Process regeneration if necessary.
+
+### Web elements
+
+* `index.html` - Dashboard of the project.
+
+  List of Feeds already saved (currently list of feeds received from Action by ajax request). Incl. paginator.
+        
+  * Button to Create New Feed
+  * Every already saved feed have to have a following action:
+    * Edit Feed
+    * Delete Feed
+  *  Force Feed Regeneration
+
+  Edit / Create New Feed form will contain form to save new Feed.
+
+  Current elements: 
+  * Feed Format - select - JSON | XML
+  * Feed Item: Big text field to have XML | JSON there with feed item body
+  * Feed Header
+  * Feed Footer
+  * Store View - select with list of available store views on Magento (websites also have to be there, but it is not possible to select them)
+  
+  After saving the form, it saved into key/value storage and user have to be redirected to dashboard. Success message have to be shown there.
+
+  In case of error, error have to be displayed
+
+
+### Frontend Libraries
+
+## Auto complete
+
+For Text area autocompletion this library was used: 
+https://github.com/zurb/tribute
+