@designcrowd/fe-shared-lib 1.5.8 → 1.5.9-dbc-1

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

@@ -1,136 +1,136 @@
-<template>
-  <div>
-    <div v-if="isLoading" class="tw-w-full tw-flex tw-justify-center tw-p-2">
-      <Loader />
-    </div>
-    <div v-else>
-      <div
-        v-for="(paymentConfig, index) in paymentConfigs"
-        :key="paymentConfig.id"
-        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" />
-          <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>
-
-        <!-- 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" />{{ sharedPaymentConfigTr('deletePaymentMethod') }}</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 '../../../atoms/components/Loader/Loader.vue';
-import Button from '../../../atoms/components/Button/Button.vue';
-import PaymentConfigDeleteConfigModal from './PaymentConfigDeleteConfigModal.vue';
-import Icon from '../../../atoms/components/Icon/Icon.vue';
-
-import PaymentConfigMixin from './PaymentConfig.mixin';
-import { sharedPaymentConfigTr } from '../../../useSharedLibTranslate';
-
-export default {
-  components: {
-    Loader,
-    Button,
-    Icon,
-    PaymentConfigDeleteConfigModal,
-  },
-
-  mixins: [PaymentConfigMixin],
-  emits: ['on-load'],
-  data() {
-    return {
-      activeStripeOptionIndex: null,
-      showDeleteConfirmationModal: false,
-    };
-  },
-  methods: {
-    sharedPaymentConfigTr,
-
-    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>
+<template>
+  <div>
+    <div v-if="isLoading" class="tw-w-full tw-flex tw-justify-center tw-p-2">
+      <Loader />
+    </div>
+    <div v-else>
+      <div
+        v-for="(paymentConfig, index) in paymentConfigs"
+        :key="paymentConfig.id"
+        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" />
+          <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>
+
+        <!-- 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" />{{ sharedPaymentConfigTr('deletePaymentMethod') }}</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 '../../../atoms/components/Loader/Loader.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import PaymentConfigDeleteConfigModal from './PaymentConfigDeleteConfigModal.vue';
+import Icon from '../../../atoms/components/Icon/Icon.vue';
+
+import PaymentConfigMixin from './PaymentConfig.mixin';
+import { sharedPaymentConfigTr } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Loader,
+    Button,
+    Icon,
+    PaymentConfigDeleteConfigModal,
+  },
+
+  mixins: [PaymentConfigMixin],
+  emits: ['on-load'],
+  data() {
+    return {
+      activeStripeOptionIndex: null,
+      showDeleteConfirmationModal: false,
+    };
+  },
+  methods: {
+    sharedPaymentConfigTr,
+
+    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>

package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.de-DE.json

@@ -1,11 +1,11 @@
-{
-  "sharedPaymentConfig" : {
-    "onboardingIncomplete" : "Das Onboarding wurde noch nicht abgeschlossen.",
-    "pendingVerification" : "Ausstehende Verifizierung",
-    "connected" : "Verbunden",
-    "inactive" : "Inaktiv",
-    "addPaymentProvider" : "Zahlungsanbieter hinzufügen",
-    "deletePaymentMethod" : "Zahlungsmethode löschen",
-    "currencyLabel" : "Währung"
-  }
-}
+{
+  "sharedPaymentConfig" : {
+    "onboardingIncomplete" : "Das Onboarding wurde noch nicht abgeschlossen.",
+    "pendingVerification" : "Ausstehende Verifizierung",
+    "connected" : "Verbunden",
+    "inactive" : "Inaktiv",
+    "addPaymentProvider" : "Zahlungsanbieter hinzufügen",
+    "deletePaymentMethod" : "Zahlungsmethode löschen",
+    "currencyLabel" : "Währung"
+  }
+}

package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.es-ES.json

@@ -1,11 +1,11 @@
-{
-  "sharedPaymentConfig" : {
-    "onboardingIncomplete" : "Incorporación incompleta",
-    "pendingVerification" : "Pendiente de verificación",
-    "connected" : "Conectado",
-    "inactive" : "Inactivo",
-    "addPaymentProvider" : "Añadir proveedor de pago",
-    "deletePaymentMethod" : "Eliminar método de pago",
-    "currencyLabel" : "Moneda"
-  }
-}
+{
+  "sharedPaymentConfig" : {
+    "onboardingIncomplete" : "Incorporación incompleta",
+    "pendingVerification" : "Pendiente de verificación",
+    "connected" : "Conectado",
+    "inactive" : "Inactivo",
+    "addPaymentProvider" : "Añadir proveedor de pago",
+    "deletePaymentMethod" : "Eliminar método de pago",
+    "currencyLabel" : "Moneda"
+  }
+}

package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.fr-CA.json

@@ -1,11 +1,11 @@
-{
-  "sharedPaymentConfig" : {
-    "onboardingIncomplete" : "Inscription incomplète",
-    "pendingVerification" : "Vérification en attente",
-    "connected" : "Connecté",
-    "inactive" : "Inactif",
-    "addPaymentProvider" : "Ajouter un fournisseur de paiement",
-    "deletePaymentMethod" : "Supprimer le mode de paiement",
-    "currencyLabel" : "Devise"
-  }
-}
+{
+  "sharedPaymentConfig" : {
+    "onboardingIncomplete" : "Inscription incomplète",
+    "pendingVerification" : "Vérification en attente",
+    "connected" : "Connecté",
+    "inactive" : "Inactif",
+    "addPaymentProvider" : "Ajouter un fournisseur de paiement",
+    "deletePaymentMethod" : "Supprimer le mode de paiement",
+    "currencyLabel" : "Devise"
+  }
+}

package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.fr-FR.json

@@ -1,11 +1,11 @@
-{
-  "sharedPaymentConfig" : {
-    "onboardingIncomplete" : "Inscription incomplète",
-    "pendingVerification" : "Vérification en attente",
-    "connected" : "Connecté",
-    "inactive" : "Inactif",
-    "addPaymentProvider" : "Ajouter un fournisseur de paiement",
-    "deletePaymentMethod" : "Supprimer le mode de paiement",
-    "currencyLabel" : "Devise"
-  }
-}
+{
+  "sharedPaymentConfig" : {
+    "onboardingIncomplete" : "Inscription incomplète",
+    "pendingVerification" : "Vérification en attente",
+    "connected" : "Connecté",
+    "inactive" : "Inactif",
+    "addPaymentProvider" : "Ajouter un fournisseur de paiement",
+    "deletePaymentMethod" : "Supprimer le mode de paiement",
+    "currencyLabel" : "Devise"
+  }
+}

package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.json

@@ -1,11 +1,11 @@
-{
-  "sharedPaymentConfig": {
-    "onboardingIncomplete": "Onboarding Incomplete",
-    "pendingVerification": "Pending Verification",
-    "connected": "Connected",
-    "inactive": "Inactive",
-    "addPaymentProvider": "Add Payment Provider",
-    "deletePaymentMethod": "Delete payment method",
-    "currencyLabel": "Currency"
-  }
-}
+{
+  "sharedPaymentConfig": {
+    "onboardingIncomplete": "Onboarding Incomplete",
+    "pendingVerification": "Pending Verification",
+    "connected": "Connected",
+    "inactive": "Inactive",
+    "addPaymentProvider": "Add Payment Provider",
+    "deletePaymentMethod": "Delete payment method",
+    "currencyLabel": "Currency"
+  }
+}

package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.pt-BR.json

@@ -1,11 +1,11 @@
-{
-  "sharedPaymentConfig" : {
-    "onboardingIncomplete" : "Integração incompleta",
-    "pendingVerification" : "Verificação Pendente",
-    "connected" : "Conectado",
-    "inactive" : "Inativo",
-    "addPaymentProvider" : "Adicionar fornecedor de pagamentos",
-    "deletePaymentMethod" : "Excluir método de pagamento",
-    "currencyLabel" : "Moeda"
-  }
-}
+{
+  "sharedPaymentConfig" : {
+    "onboardingIncomplete" : "Integração incompleta",
+    "pendingVerification" : "Verificação Pendente",
+    "connected" : "Conectado",
+    "inactive" : "Inativo",
+    "addPaymentProvider" : "Adicionar fornecedor de pagamentos",
+    "deletePaymentMethod" : "Excluir método de pagamento",
+    "currencyLabel" : "Moeda"
+  }
+}

package/src/experiences/components/PaymentConfigList/i18n/shared-payment-config.pt-PT.json

@@ -1,11 +1,11 @@
-{
-  "sharedPaymentConfig" : {
-    "onboardingIncomplete" : "Integração incompleta",
-    "pendingVerification" : "Verificação Pendente",
-    "connected" : "Ligado",
-    "inactive" : "Inativo",
-    "addPaymentProvider" : "Adicionar fornecedor de pagamentos",
-    "deletePaymentMethod" : "Eliminar método de pagamento",
-    "currencyLabel" : "Moeda"
-  }
-}
+{
+  "sharedPaymentConfig" : {
+    "onboardingIncomplete" : "Integração incompleta",
+    "pendingVerification" : "Verificação Pendente",
+    "connected" : "Ligado",
+    "inactive" : "Inativo",
+    "addPaymentProvider" : "Adicionar fornecedor de pagamentos",
+    "deletePaymentMethod" : "Eliminar método de pagamento",
+    "currencyLabel" : "Moeda"
+  }
+}