@designcrowd/fe-shared-lib 1.5.7 → 1.5.8

package/src/experiences/components/AuthFlow/SubmissionButton.vue

@@ -1,56 +1,56 @@
-<template>
-  <div class="tw-relative tw-w-full">
-    <div
-      v-if="isLoading"
-      class="tw-absolute tw-top-1/2 tw-left-1/2 tw-transform tw--translate-y-1/2"
-      :class="{
-        'tw-translate-x-8': labelSize === 'smaller',
-        'tw-translate-x-12': labelSize === 'medium',
-        'tw-translate-x-20': labelSize === 'larger',
-      }"
-    >
-      <img
-        class="tw-animate-spin tw-align-middle"
-        src="https://dcstatic.com/images/icons/loading/loading-white-2e291087b2.svg"
-        alt="Submitting"
-      />
-    </div>
-    <Button :variant="variant" :size="size" :label="label" :full-width="true" :disabled="disabled" />
-  </div>
-</template>
-
-<script>
-import Button from '../../../atoms/components/Button/Button.vue';
-
-export default {
-  components: {
-    Button,
-  },
-  props: {
-    variant: {
-      type: String,
-      required: true,
-    },
-    size: {
-      type: String,
-      required: true,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    labelSize: {
-      type: String,
-      required: true,
-    },
-    disabled: {
-      type: Boolean,
-      required: true,
-    },
-    isLoading: {
-      type: Boolean,
-      required: true,
-    },
-  },
-};
-</script>
+<template>
+  <div class="tw-relative tw-w-full">
+    <div
+      v-if="isLoading"
+      class="tw-absolute tw-top-1/2 tw-left-1/2 tw-transform tw--translate-y-1/2"
+      :class="{
+        'tw-translate-x-8': labelSize === 'smaller',
+        'tw-translate-x-12': labelSize === 'medium',
+        'tw-translate-x-20': labelSize === 'larger',
+      }"
+    >
+      <img
+        class="tw-animate-spin tw-align-middle"
+        src="https://dcstatic.com/images/icons/loading/loading-white-2e291087b2.svg"
+        alt="Submitting"
+      />
+    </div>
+    <Button :variant="variant" :size="size" :label="label" :full-width="true" :disabled="disabled" />
+  </div>
+</template>
+
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    variant: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    labelSize: {
+      type: String,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
+</script>

package/src/experiences/components/PaymentConfigList/PaymentConfig.mixin.js

@@ -1,118 +1,118 @@
-import vClickOutside from 'click-outside-vue3';
-import brandPageApiClient from '../../clients/brand-page-api.client';
-import { sharedPaymentConfigTr } from '../../../useSharedLibTranslate';
-
-export const paymentConfigStatuses = Object.freeze({
-  active: 'Active',
-  pendingPreOnboarding: 'PendingPreOnboarding',
-  pendingPostOnboarding: 'PendingPostOnboarding',
-  unactivatedByCustomer: 'UnactivatedByCustomer',
-});
-
-export default {
-  props: {
-    brandPageToken: {
-      type: String,
-      required: false,
-    },
-    showPaymentProviderExternalId: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    statusFilters: {
-      type: Array,
-      required: false,
-      default: undefined,
-    },
-  },
-  directives: {
-    clickOutside: vClickOutside,
-  },
-  data: () => ({
-    isLoading: true,
-    paymentConfigs: [],
-    currencies: [],
-    selectedPaymentConfig: {},
-    isStripeOptionActionVisible: false,
-  }),
-  computed: {
-    selectedCurrency() {
-      return this.currencies.find((currency) => currency.iso4127Code === this.selectedPaymentConfig?.defaultCurrency);
-    },
-  },
-  methods: {
-    getPaymentConfigStatusDisplayText(paymentConfigStatus) {
-      switch (paymentConfigStatus) {
-        case paymentConfigStatuses.pendingPreOnboarding:
-          return sharedPaymentConfigTr('onboardingIncomplete');
-        case paymentConfigStatuses.pendingPostOnboarding:
-          return sharedPaymentConfigTr('pendingVerification');
-        case paymentConfigStatuses.active:
-          return sharedPaymentConfigTr('connected');
-        case paymentConfigStatuses.unactivatedByCustomer:
-          return sharedPaymentConfigTr('inactive');
-        default:
-          if (process.env.NODE_ENV !== 'production') {
-            console.warn(`Unsupported payment config status ${paymentConfigStatus}`);
-          }
-          return null;
-      }
-    },
-
-    getPaymentConfigStatusDisplayClasses(paymentConfigStatus) {
-      switch (paymentConfigStatus) {
-        case paymentConfigStatuses.pendingPreOnboarding:
-        case paymentConfigStatuses.pendingPostOnboarding:
-          return 'tw-bg-warning-500';
-        case paymentConfigStatuses.active:
-          return 'tw-bg-success-500';
-        case paymentConfigStatuses.unactivatedByCustomer:
-          return 'tw-bg-grayscale-600';
-        default:
-          if (process.env.NODE_ENV !== 'production') {
-            console.warn(`Unsupported payment config status ${paymentConfigStatus}`);
-          }
-          return null;
-      }
-    },
-
-    async updatePaymentConfigs() {
-      if (!this.brandPageToken) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.error(`brandPageToken is required`);
-        }
-        return;
-      }
-
-      try {
-        this.isLoading = true;
-
-        const result = await brandPageApiClient.getPaymentConfigsByBrandPageToken(this.brandPageToken);
-
-        if (result) {
-          this.paymentConfigs = Array.isArray(this.statusFilters)
-            ? result.filter((p) => this.statusFilters.some((s) => p.status === s))
-            : result;
-          this.$emit('on-load', this.paymentConfigs);
-        }
-      } finally {
-        this.isLoading = false;
-      }
-    },
-
-    async getCurrentListAsync() {
-      try {
-        const result = await brandPageApiClient.getPaymentConfigCurrencyListByBrandPageTokenAsync();
-
-        if (result) {
-          this.currencies = result?.currencies || [];
-        }
-      } catch (err) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.error(`Error fetching currency list: ${err}`);
-        }
-      }
-    },
-  },
-};
+import vClickOutside from 'click-outside-vue3';
+import brandPageApiClient from '../../clients/brand-page-api.client';
+import { sharedPaymentConfigTr } from '../../../useSharedLibTranslate';
+
+export const paymentConfigStatuses = Object.freeze({
+  active: 'Active',
+  pendingPreOnboarding: 'PendingPreOnboarding',
+  pendingPostOnboarding: 'PendingPostOnboarding',
+  unactivatedByCustomer: 'UnactivatedByCustomer',
+});
+
+export default {
+  props: {
+    brandPageToken: {
+      type: String,
+      required: false,
+    },
+    showPaymentProviderExternalId: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    statusFilters: {
+      type: Array,
+      required: false,
+      default: undefined,
+    },
+  },
+  directives: {
+    clickOutside: vClickOutside,
+  },
+  data: () => ({
+    isLoading: true,
+    paymentConfigs: [],
+    currencies: [],
+    selectedPaymentConfig: {},
+    isStripeOptionActionVisible: false,
+  }),
+  computed: {
+    selectedCurrency() {
+      return this.currencies.find((currency) => currency.iso4127Code === this.selectedPaymentConfig?.defaultCurrency);
+    },
+  },
+  methods: {
+    getPaymentConfigStatusDisplayText(paymentConfigStatus) {
+      switch (paymentConfigStatus) {
+        case paymentConfigStatuses.pendingPreOnboarding:
+          return sharedPaymentConfigTr('onboardingIncomplete');
+        case paymentConfigStatuses.pendingPostOnboarding:
+          return sharedPaymentConfigTr('pendingVerification');
+        case paymentConfigStatuses.active:
+          return sharedPaymentConfigTr('connected');
+        case paymentConfigStatuses.unactivatedByCustomer:
+          return sharedPaymentConfigTr('inactive');
+        default:
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn(`Unsupported payment config status ${paymentConfigStatus}`);
+          }
+          return null;
+      }
+    },
+
+    getPaymentConfigStatusDisplayClasses(paymentConfigStatus) {
+      switch (paymentConfigStatus) {
+        case paymentConfigStatuses.pendingPreOnboarding:
+        case paymentConfigStatuses.pendingPostOnboarding:
+          return 'tw-bg-warning-500';
+        case paymentConfigStatuses.active:
+          return 'tw-bg-success-500';
+        case paymentConfigStatuses.unactivatedByCustomer:
+          return 'tw-bg-grayscale-600';
+        default:
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn(`Unsupported payment config status ${paymentConfigStatus}`);
+          }
+          return null;
+      }
+    },
+
+    async updatePaymentConfigs() {
+      if (!this.brandPageToken) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error(`brandPageToken is required`);
+        }
+        return;
+      }
+
+      try {
+        this.isLoading = true;
+
+        const result = await brandPageApiClient.getPaymentConfigsByBrandPageToken(this.brandPageToken);
+
+        if (result) {
+          this.paymentConfigs = Array.isArray(this.statusFilters)
+            ? result.filter((p) => this.statusFilters.some((s) => p.status === s))
+            : result;
+          this.$emit('on-load', this.paymentConfigs);
+        }
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    async getCurrentListAsync() {
+      try {
+        const result = await brandPageApiClient.getPaymentConfigCurrencyListByBrandPageTokenAsync();
+
+        if (result) {
+          this.currencies = result?.currencies || [];
+        }
+      } catch (err) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error(`Error fetching currency list: ${err}`);
+        }
+      }
+    },
+  },
+};

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

