From ff845650529aee071c0d434716a00f7a277266e9 Mon Sep 17 00:00:00 2001
From: jmather-c <117302272+jmather-c@users.noreply.github.com>
Date: Thu, 15 Jun 2023 08:54:16 -0700
Subject: [PATCH] #223 - Add Related Stripe Sync Records component to setup
 steps (#1103)

* Add Related Stripe Sync Records to setup steps

* Updated from PR feedback

* Updates from feedback

* and fields...

* Added a sensible rename to trigger ci flows
---
 .../lwc/orgSettingsStep/orgSettingsStep.html  | 52 ++++++++++++++++++-
 .../lwc/orgSettingsStep/orgSettingsStep.js    | 32 +++++++++++-
 .../relatedSyncRecords.html                   |  2 +-
 .../relatedSyncRecords.js-meta.xml            | 19 ++++++-
 .../main/default/lwc/setup/setup.html         | 22 ++++----
 .../force-app/main/default/lwc/setup/setup.js | 36 ++++++-------
 .../force-app/main/default/lwc/step/step.html |  4 +-
 7 files changed, 131 insertions(+), 36 deletions(-)

diff --git a/sfdx/force-app/main/default/lwc/orgSettingsStep/orgSettingsStep.html b/sfdx/force-app/main/default/lwc/orgSettingsStep/orgSettingsStep.html
index d2992e1c87..5711c05c71 100644
--- a/sfdx/force-app/main/default/lwc/orgSettingsStep/orgSettingsStep.html
+++ b/sfdx/force-app/main/default/lwc/orgSettingsStep/orgSettingsStep.html
@@ -1,5 +1,25 @@
 <template>
-    <div class="slds-p-around_large"> 
+    <div class="slds-p-around_large">
+        <h3 class="slds-text-heading_medium slds-m-bottom_small">
+            Add Stripe Fields to Page Layouts
+        </h3>
+        <div class="slds-m-bottom_small">
+            Access Page Layouts for
+            <template iterator:obj={targetedObjects}>
+                <template lwc:if={obj.first}></template>
+                <template lwc:else><span key={obj.value}>,</span></template>
+                <lightning-button
+                        key={obj.value}
+                        class="slds-m-left_xx-small"
+                        icon-name="utility:new_window"
+                        icon-position="right"
+                        variant="base"
+                        data-object={obj.value}
+                        label={obj.value}
+                        onclick={openPageLayouts}
+                        title="Open Page Layouts for this object in Setup"></lightning-button>
+            </template>
+        </div>
         <div class="stripe-settings__item slds-grid">
             <div class="slds-col_bump-right">
                 <h4 class="slds-text-heading_small slds-m-bottom_xx-small">
@@ -20,5 +40,35 @@ <h4 class="slds-text-heading_small slds-m-bottom_xx-small">
                 </p>
             </div>
         </div>
+        <h3 class="slds-text-heading_medium slds-m-bottom_small slds-border_top slds-m-top_large slds-p-top_large">
+            Add Stripe Components to Lightning Record Pages
+        </h3>
+        <div class="slds-m-bottom_small">
+            Access Lightning Record Pages for
+            <template iterator:obj={targetedObjects}>
+                <template lwc:if={obj.first}></template>
+                <template lwc:else><span key={obj.value}>,</span></template>
+                <lightning-button
+                        key={obj.value}
+                        class="slds-m-left_xx-small"
+                        icon-name="utility:new_window"
+                        icon-position="right"
+                        variant="base"
+                        data-object={obj.value}
+                        label={obj.value}
+                        onclick={openLightningRecordPages}
+                        title="Open Lightning Record Pages for this object in Setup"></lightning-button>
+            </template>
+        </div>
+        <div class="stripe-settings__item slds-grid">
+            <div class="slds-col_bump-right">
+                <h4 class="slds-text-heading_small slds-m-bottom_xx-small">
+                    Related Stripe Sync Records
+                </h4>
+                <p>
+                    Add this component to your Lightning Record Pages to easily see the latest sync records for an object.
+                </p>
+            </div>
+        </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/sfdx/force-app/main/default/lwc/orgSettingsStep/orgSettingsStep.js b/sfdx/force-app/main/default/lwc/orgSettingsStep/orgSettingsStep.js
index f119372f36..486f255dbf 100644
--- a/sfdx/force-app/main/default/lwc/orgSettingsStep/orgSettingsStep.js
+++ b/sfdx/force-app/main/default/lwc/orgSettingsStep/orgSettingsStep.js
@@ -1,4 +1,34 @@
 import { LightningElement } from 'lwc';
 
-export default class OrgSettingsStep extends LightningElement {}
+const SUB_PAGES = {
+    PAGE_LAYOUTS: 'PageLayouts',
+    LIGHTNING_RECORD_PAGES: 'LightningPages',
+};
+
+export default class OrgSettingsStep extends LightningElement {
+    targetedObjects = [
+        'Account',
+        'Order',
+        'PricebookEntry',
+        'Product2',
+    ];
+
+    openPageLayouts(e) {
+        this.gotoSetupObjectManagerPage(e.target.dataset.object, SUB_PAGES.PAGE_LAYOUTS);
+    }
+
+    openLightningRecordPages(e) {
+        this.gotoSetupObjectManagerPage(e.target.dataset.object, SUB_PAGES.LIGHTNING_RECORD_PAGES);
+    }
+
+    /**
+     * Returns the relative url to a page within Setup.
+     *
+     * @param {string} object
+     * @param {string} subPage
+     */
+    gotoSetupObjectManagerPage(object, subPage) {
+        window.open(`/lightning/setup/ObjectManager/${object}/${subPage}/view`, '_blank');
+    }
+}
 
diff --git a/sfdx/force-app/main/default/lwc/relatedSyncRecords/relatedSyncRecords.html b/sfdx/force-app/main/default/lwc/relatedSyncRecords/relatedSyncRecords.html
index 815c291200..1929e44060 100644
--- a/sfdx/force-app/main/default/lwc/relatedSyncRecords/relatedSyncRecords.html
+++ b/sfdx/force-app/main/default/lwc/relatedSyncRecords/relatedSyncRecords.html
@@ -8,7 +8,7 @@
                 </div>
                 <div class="slds-media__body">
                     <h2 class="slds-card__header-title">
-                        Related Sync Records
+                        Related Stripe Sync Records
                     </h2>
                 </div>
             </header>
diff --git a/sfdx/force-app/main/default/lwc/relatedSyncRecords/relatedSyncRecords.js-meta.xml b/sfdx/force-app/main/default/lwc/relatedSyncRecords/relatedSyncRecords.js-meta.xml
index bbc0ba7e24..682b865fe2 100644
--- a/sfdx/force-app/main/default/lwc/relatedSyncRecords/relatedSyncRecords.js-meta.xml
+++ b/sfdx/force-app/main/default/lwc/relatedSyncRecords/relatedSyncRecords.js-meta.xml
@@ -2,9 +2,24 @@
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
     <apiVersion>52.0</apiVersion>
     <isExposed>true</isExposed>
-    <masterLabel>Related Sync Records</masterLabel>
-   <description>Gets related sync records based on the current record Id.</description>
+    <masterLabel>Related Stripe Sync Records</masterLabel>
+    <description>Displays related Stripe Sync Records based on the current Record Id.</description>
     <targets>
         <target>lightning__RecordPage</target>
     </targets>
+    <targetConfigs>
+        <targetConfig targets="lightning__RecordPage">
+            <objects>
+                <object>Account</object>
+                <object>Order</object>
+                <object>PricebookEntry</object>
+                <object>Product2</object>
+            </objects>
+            <supportedFormFactors>
+                <supportedFormFactor type="Large"/>
+                <supportedFormFactor type="Small"/>
+            </supportedFormFactors>
+        </targetConfig>
+    </targetConfigs>
+    
 </LightningComponentBundle>
\ No newline at end of file
diff --git a/sfdx/force-app/main/default/lwc/setup/setup.html b/sfdx/force-app/main/default/lwc/setup/setup.html
index 9d93270685..86aa24fcae 100644
--- a/sfdx/force-app/main/default/lwc/setup/setup.html
+++ b/sfdx/force-app/main/default/lwc/setup/setup.html
@@ -308,14 +308,7 @@ <h3 class="slds-text-heading_medium">
                             <div class="slds-col">
                                 <!-- First Time Setup Steps -->
                                 <template if:false={setupComplete}>
-                                    <c-step step-name="Update Page Layouts" data-index="0" setup-complete={setupComplete} onnext={next} class="slds-hide" loading={contentLoading} illustration-url={} back-disabled>
-                                        <p slot="description">
-                                            A few custom fields have been included in the Stripe Billing for Salesforce managed package that can optionally be added to your existing object page layouts. It is recommended you do this now before proceeding to connect Stripe to Salesforce, but these fields can be added at any time.
-                                        </p>
-                                        <c-org-settings-step>
-                                        </c-org-settings-step>
-                                    </c-step>
-                                    <c-step step-name="Connect Stripe and Salesforce" data-index="1" setup-complete={setupComplete} onnext={next} onback={back} class="slds-hide" next-disabled={nextDisabled} loading={contentLoading} illustration-url={systemConnectionsIllustration} show-intro>
+                                    <c-step step-name="Connect Stripe and Salesforce" data-index="0" setup-complete={setupComplete} onnext={next} onback={back} class="slds-hide" next-disabled={nextDisabled} loading={contentLoading} illustration-url={systemConnectionsIllustration} show-intro back-disabled>
                                         <p slot="description">
                                             Allow your Salesforce org and Stripe to communicate. This step will collect the required information to allow your Salesforce org and Stripe to communicate. First, you will be granting Stripe the necessary access to your Salesforce org. Second, you will be asked to log into Stripe to allow Salesforce to access your Stripe instance. Click "Authorize" and follow the provided steps to establish these connections.
                                         </p>
@@ -330,7 +323,7 @@ <h3 class="slds-text-heading_medium">
                                             onshowtoast={showToast}>
                                         </c-system-connections-step>
                                     </c-step>
-                                    <c-step step-name="Define Data Mapping" data-index="2" setup-complete={setupComplete} onnext={next} onback={back} class="slds-hide" loading={contentLoading} illustration-url={dataMappingIllustration} show-intro>
+                                    <c-step step-name="Define Data Mapping" data-index="1" setup-complete={setupComplete} onnext={next} onback={back} class="slds-hide" loading={contentLoading} illustration-url={dataMappingIllustration} show-intro>
                                         <p slot="description">
                                             Determine how Stripe data is mapped to your Salesforce org. A set of default field mappings have been provided for each Stripe object. These default values can be overwritten to better represent the structure of your Salesforce org. Field mappings can either be a Salesforce field, which reads Salesforce data on a per-record basis, or a static value, which will apply the same value to all records.
                                         </p>
@@ -347,7 +340,7 @@ <h3 class="slds-text-heading_medium">
                                             onshowtoast={showToast}>
                                         </c-data-mapping-step>
                                     </c-step>
-                                    <c-step step-name="Manage Integration" data-index="3" setup-complete={setupComplete} onnext={next} onback={back} next-label="Next" class="slds-hide" loading={contentLoading} illustration-url={syncPreferencesIllustration} show-intro>
+                                    <c-step step-name="Manage Integration" data-index="2" setup-complete={setupComplete} onnext={next} onback={back} next-label="Next" class="slds-hide" loading={contentLoading} illustration-url={syncPreferencesIllustration} show-intro>
                                         <p slot="description">
                                             Determine how and when data is synced between Stripe and Salesforce. A set of default settings has been provided; review and make any adjustments to these settings to suit your org before proceeding.
                                         </p>
@@ -359,7 +352,7 @@ <h3 class="slds-text-heading_medium">
                                                 onshowtoast={showToast}>
                                         </c-sync-preferences-step>
                                     </c-step>
-                                    <c-step step-name="Activate Syncing" data-index="4" setup-complete={setupComplete} onnext={next} onback={back} next-label="Finish" class="slds-hide" loading={contentLoading} illustration-url={syncPreferencesIllustration} show-intro>
+                                    <c-step step-name="Activate Syncing" data-index="3" setup-complete={setupComplete} onnext={next} onback={back} next-label="Finish" class="slds-hide" loading={contentLoading} illustration-url={syncPreferencesIllustration} show-intro>
                                         <p slot="description">
                                             Activate your integration to begin bringing Salesforce orders over to Stripe in real time.
                                         </p>
@@ -383,6 +376,13 @@ <h3 class="slds-text-heading_medium">
                                             </div>
                                         </div>
                                     </c-step>
+                                    <c-step step-name="Update Salesforce Pages" data-index="4" setup-complete={setupComplete} onback={back} onnext={next} next-label="Finish" class="slds-hide" loading={contentLoading} illustration-url={}>
+                                        <p slot="description">
+                                            A few custom fields and components have been included in the Stripe Billing for Salesforce managed package that can optionally be added to your existing Page Layouts and Lightning Record Pages. These fields and components will allow you to view Stripe data directly on your Salesforce records.
+                                        </p>
+                                        <c-org-settings-step>
+                                        </c-org-settings-step>
+                                    </c-step>
                                 </template>
                                 <!-- /First Time Setup Steps -->
 
diff --git a/sfdx/force-app/main/default/lwc/setup/setup.js b/sfdx/force-app/main/default/lwc/setup/setup.js
index c3fc387a13..0c942b7f6c 100644
--- a/sfdx/force-app/main/default/lwc/setup/setup.js
+++ b/sfdx/force-app/main/default/lwc/setup/setup.js
@@ -30,18 +30,10 @@ export default class FirstTimeSetup extends LightningElement {
     @track tabToNavTo = '';
     @track stepName;
     @track steps = [
-        {
-            title: 'Update Page Layouts',
-            name: 'C-ORG-SETTINGS-STEP',
-            orderIndex: 1,
-            isComplete: false,
-            isActive: false,
-            component: 'c-org-settings-step',
-        },
         {
             title: 'Connect Stripe and Salesforce',
             name: 'C-SYSTEM-CONNECTIONS-STEP',
-            orderIndex: 2,
+            orderIndex: 1,
             isComplete: false,
             isActive: false,
             component: 'c-system-connections-step',
@@ -49,7 +41,7 @@ export default class FirstTimeSetup extends LightningElement {
         {
             title: 'Define Data Mapping',
             name: 'C-DATA-MAPPING-STEP',
-            orderIndex: 3,
+            orderIndex: 2,
             isComplete: false,
             isActive: false,
             component: 'c-data-mapping-step',
@@ -57,7 +49,7 @@ export default class FirstTimeSetup extends LightningElement {
         {
             title: 'Manage Integration',
             name: 'C-SYNC-PREFERENCES-STEP',
-            orderIndex: 4,
+            orderIndex: 3,
             isComplete: false,
             isActive: false,
             component: 'c-sync-preferences-step',
@@ -65,19 +57,27 @@ export default class FirstTimeSetup extends LightningElement {
         {
             title: 'Activate Syncing',
             name: 'C-POLLING-STEP',
-            orderIndex: 5,
+            orderIndex: 4,
             isComplete: false,
             isActive: false,
             component: 'c-polling-step',
-        }
+        },
+        {
+            title: 'Update Salesforce Pages',
+            name: 'C-ORG-SETTINGS-STEP',
+            orderIndex: 5,
+            isComplete: false,
+            isActive: false,
+            component: 'c-org-settings-step',
+        },
     ];
 
     setupStepRefs = {
-        orgSettings: 0,
-        systemConnections: 1,
-        dataMapping: 2,
-        syncPreferences: 3,
-        polling: 4,
+        systemConnections: 0,
+        dataMapping: 1,
+        syncPreferences: 2,
+        polling: 3,
+        orgSettings: 4,
     };
 
     generalStepRefs = {
diff --git a/sfdx/force-app/main/default/lwc/step/step.html b/sfdx/force-app/main/default/lwc/step/step.html
index 2fbf533663..16ee2d6f5b 100644
--- a/sfdx/force-app/main/default/lwc/step/step.html
+++ b/sfdx/force-app/main/default/lwc/step/step.html
@@ -26,9 +26,9 @@ <h3 class="slds-text-heading_medium slds-m-bottom_medium">
         <div class={stepContentClasslist}>
             <!-- Step Description -->
             <div class="stipe-settings__description slds-p-around_large slds-border_bottom">
-                <div if:false={setupComplete} class="slds-text-heading_small slds-m-bottom_small">
+                <h2 if:false={setupComplete} class="slds-text-heading_large slds-m-bottom_small">
                     {stepName}
-                </div>
+                </h2>
                 <slot name="description">
                 </slot>
             </div>