#989: UI design feedback (#1053)

* Working on design feedback * Rename error message to message on sync record object * fixing a couple basic setup of the repo things * more ui tweaks * Skip initial content screen * Created a warning for resyncing sync records that are not 'Error' * put a file back * Misc cleanup * Removed the Re-Sync Warning when users attempt to resync a successful order * Remove ui side of resync warning * move setup data tab stuff into default
stripe · Mar 28, 2023 · 875222d · 875222d
1 parent d658847
commit 875222d
Show file tree

Hide file tree

Showing 27 changed files with 2,090 additions and 475 deletions.
diff --git a/sfdx/force-app/main/default/applications/Setup.app-meta.xml b/sfdx/force-app/main/default/applications/Setup.app-meta.xml
@@ -1,15 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <CustomApplication xmlns="http://soap.sforce.com/2006/04/metadata">
     <brand>
-        <headerColor>#FFC148</headerColor>
-        <logo>Billing_for_light_background</logo>
+        <headerColor>#625BF6</headerColor>
+        <logo>stripelogosquare</logo>
         <logoVersion>1</logoVersion>
         <shouldOverrideOrgTheme>false</shouldOverrideOrgTheme>
     </brand>
     <description>Manage settings for Stripe Billing in Salesforce</description>
     <formFactors>Large</formFactors>
     <isNavAutoTempTabsDisabled>false</isNavAutoTempTabsDisabled>
     <isNavPersonalizationDisabled>false</isNavPersonalizationDisabled>
+    <isNavTabPersistenceDisabled>false</isNavTabPersistenceDisabled>
     <label>Stripe Billing Setup</label>
     <navType>Standard</navType>
     <tabs>Setup</tabs>