@@ -1,108 +1,108 @@
-<template>
-  <Modal
-    full-screen-breakpoint="sm"
-    classes="publish-bp--modal tw-px-2 md:tw-px-8"
-    close-on-esc
-    :visible="true"
-    :hide-scrollbar="false"
-    @close-modal="onCloseModal"
-  >
-    <template #header>
-      <div class="tw-text-center tw-font-bold tw-mb-4 tw-mt-8 tw-text-2xl">
-        <span>Delete Payment Provider</span>
-      </div>
-    </template>
-    <template #default>
-      <div class="tw-text-center tw-w-full tw-border-0 tw-border-solid tw-border-grayscale-400 tw-border-t tw-p-4">
-        <div v-if="isLoading" class="tw-flex tw-justify-center">
-          <Loader />
-        </div>
-        <div v-else>
-          <div class="tw-text-center tw-w-full">
-            <p class="tw-text-grayscale-600">Are you sure you want to delete this payment provider?</p>
-            <p class="tw-text-grayscale-600">
-              Once deleted, your site will no longer show any payment options to visitors. You won’t be able to accept
-              payments unless you set up a new provider.
-            </p>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <div
-        class="tw-font-sans tw-text-center tw-flex tw-gap-2 tw-justify-center tw-mt-4 tw-border-0 tw-border-solid tw-border-grayscale-400 tw-border-t"
-        :style="isMobile ? 'padding-left: 1.5rem; padding-right: 1.5rem;' : ''"
-      >
-        <Button label="Cancel" size="medium" variant="outline" class="tw-my-4" @on-click="onCloseModal" />
-        <Button label="Delete Provider" variant="primary" size="medium" class="tw-my-4" @on-click="onConfirmDelete" />
-      </div>
-    </template>
-  </Modal>
-</template>
-<script>
-import Modal from '../../../atoms/components/Modal/Modal.vue';
-import Button from '../../../atoms/components/Button/Button.vue';
-import Loader from '../../../atoms/components/Loader/Loader.vue';
-import brandPageApiClient from '../../clients/brand-page-api.client';
-
-export default {
-  components: {
-    Modal,
-    Button,
-    Loader,
-  },
-  props: {
-    paymentConfig: {
-      type: Object,
-      required: true,
-      default: () => ({}),
-    },
-    brandPageToken: {
-      type: String,
-      required: false,
-      default: () => undefined,
-    },
-  },
-  emits: ['close-modal', 'on-delete'],
-  data: () => ({
-    isLoading: false,
-  }),
-  methods: {
-    onCloseModal() {
-      this.$emit('close-modal');
-    },
-
-    async onConfirmDelete() {
-      const paymentConfigId = this.paymentConfig.id;
-      if (!this.brandPageToken) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.error(`brandPageToken is required`);
-        }
-        return;
-      }
-
-      if (!paymentConfigId) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.error(`paymentConfigId is required`);
-        }
-        return;
-      }
-
-      try {
-        this.isLoading = true;
-
-        const result = await brandPageApiClient.deletePaymentConfigByBrandPageTokenAndConfigId(
-          this.brandPageToken,
-          paymentConfigId,
-        );
-
-        if (result) {
-          this.$emit('on-delete', paymentConfigId);
-        }
-      } finally {
-        this.isLoading = false;
-      }
-    },
-  },
-};
-</script>
+<template>
+  <Modal
+    full-screen-breakpoint="sm"
+    classes="publish-bp--modal tw-px-2 md:tw-px-8"
+    close-on-esc
+    :visible="true"
+    :hide-scrollbar="false"
+    @close-modal="onCloseModal"
+  >
+    <template #header>
+      <div class="tw-text-center tw-font-bold tw-mb-4 tw-mt-8 tw-text-2xl">
+        <span>Delete Payment Provider</span>
+      </div>
+    </template>
+    <template #default>
+      <div class="tw-text-center tw-w-full tw-border-0 tw-border-solid tw-border-grayscale-400 tw-border-t tw-p-4">
+        <div v-if="isLoading" class="tw-flex tw-justify-center">
+          <Loader />
+        </div>
+        <div v-else>
+          <div class="tw-text-center tw-w-full">
+            <p class="tw-text-grayscale-600">Are you sure you want to delete this payment provider?</p>
+            <p class="tw-text-grayscale-600">
+              Once deleted, your site will no longer show any payment options to visitors. You won’t be able to accept
+              payments unless you set up a new provider.
+            </p>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div
+        class="tw-font-sans tw-text-center tw-flex tw-gap-2 tw-justify-center tw-mt-4 tw-border-0 tw-border-solid tw-border-grayscale-400 tw-border-t"
+        :style="isMobile ? 'padding-left: 1.5rem; padding-right: 1.5rem;' : ''"
+      >
+        <Button label="Cancel" size="medium" variant="outline" class="tw-my-4" @on-click="onCloseModal" />
+        <Button label="Delete Provider" variant="primary" size="medium" class="tw-my-4" @on-click="onConfirmDelete" />
+      </div>
+    </template>
+  </Modal>
+</template>
+<script>
+import Modal from '../../../atoms/components/Modal/Modal.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import Loader from '../../../atoms/components/Loader/Loader.vue';
+import brandPageApiClient from '../../clients/brand-page-api.client';
+
+export default {
+  components: {
+    Modal,
+    Button,
+    Loader,
+  },
+  props: {
+    paymentConfig: {
+      type: Object,
+      required: true,
+      default: () => ({}),
+    },
+    brandPageToken: {
+      type: String,
+      required: false,
+      default: () => undefined,
+    },
+  },
+  emits: ['close-modal', 'on-delete'],
+  data: () => ({
+    isLoading: false,
+  }),
+  methods: {
+    onCloseModal() {
+      this.$emit('close-modal');
+    },
+
+    async onConfirmDelete() {
+      const paymentConfigId = this.paymentConfig.id;
+      if (!this.brandPageToken) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error(`brandPageToken is required`);
+        }
+        return;
+      }
+
+      if (!paymentConfigId) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error(`paymentConfigId is required`);
+        }
+        return;
+      }
+
+      try {
+        this.isLoading = true;
+
+        const result = await brandPageApiClient.deletePaymentConfigByBrandPageTokenAndConfigId(
+          this.brandPageToken,
+          paymentConfigId,
+        );
+
+        if (result) {
+          this.$emit('on-delete', paymentConfigId);
+        }
+      } finally {
+        this.isLoading = false;
+      }
+    },
+  },
+};
+</script>