@designcrowd/fe-shared-lib 1.1.7 → 1.1.8

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

@@ -1,134 +1,134 @@
-<template>
-  <div>
-    <div v-if="isLoading" class="tw-w-full tw-flex tw-justify-center tw-p-2">
-      <Loader />
-    </div>
-    <Button
-      v-if="isAddPaymentProviderButtonVisible"
-      label="Add Payment Provider"
-      size="small"
-      variant="outline"
-      @on-click="onAddPaymentProviderButtonClick"
-    ></Button>
-    <Dropdown v-if="!isLoading && !isAddPaymentProviderButtonVisible" ref="dropdown">
-      <template #title>
-        <div
-          v-if="selectedPaymentConfig"
-          class="tw-flex tw-items-center tw-px-2 tw-py-2 drop-down-item tw-cursor-pointer"
-        >
-          <span class="tw-text-sm tw-grow tw-select-none tw-flex tw-flex-col">
-            <span>{{ selectedPaymentConfig.name }}</span>
-            <small class="stripe-acct">({{ selectedPaymentConfig.paymentProviderExternalId }})</small>
-          </span>
-          <Pill class="tw-text-white" :class="getPaymentConfigStatusDisplayClasses(selectedPaymentConfig.status)">
-            {{ getPaymentConfigStatusDisplayText(selectedPaymentConfig.status) }}
-          </Pill>
-        </div>
-      </template>
-
-      <DropdownItem
-        v-for="paymentConfig in paymentConfigs"
-        :key="`payment-config-${paymentConfig.id}`"
-        @click="onPaymentConfigClick(paymentConfig)"
-      >
-        <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>
-        <Pill class="tw-text-white" :class="getPaymentConfigStatusDisplayClasses(paymentConfig.status)">
-          {{ getPaymentConfigStatusDisplayText(paymentConfig.status) }}
-        </Pill>
-      </DropdownItem>
-
-      <DropdownItem v-if="showAddPaymentProvider" class="tw-border-t-2" @click="onAddPaymentProviderButtonClick">
-        <Button
-          :full-width="true"
-          label="Add Payment Provider"
-          size="small"
-          variant="outline"
-          @on-click="onAddPaymentProviderButtonClick"
-        />
-      </DropdownItem>
-    </Dropdown>
-  </div>
-</template>
-<script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import Dropdown from '../../../../src/atoms/components/Dropdown/Dropdown.vue';
-import DropdownItem from '../../../../src/atoms/components/Dropdown/DropdownItem.vue';
-import Loader from '../../../../src/atoms/components/Loader/Loader.vue';
-import Pill from '../../../../src/atoms/components/Pill/Pill.vue';
-
-import PaymentConfigMixin, { paymentConfigStatuses } from './PaymentConfig.mixin';
-
-export default {
-  components: {
-    Button,
-    Dropdown,
-    DropdownItem,
-    Loader,
-    Pill,
-  },
-  mixins: [PaymentConfigMixin],
-  props: {
-    showAddPaymentProvider: {
-      type: Boolean,
-      default: true,
-    },
-    paymentConfigId: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-  },
-  data: () => ({ isAddPaymentProviderButtonVisible: false, selectedPaymentConfig: undefined }),
-  watch: {
-    paymentConfig(newValue) {
-      this.selectedPaymentConfig = newValue;
-    },
-  },
-  async mounted() {
-    if (this.brandPageToken) {
-      await this.updatePaymentConfigs();
-      if (!this.selectedPaymentConfig && this.paymentConfigs.length === 0) {
-        this.isAddPaymentProviderButtonVisible = true;
-        return;
-      }
-
-      const paymentConfig = this.paymentConfigs.find((c) => c.id === this.paymentConfigId);
-
-      if (paymentConfig) {
-        this.setSelectedPaymentConfig(paymentConfig);
-      } else if (this.paymentConfigs.length > 0) {
-        const activePaymentConfig = this.paymentConfigs.find((c) => c.status === paymentConfigStatuses.active);
-        this.setSelectedPaymentConfig(activePaymentConfig || this.paymentConfigs[0]);
-      }
-    } else {
-      this.isLoading = false;
-      this.isAddPaymentProviderButtonVisible = true;
-    }
-  },
-  methods: {
-    onAddPaymentProviderButtonClick() {
-      this.$emit('on-add-payment-provider-click');
-    },
-
-    onPaymentConfigClick(paymentConfig) {
-      this.setSelectedPaymentConfig(paymentConfig);
-      this.$refs.dropdown.hideMenu();
-    },
-
-    setSelectedPaymentConfig(paymentConfig) {
-      this.selectedPaymentConfig = paymentConfig;
-      this.$emit('on-payment-config-selected', this.selectedPaymentConfig);
-    },
-  },
-};
-</script>
-
-<style>
-.stripe-acct {
-  font-size: 0.7rem;
-  opacity: 0.5;
-}
-</style>
+<template>
+  <div>
+    <div v-if="isLoading" class="tw-w-full tw-flex tw-justify-center tw-p-2">
+      <Loader />
+    </div>
+    <Button
+      v-if="isAddPaymentProviderButtonVisible"
+      label="Add Payment Provider"
+      size="small"
+      variant="outline"
+      @on-click="onAddPaymentProviderButtonClick"
+    ></Button>
+    <Dropdown v-if="!isLoading && !isAddPaymentProviderButtonVisible" ref="dropdown">
+      <template #title>
+        <div
+          v-if="selectedPaymentConfig"
+          class="tw-flex tw-items-center tw-px-2 tw-py-2 drop-down-item tw-cursor-pointer"
+        >
+          <span class="tw-text-sm tw-grow tw-select-none tw-flex tw-flex-col">
+            <span>{{ selectedPaymentConfig.name }}</span>
+            <small class="stripe-acct">({{ selectedPaymentConfig.paymentProviderExternalId }})</small>
+          </span>
+          <Pill class="tw-text-white" :class="getPaymentConfigStatusDisplayClasses(selectedPaymentConfig.status)">
+            {{ getPaymentConfigStatusDisplayText(selectedPaymentConfig.status) }}
+          </Pill>
+        </div>
+      </template>
+
+      <DropdownItem
+        v-for="paymentConfig in paymentConfigs"
+        :key="`payment-config-${paymentConfig.id}`"
+        @click="onPaymentConfigClick(paymentConfig)"
+      >
+        <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>
+        <Pill class="tw-text-white" :class="getPaymentConfigStatusDisplayClasses(paymentConfig.status)">
+          {{ getPaymentConfigStatusDisplayText(paymentConfig.status) }}
+        </Pill>
+      </DropdownItem>
+
+      <DropdownItem v-if="showAddPaymentProvider" class="tw-border-t-2" @click="onAddPaymentProviderButtonClick">
+        <Button
+          :full-width="true"
+          label="Add Payment Provider"
+          size="small"
+          variant="outline"
+          @on-click="onAddPaymentProviderButtonClick"
+        />
+      </DropdownItem>
+    </Dropdown>
+  </div>
+</template>
+<script>
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Dropdown from '../../../../src/atoms/components/Dropdown/Dropdown.vue';
+import DropdownItem from '../../../../src/atoms/components/Dropdown/DropdownItem.vue';
+import Loader from '../../../../src/atoms/components/Loader/Loader.vue';
+import Pill from '../../../../src/atoms/components/Pill/Pill.vue';
+
+import PaymentConfigMixin, { paymentConfigStatuses } from './PaymentConfig.mixin';
+
+export default {
+  components: {
+    Button,
+    Dropdown,
+    DropdownItem,
+    Loader,
+    Pill,
+  },
+  mixins: [PaymentConfigMixin],
+  props: {
+    showAddPaymentProvider: {
+      type: Boolean,
+      default: true,
+    },
+    paymentConfigId: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+  },
+  data: () => ({ isAddPaymentProviderButtonVisible: false, selectedPaymentConfig: undefined }),
+  watch: {
+    paymentConfig(newValue) {
+      this.selectedPaymentConfig = newValue;
+    },
+  },
+  async mounted() {
+    if (this.brandPageToken) {
+      await this.updatePaymentConfigs();
+      if (!this.selectedPaymentConfig && this.paymentConfigs.length === 0) {
+        this.isAddPaymentProviderButtonVisible = true;
+        return;
+      }
+
+      const paymentConfig = this.paymentConfigs.find((c) => c.id === this.paymentConfigId);
+
+      if (paymentConfig) {
+        this.setSelectedPaymentConfig(paymentConfig);
+      } else if (this.paymentConfigs.length > 0) {
+        const activePaymentConfig = this.paymentConfigs.find((c) => c.status === paymentConfigStatuses.active);
+        this.setSelectedPaymentConfig(activePaymentConfig || this.paymentConfigs[0]);
+      }
+    } else {
+      this.isLoading = false;
+      this.isAddPaymentProviderButtonVisible = true;
+    }
+  },
+  methods: {
+    onAddPaymentProviderButtonClick() {
+      this.$emit('on-add-payment-provider-click');
+    },
+
+    onPaymentConfigClick(paymentConfig) {
+      this.setSelectedPaymentConfig(paymentConfig);
+      this.$refs.dropdown.hideMenu();
+    },
+
+    setSelectedPaymentConfig(paymentConfig) {
+      this.selectedPaymentConfig = paymentConfig;
+      this.$emit('on-payment-config-selected', this.selectedPaymentConfig);
+    },
+  },
+};
+</script>
+
+<style>
+.stripe-acct {
+  font-size: 0.7rem;
+  opacity: 0.5;
+}
+</style>

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: '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',
-};
+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',
+};