diff --git a/sfdx/force-app/main/default/classes/constants.cls b/sfdx/force-app/main/default/classes/constants.cls
@@ -36,6 +36,8 @@ public with sharing class constants {
 
     public static final String FIELD_CURRENCY_ISO_CODE = 'CurrencyIsoCode';
 
+    public static final String RESOLUTION_STATUS_ERROR = 'Error';
+
     // this seemingly-useless code is used for the bootstrap process in the setup.page
     public String getNamespace() {
         return constants.NAMESPACE;

diff --git a/sfdx/force-app/main/default/classes/setupAssistant.cls b/sfdx/force-app/main/default/classes/setupAssistant.cls
@@ -477,25 +477,29 @@ public with sharing class setupAssistant {
                                                         WITH SECURITY_ENFORCED
                                                         LIMIT 1];
 
-                if(!syncRecordList.isEmpty()) {
-                    Sync_Record__c recordToSync = syncRecordList[0];
-                    String route = constants.RUBY_SERVICE_BASE_URI + '/v1/translate';
-
-                    Map<String, Object> body = new Map<String, Object>{
-                        'object_type' => (String)recordToSync.Primary_Object_Type__c,
-                        'object_ids' => new List<String> {
-                            (String)recordToSync.Primary_Record_ID__c
-                        }
-                    };
+                if (syncRecordList.isEmpty()) {
+                    rd.put('isSyncRecordDispactched', isSyncRecordDispactched);
+                    return rd.getJsonString();
+                }
 
-                    HttpResponse response =  utilities.makeCallout(route, 'POST', JSON.serialize(body));
+                Sync_Record__c recordToSync = syncRecordList[0];
+
+                String route = constants.RUBY_SERVICE_BASE_URI + '/v1/translate';
 
-                    if(response.getStatusCode() == 200) {
-                        isSyncRecordDispactched = true;
-                    } else {
-                        rd.put('isSyncRecordDispactched', false);
-                        errorLogger.create('manualRetry', String.valueOf(response.getStatusCode()), (String)response.getStatus(), 'Sync_Record ID that failed: '+(String)recordId);
+                Map<String, Object> body = new Map<String, Object>{
+                    'object_type' => (String)recordToSync.Primary_Object_Type__c,
+                    'object_ids' => new List<String> {
+                        (String)recordToSync.Primary_Record_ID__c
                     }
+                };
+
+                HttpResponse response =  utilities.makeCallout(route, 'POST', JSON.serialize(body));
+
+                if(response.getStatusCode() == 200) {
+                    isSyncRecordDispactched = true;
+                } else {
+                    rd.put('isSyncRecordDispactched', false);
+                    errorLogger.create('manualRetry', String.valueOf(response.getStatusCode()), (String)response.getStatus(), 'Sync_Record ID that failed: '+(String)recordId);
                 }
             }
         } catch (Exception e) {

diff --git a/sfdx/force-app/main/default/contentassets/stripelogosquare.asset b/sfdx/force-app/main/default/contentassets/stripelogosquare.asset
diff --git a/sfdx/force-app/main/default/contentassets/stripelogosquare.asset-meta.xml b/sfdx/force-app/main/default/contentassets/stripelogosquare.asset-meta.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ContentAsset xmlns="http://soap.sforce.com/2006/04/metadata">
+    <isVisibleByExternalUsers>false</isVisibleByExternalUsers>
+    <language>en_US</language>
+    <masterLabel>stripelogosquare</masterLabel>
+    <relationships>
+        <organization>
+            <access>VIEWER</access>
+        </organization>
+    </relationships>
+    <versions>
+        <version>
+            <number>1</number>
+            <pathOnClient>stripe-logo-square.png</pathOnClient>
+        </version>
+    </versions>
+</ContentAsset>
diff --git a/sfdx/force-app/main/default/layouts/Setup_Data__c-Setup Data Layout.layout-meta.xml b/sfdx/force-app/main/default/layouts/Setup_Data__c-Setup Data Layout.layout-meta.xml
@@ -20,6 +20,10 @@
                 <behavior>Edit</behavior>
                 <field>OwnerId</field>
             </layoutItems>
+            <layoutItems>
+                <behavior>Edit</behavior>
+                <field>Steps_Completed__c</field>
+            </layoutItems>
         </layoutColumns>
         <style>TwoColumnsTopToBottom</style>
     </layoutSections>
@@ -43,9 +47,10 @@
         <style>TwoColumnsTopToBottom</style>
     </layoutSections>
     <layoutSections>
-        <customLabel>false</customLabel>
+        <customLabel>true</customLabel>
         <detailHeading>false</detailHeading>
         <editHeading>true</editHeading>
+        <label>Custom Links</label>
         <layoutColumns/>
         <layoutColumns/>
         <layoutColumns/>
@@ -56,4 +61,10 @@
     <showInteractionLogPanel>false</showInteractionLogPanel>
     <showRunAssignmentRulesCheckbox>false</showRunAssignmentRulesCheckbox>
     <showSubmitAndAttachButton>false</showSubmitAndAttachButton>
+    <summaryLayout>
+        <masterLabel>00hDa0000058wpK</masterLabel>
+        <sizeX>4</sizeX>
+        <sizeY>0</sizeY>
+        <summaryLayoutStyle>Default</summaryLayoutStyle>
+    </summaryLayout>
 </Layout>
diff --git a/sfdx/force-app/main/default/lwc/alert/alert.html b/sfdx/force-app/main/default/lwc/alert/alert.html
@@ -0,0 +1,11 @@
+<!--
+ - Created by jmather-c on 3/23/23.
+ -->
+
+<!-- Alert -->
+<template>
+    <div key={getTitle} class={getClasses} role="alert">
+        <lightning-icon icon-name={getIcon} alternative-text={getTitle} title={getTitle} size={getIconSize}></lightning-icon>
+        <h2>{getMessage}</h2>
+    </div>
+</template>
diff --git a/sfdx/force-app/main/default/lwc/alert/alert.js b/sfdx/force-app/main/default/lwc/alert/alert.js
@@ -0,0 +1,66 @@
+/**
+ * Created by jmather-c on 3/23/23.
+ */
+
+import { LightningElement, api } from 'lwc';
+
+const AlertTypes = {
+    warning: {
+        default_title: 'Warning',
+        default_classes: 'slds-notify slds-notify_alert slds-alert_warning',
+        default_icon: 'utility:warning',
+    },
+    alert: {
+        default_title: 'Alert',
+        default_classes: 'slds-notify slds-notify_alert',
+        default_icon: 'utility:question_mark',
+    },
+    error: {
+        default_title: 'Error',
+        default_classes: 'slds-notify slds-notify_alert slds-alert_error',
+        default_icon: 'utility:error',
+    },
+    offline: {
+        default_title: 'Offline',
+        default_classes: 'slds-notify slds-notify_alert slds-alert_offline',
+        default_icon: 'utility:offline',
+    },
+};
+
+export default class Alert extends LightningElement {
+    @api type;
+    @api title;
+    @api classes;
+    @api icon;
+    @api message;
+    @api iconSize = 'x-small';
+
+    get getTitle() {
+        return (this.title) ? this.title : AlertTypes[this.type].default_title;
+    }
+
+    get getClasses() {
+        return (this.classes) ? this.classes : AlertTypes[this.type].default_classes;
+    }
+
+    get getIcon() {
+        return (this.icon) ? this.icon : AlertTypes[this.type].default_icon;
+    }
+
+    get getIconSize() {
+        return this.iconSize;
+    }
+
+    get getMessage() {
+        return this.message;
+    }
+}
+
+const typeStrings = {};
+const typeKeys = Object.keys(AlertTypes);
+for (let i = 0; i < typeKeys.length; i++) {
+    const typeKey = typeKeys[i];
+    typeStrings[typeKey] = typeKey;
+}
+
+Alert.Types = typeStrings;
diff --git a/sfdx/force-app/main/default/lwc/alert/alert.js-meta.xml b/sfdx/force-app/main/default/lwc/alert/alert.js-meta.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>54.0</apiVersion>
+    <description>Alert</description>
+    <isExposed>false</isExposed>
+    <masterLabel>Alert</masterLabel>
+</LightningComponentBundle>
diff --git a/sfdx/force-app/main/default/lwc/dataMappingStep/dataMappingStep.html b/sfdx/force-app/main/default/lwc/dataMappingStep/dataMappingStep.html
@@ -9,7 +9,7 @@
                     <lightning-vertical-navigation-item label="Subscription Item" name="subscriptionItem"></lightning-vertical-navigation-item>
                     <lightning-vertical-navigation-item label="Product" name="product"></lightning-vertical-navigation-item>
                     <lightning-vertical-navigation-item label="Price" name="price"></lightning-vertical-navigation-item>
-                    <lightning-vertical-navigation-item label="Price Order Line" name="priceOrderItem"></lightning-vertical-navigation-item>
+                    <lightning-vertical-navigation-item label="Price (Order Item)" name="priceOrderItem"></lightning-vertical-navigation-item>
                     <lightning-vertical-navigation-item label="Coupon" name="coupon"></lightning-vertical-navigation-item>
                 </lightning-vertical-navigation-section>
             </lightning-vertical-navigation>
@@ -19,17 +19,30 @@
             <!-- Mapper Main Content -->
             <h1 class="slds-text-heading_medium">
                 {friendlyStripeObjectName}
-                <lightning-button-icon
+                <lightning-button
+                    variant="neutral"
+                    label="Stripe API"
+                    title="View Stripe API Documentation"
                     icon-name="utility:new_window"
-                    variant="bare"
-                    size="medium"
-                    alternative-text="View Stripe API Documentation"
+                    icon-position="right"
                     data-object={activeObject}
                     onclick={openStripeApi}
-                    class="stripe-button_inline slds-button slds-m-left_x-small">
-                </lightning-button-icon>
+                    class="slds-text-body_regular stripe-button_inline slds-m-left_x-small">
+                </lightning-button>
             </h1>
             <h4 class="slds-m-top_xx-small slds-m-bottom_small">Salesforce Object: <strong>{defaultSfObject}</strong></h4>
+            <template if:true={hasActiveAlerts} for:each={activeObjectAlerts} for:item="alert" for:index="alertIdx">
+                <c-alert
+                        key={alert}
+                        type={alert.type}
+                        classes={alert.classes}
+                        title={alert.title}
+                        icon={alert.icon}
+                        icon-size={alert.iconSize}
+                        message={alert.message}>
+                </c-alert>
+
+            </template>
             <p class="slds-m-vertical_small slds-text-color_weak">{activeObjectDescription}</p>
             <!-- Mapping Groups -->
             <lightning-accordion