Remove availability indicator logic

src/iss-components/tpa-shop-list-button/tpa-shop-list-button.vue

@@ -20,28 +20,6 @@
                         class="m-0 caption ms-2"
                         :class="textPosition">{{ buttonLabelSubCopy }}
                     </span>
-                    <div
-                        v-if="displayAvailabilityIndicators"
-                        id="availabilityIndicatorBlock"
-                        class="availability-indicator rounded-pill"
-                        :class="availabilityRatingClass">
-                        <loader
-                            v-if="isLoaderDisplayed"
-                            ref="availabilityIndicatorLoader"
-                            loaderPosition="left"
-                            :allowPageInteraction="true" />
-                        <div
-                            v-else
-                            id="availabilityIndicator"
-                            class="d-flex align-items-center">
-                            <div
-                                id="availabilityBadge"
-                                class="availability-badge"
-                                :class="availabilityRating == 'high' ? 'green' : 'orange'">
-                            </div>
-                            <span class="m-0 button-auxillary-copy">{{ badgeText }}</span>
-                        </div>
-                    </div>
                 </div>
                 <div class="row-two">
                     <span
@@ -73,42 +51,6 @@ export default {
         loader
     },
     mixins: [inputButtonWrapperMixin],
-    data() {
-        return {
-            availabilityRating: null,
-            displayAvailabilityIndicators: this.additionalButtonData?.displayAvailabilityIndicators ?? false
-        };
-    },
-    computed: {
-        isLoaderDisplayed() {
-            return this.availabilityRating == null;
-        },
-        availabilityRatingClass() {
-            if (this.availabilityRating != null) {
-                return this.availabilityRating === 'high' ? 'green' : 'orange';
-            }
-            return 'gray';
-        },
-        badgeText() {
-            if (this.availabilityRating != null) {
-                return this.availabilityRating === 'high' ? 'Appts available' : 'Appts low';
-            }
-            return '';
-        }
-    },
-    beforeMount() {
-        if (this.displayAvailabilityIndicators) {
-            const { startDate } = this.additionalButtonData;
-            const { endDate } = this.additionalButtonData;
-            const { shopAppointmentType } = this.additionalButtonData;
-
-            this.additionalButtonData
-                .availabilityRatingCallback(startDate, endDate, shopAppointmentType, this.value)
-                .then((data) => {
-                    this.availabilityRating = data;
-                });
-        }
-    }
 };
 </script>
 
@@ -165,68 +107,6 @@ export default {
           font-size: .75rem;
           line-height: 1.5rem;
       }
-
-      .availability-indicator {
-          background-repeat: no-repeat;
-          display: flex;
-          align-items: center;
-          margin-left: auto;
-          padding: 0.125rem 0.5rem;
-
-          .availability-badge {
-              display: inline-flex;
-              width: .8125rem;
-              height: .75rem;
-              background-position: center;
-              background-repeat: no-repeat;
-              margin: 0 0.25rem 0 0;
-
-              &.green {
-                background-image: url($svg-shop-list-button-green-availability);
-              }
-
-              &.orange {
-                  background-image: url($svg-shop-list-button-orange-availability);
-              }
-          }
-          .button-auxillary-copy {
-              box-sizing: border-box;
-              justify-content: right;
-              line-height: 1.25rem;
-              font-weight: 500;
-              font-size: 0.75rem;
-              align-items: center;
-          }
-
-          .loader {
-              padding: 0 0.25rem 0 0.25rem;
-              padding-top: 0.125rem;
-              padding-bottom: 0.125rem;
-          }
-
-          .loader:after {
-              background-color: $gray-550;
-              height: 1rem;
-              width: 1rem;
-          }
-
-          &.green {
-              color: $green-700;
-              background-color: $green-100;
-          }
-
-          &.orange {
-              color: $orange-600;
-              background-color: $orange-100;
-          }
-
-          &.gray {
-              color: $gray-600;
-              background-color: $gray-100;
-              padding-left: 0.125rem;
-              padding-right: 0.125rem;
-          }
-      }
   }
 
   .row-two {