RCG Product Availability LWC - Source

This asset is used in the following MuleSoft Accelerators:

MuleSoft Accelerator for Retail — includes pre-built APIs, connectors, integration templates, and reference architecture to enable retail IT teams to jumpstart digital transformation initiatives.

Product availability LWC

This asset provides a Lightning Web Component (LWC), which displays an inventory check button to perform an available-to-promise check against SAP. It has been written generically to support an Inventory Check button and to update the Available Quantity, ProductId, and Location values based on the response.

This implementation template has the following dependencies:

• Deploy the LWC to Salesforce
• Configure the component in Salesforce
• Create Store Locations in Salesforce
• Add related list for Product Item in Salesforce
• Add remote site connections in Salesforce
• Create CSP Trusted Sites

Please review the use cases described on the MuleSoft Accelerator for Retail solution pages for more information about dependencies on other APIs and services.

Deploy the LWC to Salesforce

1. Install the Salesforce CLI (SFDX) on your local system.
2. Set up Visual Studio Code by following this trailhead.
3. Open the project folder in the Visual Studio Code app (note: must be the root folder in VS Code).
4. Authorize the org to publish the code (search for SFDX in the command palette).
5. Deploy the component source to org. This is best accomplished from the command line by running the following command from the project directory:

   sfdx force:source:deploy --sourcepath force-app/main/default/lwc/inventoryCheck

6. In Salesforce organization, navigate to Custom Code -> Lightning Components -> Lightning Components and make sure the component is available in the list:
   
   

Configure the component in Salesforce

1. Navigate to a record detail page within Salesforce and use the gear icon at the top right to select edit page. On the edit page menu, on the left side menu scroll to the bottom to find the custom component "inventoryCheck". Drag the components onto the page.
   
   
   
   

2. Click on the component to configure parameters on the right side of the screen.

3. Provide the endpoint of the Mule API as the URL for API call parameter (for example, https://org-salesforce-exp-api-v2-dev.us-e1.cloudhub.io)
4. Save and publish your changes.

Create Store Locations in Salesforce

1. From App Launcher, search Locations
2. Enter the name of the store in Location Name
3. Default Location Type as Warehouse
4. Check the box for Inventory Location
5. Save
6. Repeat steps 1 to 5 for as many stores needed

Add related list for Product Item in Salesforce

1. From Setup, click on Object Manager and search for the object Product
2. Click Page Layout
3. Select Product Layout
4. In Related Lists, search for Product Items
5. Drag it down to the page below under Related Lists
6. Save the page layout

Add remote site connections in Salesforce

1. In the Setup section, search for Remote Site Settings. Click New Remote Site and configure the following.
   • Remote Site Name: product_availabilty_api
   • Remote Site URL: (set the base remote URL of the API here, for example, https://org-salesforce-exp-api-v2-dev.us-e1.cloudhub.io)
   • Active:

Create CSP Trusted Sites

In Salesforce Setup, search "CSP Trusted Sites". Create a CSP trusted site with the URL of the Salesforce Experience API deployed to CloudHub (for example, https://org-salesforce-exp-api-v2-dev.us-e1.cloudhub.io). Be sure to not include a trailing slash on the URL.
(Note: this step takes 15-45 minutes to kick in after enabled. There is no alert when ready).