@designcrowd/fe-shared-lib 1.1.3 → 1.1.4-rte-1

package/src/experiences/components/PaymentConfigList/PaymentConfigList.vue

@@ -4,44 +4,130 @@
       <Loader />
     </div>
     <div v-else>
-      <a
+      <div
         v-for="(paymentConfig, index) in paymentConfigs"
         :key="paymentConfig.id"
-        :href="paymentConfig.dashboardUrl"
-        target="_blank"
+        v-click-outside="onClickOutsideStripeOptions"
+        class="tw-relative"
       >
         <div
           class="tw-w-full tw-flex tw-font-sans tw-text-sm tw-items-center tw-p-3 tw-gap-2 tw-rounded tw-bg-white tw-border tw-border-solid tw-border-grayscale-500 tw-text-secondary-500 hover:tw-bg-grayscale-200"
           :class="{ 'tw-mb-2': index !== paymentConfigs.length - 1 }"
         >
           <img class="tw-h-6" :src="paymentConfig.paymentProviderImageUrl" alt="Payment provider's logo" />
-          <span class="tw-text-sm tw-grow tw-select-none tw-flex tw-flex-col">
-            <span>{{ paymentConfig.name }}</span>
-            <small class="stripe-acct">({{ paymentConfig.paymentProviderExternalId }})</small>
-          </span>
-          <p
-            class="tw-ml-auto tw-text-xs tw-rounded-full tw-py-0.5 tw-my-0 tw-text-white tw-px-4 tw-outline-none tw-uppercase"
-            :class="getPaymentConfigStatusDisplayClasses(paymentConfig.status)"
-          >
-            {{ getPaymentConfigStatusDisplayText(paymentConfig.status) }}
-          </p>
+          <div class="tw-flex tw-gap-4 tw-w-full tw-items-center">
+            <div class="tw-flex status-alignment tw-justify-between tw-gap-2 tw-w-full">
+              <span class="tw-text-sm tw-grow tw-select-none tw-flex tw-flex-col">
+                <span>{{ paymentConfig.name }}</span>
+                <small class="stripe-acct">({{ paymentConfig.paymentProviderExternalId }})</small>
+              </span>
+              <p
+                class="tw-flex tw-items-center tw-h-fit tw-w-fit tw-text-xs tw-rounded-full tw-py-0.5 tw-my-0 tw-text-white tw-px-4 tw-outline-none tw-uppercase"
+                :class="getPaymentConfigStatusDisplayClasses(paymentConfig.status)"
+              >
+                {{ getPaymentConfigStatusDisplayText(paymentConfig.status) }}
+              </p>
+            </div>
+            <Button
+              icon="other"
+              variant="no-border"
+              icon-size="sm"
+              size="sm"
+              @on-click.stop="onClickStripeOptions(index)"
+            />
+          </div>
         </div>
-      </a>
+
+        <!-- Dropdown options -->
+        <ul
+          v-if="activeStripeOptionIndex === index"
+          class="tw-absolute tw-right-0 top-class tw-list-none tw-bg-white tw-rounded tw-border tw-border-solid tw-border-grayscale-500 tw-shadow-md tw-py-3 tw-z-30 tw-text-left"
+        >
+          <li
+            class="tw-py-2 tw-px-3 tw-cursor-pointer tw-text-sm hover:tw-bg-grayscale-200"
+            @click="onClickDeleteConfirmation(paymentConfig.id)"
+          >
+            <span class="tw-whitespace-nowrap tw-flex tw-gap-2"
+              ><Icon name="delete" size="sm" />Delete payment method</span
+            >
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
+  <PaymentConfigDeleteConfigModal
+    v-if="showDeleteConfirmationModal"
+    :payment-config="selectedPaymentConfig"
+    :brand-page-token="brandPageToken"
+    @close-modal="onCloseModal"
+    @on-delete="onLoadPaymentConfigs"
+  />
 </template>
+
 <script>
 import Loader from '../../../../src/atoms/components/Loader/Loader.vue';
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+import PaymentConfigDeleteConfigModal from './PaymentConfigDeleteConfigModal.vue';
+import Icon from '../../../../src/atoms/components/Icon/Icon.vue';
 
 import PaymentConfigMixin from './PaymentConfig.mixin';
 
 export default {
   components: {
     Loader,
+    Button,
+    Icon,
+    PaymentConfigDeleteConfigModal,
   },
+
   mixins: [PaymentConfigMixin],
+  emits: ['on-load'],
+  data() {
+    return {
+      activeStripeOptionIndex: null,
+      showDeleteConfirmationModal: false,
+    };
+  },
+  methods: {
+    onClickStripeOptions(index) {
+      this.activeStripeOptionIndex = this.activeStripeOptionIndex === index ? null : index;
+    },
+
+    onClickDeleteConfirmation(id) {
+      this.selectedPaymentConfig = this.paymentConfigs.find((x) => x.id === id);
+      this.showDeleteConfirmationModal = true;
+    },
+
+    onCloseModal() {
+      this.showDeleteConfirmationModal = false;
+    },
+
+    onClickOutsideStripeOptions() {
+      this.activeStripeOptionIndex = null;
+    },
+    onLoadPaymentConfigs(paymentConfigId) {
+      this.showDeleteConfirmationModal = false;
+      this.paymentConfigs = this.paymentConfigs.filter((p) => p.id !== paymentConfigId);
+      this.$emit('on-load', this.paymentConfigs);
+    },
+  },
   async mounted() {
     await this.updatePaymentConfigs();
   },
 };
 </script>
+<style>
+.top-class {
+  top: 3rem;
+}
+@media (min-width: 640px) {
+  .status-alignment {
+    @apply tw-flex-row tw-items-center;
+  }
+}
+@media (max-width: 640px) {
+  .status-alignment {
+    @apply tw-flex-col;
+  }
+}
+</style>