@designcrowd/fe-shared-lib 1.0.17 → 1.0.18

package/src/experiences/components/PaymentConfigList/PaymentConfigList.stories.js

@@ -1,189 +1,189 @@
-import axios from 'axios';
-import MockAdapter from 'axios-mock-adapter';
-
-import PaymentConfigList from './PaymentConfigList.vue';
-import PaymentConfigDropdown from './PaymentConfigDropdown.vue';
-
-export default {
-  title: 'Components/PaymentConfigList',
-  component: PaymentConfigList,
-};
-
-const MOCK_RESPONSE_DELAY = 2000;
-const PAYMENT_CONFIGS_RESPONSE = [
-  {
-    id: '32e1c01c-6276-4edb-821d-16f9d8a5e16b',
-    name: 'Stripe AUD',
-    paymentProviderExternalId: undefined, // Intentionally undefined
-    paymentProviderImageUrl:
-      'https://staging.bcassetcdn.com/assets/brand-page/payment-providers/stripe_wordmark_purple.svg',
-    paymentProviderName: 'Stripe',
-    defaultCurrency: 'USD',
-    dashboardUrl: 'https://dashboard.stripe.com',
-    status: 'PendingPreOnboarding',
-  },
-  {
-    id: 'ea1a0933-f3a5-486a-8943-3cea44d4c7ee',
-    name: 'Stripe USD',
-    paymentProviderImageUrl:
-      'https://staging.bcassetcdn.com/assets/brand-page/payment-providers/stripe_wordmark_purple.svg',
-    paymentProviderExternalId: 'acct_123456789abcdefg',
-    paymentProviderName: 'Stripe',
-    defaultCurrency: 'USD',
-    dashboardUrl: 'https://dashboard.stripe.com',
-    status: 'PendingPostOnboarding',
-  },
-  {
-    id: '87dea6c0-68de-4172-984c-ff443c93413c',
-    name: 'Stripe GBP',
-    paymentProviderExternalId: 'acct_123456789abcdefg',
-    paymentProviderImageUrl:
-      'https://staging.bcassetcdn.com/assets/brand-page/payment-providers/stripe_wordmark_purple.svg',
-    paymentProviderName: 'Stripe',
-    defaultCurrency: 'AUD',
-    dashboardUrl: 'https://dashboard.stripe.com',
-    status: 'UnactivatedByCustomer',
-  },
-  {
-    id: '450507c3-ac55-449d-b944-6daa1adba3f1',
-    name: 'Stripe EUR',
-    paymentProviderExternalId: 'acct_123456789abcdefg',
-    paymentProviderImageUrl:
-      'https://staging.bcassetcdn.com/assets/brand-page/payment-providers/stripe_wordmark_purple.svg',
-    paymentProviderName: 'Stripe',
-    defaultCurrency: 'GBP',
-    dashboardUrl: 'https://dashboard.stripe.com',
-    status: 'Active',
-  },
-];
-
-export const SampleStripe = () => {
-  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
-  const brandPageToken = '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647';
-
-  mock.onGet(`/maker/api/brand-pages/${brandPageToken}/payment-configs`).reply(200, PAYMENT_CONFIGS_RESPONSE);
-
-  return {
-    components: {
-      PaymentConfigList,
-    },
-    data() {
-      return {
-        brandPageToken,
-      };
-    },
-    template: `
-      <div class="tw-w-full tw-p-4" style="background: #f4f4f4">
-      <PaymentConfigList :brand-page-token="brandPageToken"/>
-      </div>
-    `,
-  };
-};
-
-export const SampleStripeHideExternalId = () => {
-  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
-  const brandPageToken = '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647';
-
-  mock.onGet(`/maker/api/brand-pages/${brandPageToken}/payment-configs`).reply(200, PAYMENT_CONFIGS_RESPONSE);
-
-  return {
-    components: {
-      PaymentConfigList,
-    },
-    data() {
-      return {
-        brandPageToken,
-      };
-    },
-    template: `
-      <div class="tw-w-full tw-p-4" style="background: #f4f4f4">
-      <PaymentConfigList :brand-page-token="brandPageToken" :show-payment-provider-external-id="false"/>
-      </div>
-    `,
-  };
-};
-
-SampleStripeHideExternalId.story = {
-  name: 'Sample Stripe (Hidden External Id)',
-};
-
-export const SampleDropdownStripe = () => {
-  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
-  const brandPageToken = '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647';
-
-  mock.onGet(`/maker/api/brand-pages/${brandPageToken}/payment-configs`).reply(200, PAYMENT_CONFIGS_RESPONSE);
-
-  return {
-    components: {
-      PaymentConfigDropdown,
-    },
-    data() {
-      return {
-        brandPageToken,
-      };
-    },
-    template: `
-      <div class="tw-w-1/3 tw-p-4" style="background: #f4f4f4">
-      <PaymentConfigDropdown :brand-page-token="brandPageToken"/>
-      </div>
-    `,
-  };
-};
-
-SampleDropdownStripe.story = {
-  name: 'Dropdown Stripe',
-};
-
-export const SampleDropdownStripeWithFilter = () => {
-  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
-  const brandPageToken = '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647';
-
-  mock.onGet(`/maker/api/brand-pages/${brandPageToken}/payment-configs`).reply(200, PAYMENT_CONFIGS_RESPONSE);
-
-  return {
-    components: {
-      PaymentConfigDropdown,
-    },
-    data() {
-      return {
-        brandPageToken,
-      };
-    },
-    template: `
-      <div class="tw-w-full tw-p-4" style="background: #f4f4f4">
-      <PaymentConfigDropdown :brand-page-token="brandPageToken" :status-filters="['Active']"/>
-      </div>
-    `,
-  };
-};
-
-SampleDropdownStripeWithFilter.story = {
-  name: 'Dropdown Stripe with filter',
-};
-
-export const SampleDropdownEmpty = () => {
-  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
-  const brandPageToken = '00000000-0000-0000-0000-000000000000';
-
-  mock.onGet(`/maker/api/brand-pages/${brandPageToken}/payment-configs`).reply(200, []);
-
-  return {
-    components: {
-      PaymentConfigDropdown,
-    },
-    data() {
-      return {
-        brandPageToken,
-      };
-    },
-    template: `
-      <div class="tw-w-1/3 tw-p-4" style="background: #f4f4f4">
-      <PaymentConfigDropdown :brand-page-token="brandPageToken"/>
-      </div>
-    `,
-  };
-};
-
-SampleDropdownEmpty.SampleDropdownEmpty = {
-  name: 'Dropdown Empty',
-};
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+
+import PaymentConfigList from './PaymentConfigList.vue';
+import PaymentConfigDropdown from './PaymentConfigDropdown.vue';
+
+export default {
+  title: 'Components/PaymentConfigList',
+  component: PaymentConfigList,
+};
+
+const MOCK_RESPONSE_DELAY = 2000;
+const PAYMENT_CONFIGS_RESPONSE = [
+  {
+    id: '32e1c01c-6276-4edb-821d-16f9d8a5e16b',
+    name: 'Stripe AUD',
+    paymentProviderExternalId: 'acct_123456789abcdefg',
+    paymentProviderImageUrl:
+      'https://staging.bcassetcdn.com/assets/brand-page/payment-providers/stripe_wordmark_purple.svg',
+    paymentProviderName: 'Stripe',
+    defaultCurrency: 'USD',
+    dashboardUrl: 'https://dashboard.stripe.com',
+    status: 'PendingPreOnboarding',
+  },
+  {
+    id: 'ea1a0933-f3a5-486a-8943-3cea44d4c7ee',
+    name: 'Stripe USD',
+    paymentProviderImageUrl:
+      'https://staging.bcassetcdn.com/assets/brand-page/payment-providers/stripe_wordmark_purple.svg',
+    paymentProviderExternalId: 'acct_123456789abcdefg',
+    paymentProviderName: 'Stripe',
+    defaultCurrency: 'USD',
+    dashboardUrl: 'https://dashboard.stripe.com',
+    status: 'PendingPostOnboarding',
+  },
+  {
+    id: '87dea6c0-68de-4172-984c-ff443c93413c',
+    name: 'Stripe GBP',
+    paymentProviderExternalId: 'acct_123456789abcdefg',
+    paymentProviderImageUrl:
+      'https://staging.bcassetcdn.com/assets/brand-page/payment-providers/stripe_wordmark_purple.svg',
+    paymentProviderName: 'Stripe',
+    defaultCurrency: 'AUD',
+    dashboardUrl: 'https://dashboard.stripe.com',
+    status: 'UnactivatedByCustomer',
+  },
+  {
+    id: '450507c3-ac55-449d-b944-6daa1adba3f1',
+    name: 'Stripe EUR',
+    paymentProviderExternalId: 'acct_123456789abcdefg',
+    paymentProviderImageUrl:
+      'https://staging.bcassetcdn.com/assets/brand-page/payment-providers/stripe_wordmark_purple.svg',
+    paymentProviderName: 'Stripe',
+    defaultCurrency: 'GBP',
+    dashboardUrl: 'https://dashboard.stripe.com',
+    status: 'Active',
+  },
+];
+
+export const SampleStripe = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
+  const brandPageToken = '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647';
+
+  mock.onGet(`/maker/api/brand-pages/${brandPageToken}/payment-configs`).reply(200, PAYMENT_CONFIGS_RESPONSE);
+
+  return {
+    components: {
+      PaymentConfigList,
+    },
+    data() {
+      return {
+        brandPageToken,
+      };
+    },
+    template: `
+      <div class="tw-w-full tw-p-4" style="background: #f4f4f4">
+      <PaymentConfigList :brand-page-token="brandPageToken"/>
+      </div>
+    `,
+  };
+};
+
+export const SampleStripeHideExternalId = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
+  const brandPageToken = '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647';
+
+  mock.onGet(`/maker/api/brand-pages/${brandPageToken}/payment-configs`).reply(200, PAYMENT_CONFIGS_RESPONSE);
+
+  return {
+    components: {
+      PaymentConfigList,
+    },
+    data() {
+      return {
+        brandPageToken,
+      };
+    },
+    template: `
+      <div class="tw-w-full tw-p-4" style="background: #f4f4f4">
+      <PaymentConfigList :brand-page-token="brandPageToken" :show-payment-provider-external-id="false"/>
+      </div>
+    `,
+  };
+};
+
+SampleStripeHideExternalId.story = {
+  name: 'Sample Stripe (Hidden External Id)',
+};
+
+export const SampleDropdownStripe = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
+  const brandPageToken = '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647';
+
+  mock.onGet(`/maker/api/brand-pages/${brandPageToken}/payment-configs`).reply(200, PAYMENT_CONFIGS_RESPONSE);
+
+  return {
+    components: {
+      PaymentConfigDropdown,
+    },
+    data() {
+      return {
+        brandPageToken,
+      };
+    },
+    template: `
+      <div class="tw-w-1/3 tw-p-4" style="background: #f4f4f4">
+      <PaymentConfigDropdown :brand-page-token="brandPageToken"/>
+      </div>
+    `,
+  };
+};
+
+SampleDropdownStripe.story = {
+  name: 'Dropdown Stripe',
+};
+
+export const SampleDropdownStripeWithFilter = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
+  const brandPageToken = '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647';
+
+  mock.onGet(`/maker/api/brand-pages/${brandPageToken}/payment-configs`).reply(200, PAYMENT_CONFIGS_RESPONSE);
+
+  return {
+    components: {
+      PaymentConfigDropdown,
+    },
+    data() {
+      return {
+        brandPageToken,
+      };
+    },
+    template: `
+      <div class="tw-w-full tw-p-4" style="background: #f4f4f4">
+      <PaymentConfigDropdown :brand-page-token="brandPageToken" :status-filters="['Active']"/>
+      </div>
+    `,
+  };
+};
+
+SampleDropdownStripeWithFilter.story = {
+  name: 'Dropdown Stripe with filter',
+};
+
+export const SampleDropdownEmpty = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
+  const brandPageToken = '00000000-0000-0000-0000-000000000000';
+
+  mock.onGet(`/maker/api/brand-pages/${brandPageToken}/payment-configs`).reply(200, []);
+
+  return {
+    components: {
+      PaymentConfigDropdown,
+    },
+    data() {
+      return {
+        brandPageToken,
+      };
+    },
+    template: `
+      <div class="tw-w-1/3 tw-p-4" style="background: #f4f4f4">
+      <PaymentConfigDropdown :brand-page-token="brandPageToken"/>
+      </div>
+    `,
+  };
+};
+
+SampleDropdownEmpty.SampleDropdownEmpty = {
+  name: 'Dropdown Empty',
+};

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

