added cancel modal instead of error toast when trying to nav away wit…

…hout saving (#471) * added cancel modal instead of error toast when trying to nav away from tab without saving * added in navigation after selecting leave in cancel modal * adding tracked var back
stripe · Jun 8, 2022 · c0f984c · c0f984c
1 parent 446ac72
commit c0f984c
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 2 deletions.
diff --git a/sfdx/force-app/main/default/lwc/dataMappingStep/dataMappingStep.js b/sfdx/force-app/main/default/lwc/dataMappingStep/dataMappingStep.js
@@ -165,6 +165,7 @@ export default class DataMappingStep extends LightningElement {
             this.isMappingsUpdated = true;
             this.dispatchEvent(new CustomEvent('valuechange'));
         }
+        this.isMappingsUpdated = false;
     }
 
     debounce(targetInput) {
@@ -484,7 +485,7 @@ export default class DataMappingStep extends LightningElement {
         window.open(apiUrl, '_blank');
     }
 
-    async connectedCallback() {
+    @api async connectedCallback() {
         this.dispatchEvent(new CustomEvent('contentloading'));
         try {
             const getFormattedStripeObjects = await getFormattedStripeObjectFields();

diff --git a/sfdx/force-app/main/default/lwc/setup/setup.html b/sfdx/force-app/main/default/lwc/setup/setup.html
@@ -424,4 +424,16 @@ <h1 class="slds-text-heading_medium slds-m-top_x-large">Stripe Billing Connector
         </template>
     </div>
 
+    <!-- Cancel Modal -->
+    <c-modal class="stripe-modal_confirm-cancel" title="Leave Without Saving Changes">
+        <div class="slds-is-relative">
+            <lightning-spinner if:true={modalLoading} alternative-text="Loading..."></lightning-spinner>
+            <p class="slds-text-align_center">
+                Are you sure you want to exit without saving your changes? All changes will be reverted if you leave this tab now.
+            </p>
+        </div>
+        <lightning-button slot="footer" label="Cancel" variant="neutral" onclick={hideCancelModal} class="slds-button" disabled={modalLoading}></lightning-button>
+        <lightning-button slot="footer" label="Leave" variant="destructive" onclick={runTabConnectedCallback} class="slds-button" disabled={modalLoading}></lightning-button>
+    </c-modal>
+    <!-- /Cancel Modal -->
 </template>
diff --git a/sfdx/force-app/main/default/lwc/setup/setup.js b/sfdx/force-app/main/default/lwc/setup/setup.js
@@ -21,6 +21,9 @@ export default class FirstTimeSetup extends LightningElement {
     @track saveDisabled = true;
     @track loading = true;
     @track contentLoading = false;
+    @track changesCanceled = false;
+    @track currentTab = '';
+    @track tabToNavTo = '';
     @track stepName;
     @track steps = [
         {
@@ -315,10 +318,53 @@ export default class FirstTimeSetup extends LightningElement {
                 }
             }
         } else {
-            this.showSetupToast('Save your changes before navigating to another tab', 'error', 'sticky')
+            this.currentTab = event.currentTarget;
+            this.tabToNavTo = this.currentTab.dataset.index;
+            this.showCancelModal();
         }
     }
 
+    runTabConnectedCallback() {
+        this.saveDisabled = true;
+        this.changesCanceled = true;
+        if(this.activeSectionIndex == 2) {
+            this.template.querySelector('c-sync-preferences-step').connectedCallback();
+            this.hideCancelModal();
+            return;
+        }
+
+        this.template.querySelector('c-data-mapping-step').connectedCallback();
+        this.hideCancelModal();
+    }
+
+    showCancelModal() {
+        this.template.querySelector('.stripe-modal_confirm-cancel').show();
+    }
+
+    hideCancelModal() {
+        this.template.querySelector('.stripe-modal_confirm-cancel').hide();
+        if(this.changesCanceled) {
+            this.showSetupToast('Your changes have been reverted', 'success');
+            this.changesCanceled = false;
+
+            //navigate to selcted step
+            const currentActive = this.template.querySelector('.stripe-navigation-item_active');
+            const previousSectionContent = this.template.querySelector('c-step[data-index="' + this.activeSectionIndex + '"]');
+            if(previousSectionContent) {
+                currentActive.classList.remove('stripe-navigation-item_active');
+                previousSectionContent.classList.add('slds-hide');
+            }
+
+            this.currentTab.classList.add('stripe-navigation-item_active');
+             this.activeSectionIndex = this.tabToNavTo;
+            const targetSectionContent = this.template.querySelector('c-step[data-index="' + this.activeSectionIndex + '"]');
+            if(targetSectionContent) {
+                targetSectionContent.classList.remove('slds-hide');
+            }
+        }
+
+    }
+
     showNextStep() {
         const lastActiveStep = this.template.querySelector('c-step[data-index="' + this.activeStepIndex + '"]');
         this.activeStepIndex++;