@designcrowd/fe-shared-lib 1.5.7-eng-3522-1 → 1.5.7

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

@@ -1,234 +1,234 @@
-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',
-  },
-];
-
-const PAYMENT_CONFIGS_CURRENCY_LIST_RESPONSE = {
-  currencies: [
-    {
-      id: '9dce1a02-f415-433b-8ea8-0144c651e236',
-      name: 'United State Dollar',
-      iso4127Code: 'USD',
-      iso31662Code: 'US',
-      symbol: '$',
-      isSymbolPlacedBeforePrice: true,
-      created: '2023-06-21T01:04:12.961Z',
-    },
-    {
-      id: '38dc53a9-a66f-4c6d-b14c-cf987d7f779b',
-      name: 'Australian Dollar',
-      iso4127Code: 'AUD',
-      iso31662Code: 'AU',
-      symbol: '$',
-      isSymbolPlacedBeforePrice: true,
-      created: '2023-06-21T01:04:12.961Z',
-    },
-    {
-      id: '02c5a9f3-39f1-4764-bd91-a76982dd949a',
-      name: 'British Pound Sterling',
-      iso4127Code: 'GBP',
-      iso31662Code: 'UK',
-      symbol: '£',
-      isSymbolPlacedBeforePrice: true,
-      created: '2023-06-21T01:04:12.961Z',
-    },
-    {
-      id: '2b26857d-0525-4bf0-b37c-e020847e0bd2',
-      name: 'Euro',
-      iso4127Code: 'EUR',
-      iso31662Code: 'EU',
-      symbol: '€',
-      isSymbolPlacedBeforePrice: true,
-      created: '2023-06-21T01:04:12.961Z',
-    },
-  ],
-};
-
-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);
-  mock.onGet(`/maker/api/brand-pages/payment-configs/currency-list`).reply(200, PAYMENT_CONFIGS_CURRENCY_LIST_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);
-  mock.onGet(`/maker/api/brand-pages/payment-configs/currency-list`).reply(200, PAYMENT_CONFIGS_CURRENCY_LIST_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);
-  mock.onGet(`/maker/api/brand-pages/payment-configs/currency-list`).reply(200, PAYMENT_CONFIGS_CURRENCY_LIST_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);
-  mock.onGet(`/maker/api/brand-pages/payment-configs/currency-list`).reply(200, PAYMENT_CONFIGS_CURRENCY_LIST_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',
+  },
+];
+
+const PAYMENT_CONFIGS_CURRENCY_LIST_RESPONSE = {
+  currencies: [
+    {
+      id: '9dce1a02-f415-433b-8ea8-0144c651e236',
+      name: 'United State Dollar',
+      iso4127Code: 'USD',
+      iso31662Code: 'US',
+      symbol: '$',
+      isSymbolPlacedBeforePrice: true,
+      created: '2023-06-21T01:04:12.961Z',
+    },
+    {
+      id: '38dc53a9-a66f-4c6d-b14c-cf987d7f779b',
+      name: 'Australian Dollar',
+      iso4127Code: 'AUD',
+      iso31662Code: 'AU',
+      symbol: '$',
+      isSymbolPlacedBeforePrice: true,
+      created: '2023-06-21T01:04:12.961Z',
+    },
+    {
+      id: '02c5a9f3-39f1-4764-bd91-a76982dd949a',
+      name: 'British Pound Sterling',
+      iso4127Code: 'GBP',
+      iso31662Code: 'UK',
+      symbol: '£',
+      isSymbolPlacedBeforePrice: true,
+      created: '2023-06-21T01:04:12.961Z',
+    },
+    {
+      id: '2b26857d-0525-4bf0-b37c-e020847e0bd2',
+      name: 'Euro',
+      iso4127Code: 'EUR',
+      iso31662Code: 'EU',
+      symbol: '€',
+      isSymbolPlacedBeforePrice: true,
+      created: '2023-06-21T01:04:12.961Z',
+    },
+  ],
+};
+
+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);
+  mock.onGet(`/maker/api/brand-pages/payment-configs/currency-list`).reply(200, PAYMENT_CONFIGS_CURRENCY_LIST_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);
+  mock.onGet(`/maker/api/brand-pages/payment-configs/currency-list`).reply(200, PAYMENT_CONFIGS_CURRENCY_LIST_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);
+  mock.onGet(`/maker/api/brand-pages/payment-configs/currency-list`).reply(200, PAYMENT_CONFIGS_CURRENCY_LIST_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);
+  mock.onGet(`/maker/api/brand-pages/payment-configs/currency-list`).reply(200, PAYMENT_CONFIGS_CURRENCY_LIST_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',
+};