@@ -1,45 +1,46 @@
-<template>
-  <div>
-    <div v-if="isLoading" class="tw-w-full tw-flex tw-justify-center tw-p-2">
-      <Loader />
-    </div>
-    <div v-else>
-      <a
-        v-for="(paymentConfig, index) in paymentConfigs"
-        :key="paymentConfig.id"
-        :href="paymentConfig.dashboardUrl"
-        target="_blank"
-      >
-        <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" />
-          {{ paymentConfig.paymentProviderName }}
-          {{ paymentConfig.defaultCurrency }}
-          <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>
-      </a>
-    </div>
-  </div>
-</template>
-<script>
-import Loader from '../../../../src/atoms/components/Loader/Loader.vue';
-
-import PaymentConfigMixin from './PaymentConfig.mixin';
-
-export default {
-  components: {
-    Loader,
-  },
-  mixins: [PaymentConfigMixin],
-  async mounted() {
-    await this.updatePaymentConfigs();
-  },
-};
-</script>
+<template>
+  <div>
+    <div v-if="isLoading" class="tw-w-full tw-flex tw-justify-center tw-p-2">
+      <Loader />
+    </div>
+    <div v-else>
+      <a
+        v-for="(paymentConfig, index) in paymentConfigs"
+        :key="paymentConfig.id"
+        :href="paymentConfig.dashboardUrl"
+        target="_blank"
+      >
+        <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" />
+          {{ paymentConfig.paymentProviderName }}
+          {{ paymentConfig.defaultCurrency }}
+          <small>({{ paymentConfig.paymentProviderExternalId }})</small>
+          <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>
+      </a>
+    </div>
+  </div>
+</template>
+<script>
+import Loader from '../../../../src/atoms/components/Loader/Loader.vue';
+
+import PaymentConfigMixin from './PaymentConfig.mixin';
+
+export default {
+  components: {
+    Loader,
+  },
+  mixins: [PaymentConfigMixin],
+  async mounted() {
+    await this.updatePaymentConfigs();
+  },
+};
+</script>