change <Errors> to use <Modal> component and fix positioning of modal

src/App.vue

@@ -17,8 +17,6 @@
         v-if="loading"
         v-test="'loader'" />
 
-      <Errors v-else-if="!hasValidAddress" />
-
       <recursive-form
         v-for="option in form.options"
         v-else
@@ -248,11 +246,18 @@ export default {
 
       if (!this.hasValidAddress) {
         this.loading = false;
+        this.$configBus.showModal = true;
+        this.$configBus.modalData = {
+          component: Errors,
+        };
         return;
       }
 
-      this.loading = true;
-      await fetchAllCarriers();
+      if (!this.$configBus.carrierData.length) {
+        this.loading = true;
+        await fetchAllCarriers();
+      }
+
       this.createForm();
       this.loading = false;
     },
@@ -261,9 +266,6 @@ export default {
      * Hide the checkout completely.
      */
     hideSelf() {
-      // This has to stay here until after testing
-      // eslint-disable-next-line no-console
-      console.trace('hiding delivery options');
       this.showDeliveryOptions = false;
     },
 

src/assets/scss/_modal.scss

@@ -1,10 +1,5 @@
 .#{$classBase} {
   &__modal {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
     padding: $modal-content-padding;
     background-color: white;
 

src/components/Errors.vue

@@ -60,6 +60,9 @@ export default {
 
       // Send the new values in an event. It's up to the external platform to do handle this event or not.
       document.dispatchEvent(new CustomEvent(EVENTS.UPDATED_ADDRESS, { detail: this.values }));
+
+      // Hide the modal
+      this.$configBus.showModal = false;
     },
   },
 };