@designcrowd/fe-shared-lib 1.1.7 → 1.1.8

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

@@ -1,133 +1,133 @@
-<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" />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>
+<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" />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>

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue

@@ -1,115 +1,115 @@
-<template>
-  <div class="tw-bg-white tw-border tw-border-grayscale-500 tw-rounded tw-p-4">
-    <div class="tw-flex tw-flex-row tw-items-center">
-      <div class="tw-flex tw-flex-col tw-mx-auto tw-max-w-1/3 tw-text-center tw-align-top tw-px-2">
-        <img :src="imgUrl" alt="icon" class="md:tw-max-w-full" />
-      </div>
-      <div class="tw-flex tw-flex-col tw-px-2 tw-w-full">
-        <div class="tw-flex tw-flex-col md:tw-flex-row tw-text-center md:tw-text-left tw-items-center">
-          <div class="tw-flex tw-flex-col tw-w-full md:tw-grow tw-text-left">
-            <div class="tw-flex tw-flex-col md:tw-flex-row tw-gap-2">
-              <p class="tw-font-bold tw-text-sm" :class="{ 'tw-text-grayscale-800': isDesignCom }">
-                {{ title }}
-              </p>
-              <span
-                v-if="showLabel"
-                class="tw-text-xs tw-h-4 tw-w-fit tw-text-primary-500 tw-border tw-border-solid tw-border-primary-500 tw-rounded-full tw-px-2 tw-font-sans tw-uppercase"
-              >
-                Recommended
-              </span>
-            </div>
-            <p class="tw-mt-2 md:tw-mt-0 tw-text-grayscale-600 tw-text-sm">
-              {{ description }}
-            </p>
-            <div class="desktop-cta tw-mt-2">
-              <slot name="slug" />
-            </div>
-          </div>
-          <div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 desktop-cta">
-            <Button
-              label="Search"
-              class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
-              data-test-brand-page-search-button
-              variant="primary"
-              size="small-medium"
-              @on-click="onClick"
-              :class="{
-                'tw-uppercase': !isDesignCom,
-              }"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="tw-mt-2 tw-px-2 tw-flex tw-flex-col tw-w-full">
-      <div class="mobile-cta">
-        <slot name="slug" />
-      </div>
-      <div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 mobile-cta tw-mt-2">
-        <Button
-          label="Search"
-          class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
-          data-test-brand-page-search-button
-          variant="primary"
-          size="small-medium"
-          :full-width="true"
-          @on-click="onClick"
-          :class="{
-            'tw-uppercase': !isDesignCom,
-          }"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  imgUrl: {
-    type: Boolean,
-    default: true,
-  },
-  isDesignCom: {
-    type: Boolean,
-    default: false,
-  },
-  hasSearchButton: {
-    type: Boolean,
-    default: true,
-  },
-  showLabel: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['on-show-domain-list-modal']);
-const onClick = () => {
-  emit('on-show-domain-list-modal');
-};
-</script>
-
-<style scoped>
-@media (max-width: 640px) {
-  .desktop-cta {
-    display: none;
-    width: 100%;
-  }
-}
-
-@media (min-width: 640px) {
-  .mobile-cta {
-    display: none;
-    width: 100%;
-  }
-}
-</style>
+<template>
+  <div class="tw-bg-white tw-border tw-border-grayscale-500 tw-rounded tw-p-4">
+    <div class="tw-flex tw-flex-row tw-items-center">
+      <div class="tw-flex tw-flex-col tw-mx-auto tw-max-w-1/3 tw-text-center tw-align-top tw-px-2">
+        <img :src="imgUrl" alt="icon" class="md:tw-max-w-full" />
+      </div>
+      <div class="tw-flex tw-flex-col tw-px-2 tw-w-full">
+        <div class="tw-flex tw-flex-col md:tw-flex-row tw-text-center md:tw-text-left tw-items-center">
+          <div class="tw-flex tw-flex-col tw-w-full md:tw-grow tw-text-left">
+            <div class="tw-flex tw-flex-col md:tw-flex-row tw-gap-2">
+              <p class="tw-font-bold tw-text-sm" :class="{ 'tw-text-grayscale-800': isDesignCom }">
+                {{ title }}
+              </p>
+              <span
+                v-if="showLabel"
+                class="tw-text-xs tw-h-4 tw-w-fit tw-text-primary-500 tw-border tw-border-solid tw-border-primary-500 tw-rounded-full tw-px-2 tw-font-sans tw-uppercase"
+              >
+                Recommended
+              </span>
+            </div>
+            <p class="tw-mt-2 md:tw-mt-0 tw-text-grayscale-600 tw-text-sm">
+              {{ description }}
+            </p>
+            <div class="desktop-cta tw-mt-2">
+              <slot name="slug" />
+            </div>
+          </div>
+          <div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 desktop-cta">
+            <Button
+              label="Search"
+              class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
+              data-test-brand-page-search-button
+              variant="primary"
+              size="small-medium"
+              @on-click="onClick"
+              :class="{
+                'tw-uppercase': !isDesignCom,
+              }"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tw-mt-2 tw-px-2 tw-flex tw-flex-col tw-w-full">
+      <div class="mobile-cta">
+        <slot name="slug" />
+      </div>
+      <div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 mobile-cta tw-mt-2">
+        <Button
+          label="Search"
+          class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
+          data-test-brand-page-search-button
+          variant="primary"
+          size="small-medium"
+          :full-width="true"
+          @on-click="onClick"
+          :class="{
+            'tw-uppercase': !isDesignCom,
+          }"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  imgUrl: {
+    type: Boolean,
+    default: true,
+  },
+  isDesignCom: {
+    type: Boolean,
+    default: false,
+  },
+  hasSearchButton: {
+    type: Boolean,
+    default: true,
+  },
+  showLabel: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['on-show-domain-list-modal']);
+const onClick = () => {
+  emit('on-show-domain-list-modal');
+};
+</script>
+
+<style scoped>
+@media (max-width: 640px) {
+  .desktop-cta {
+    display: none;
+    width: 100%;
+  }
+}
+
+@media (min-width: 640px) {
+  .mobile-cta {
+    display: none;
+    width: 100%;
+  }
+}
+</style>