@designcrowd/fe-shared-lib 1.4.2 → 1.4.3-MP-4489.1

package/dist/css/tailwind-brandCrowd.css

@@ -738,6 +738,9 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -1600,9 +1603,6 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
-.tw-p-5 {
-  padding: 1.25rem;
-}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1738,9 +1738,6 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.tw-pt-4 {
-  padding-top: 1rem;
-}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/dist/css/tailwind-brandPage.css

@@ -738,6 +738,9 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -1448,9 +1451,6 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
-.tw-p-5 {
-  padding: 1.25rem;
-}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1586,9 +1586,6 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.tw-pt-4 {
-  padding-top: 1rem;
-}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/dist/css/tailwind-crazyDomains.css

@@ -738,6 +738,9 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -1600,9 +1603,6 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
-.tw-p-5 {
-  padding: 1.25rem;
-}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1738,9 +1738,6 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.tw-pt-4 {
-  padding-top: 1rem;
-}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/dist/css/tailwind-designCom.css

@@ -738,6 +738,9 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -1600,9 +1603,6 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
-.tw-p-5 {
-  padding: 1.25rem;
-}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1738,9 +1738,6 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.tw-pt-4 {
-  padding-top: 1rem;
-}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/dist/css/tailwind-designCrowd.css

@@ -738,6 +738,9 @@ video {
 .tw-mt-0 {
   margin-top: 0px;
 }
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -1600,9 +1603,6 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
-.tw-p-5 {
-  padding: 1.25rem;
-}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1738,9 +1738,6 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.tw-pt-4 {
-  padding-top: 1rem;
-}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.4.2",
+  "version": "1.4.3-MP-4489.1",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/src/atoms/components/Dropdown/DropdownItem.vue

@@ -2,7 +2,7 @@
   <div>
     <div
       class="tw-flex tw-items-center tw-px-2 tw-py-2 tw-cursor-pointer"
-      @click="onClick"
+      @click.stop="onClick"
       :class="{
         'dropdown-item-hover': backgroundHover,
       }"

package/src/atoms/components/TextInput/TextInput.vue

@@ -25,8 +25,9 @@
       <div
         :class="{
           'tw-relative': icon || enableInput,
+          'tw-grow': !!prefixText,
+          'tw-w-full': !prefixText,
         }"
-        class="tw-w-full"
       >
         <div
           v-if="icon"

package/src/bundles/bundled-translations.de-DE.json

@@ -9,7 +9,8 @@
     "connected": "Verbunden",
     "inactive": "Inaktiv",
     "addPaymentProvider": "Zahlungsanbieter hinzufügen",
-    "deletePaymentMethod": "Zahlungsmethode löschen"
+    "deletePaymentMethod": "Zahlungsmethode löschen",
+    "currencyLabel": "Währung"
   },
   "publishBrandPageModal": {
     "firstTimePublishHeaderLabel": "Legen Sie die URL für {{brandPageDisplayName}} fest",

package/src/bundles/bundled-translations.es-ES.json

@@ -9,7 +9,8 @@
     "connected": "Conectado",
     "inactive": "Inactivo",
     "addPaymentProvider": "Añadir proveedor de pago",
-    "deletePaymentMethod": "Eliminar método de pago"
+    "deletePaymentMethod": "Eliminar método de pago",
+    "currencyLabel": "Moneda"
   },
   "publishBrandPageModal": {
     "firstTimePublishHeaderLabel": "Establece la URL para {{brandPageDisplayName}}",

package/src/bundles/bundled-translations.fr-CA.json

@@ -9,7 +9,8 @@
     "connected": "Connecté",
     "inactive": "Inactif",
     "addPaymentProvider": "Ajouter un fournisseur de paiement",
-    "deletePaymentMethod": "Supprimer le mode de paiement"
+    "deletePaymentMethod": "Supprimer le mode de paiement",
+    "currencyLabel": "Devise"
   },
   "publishBrandPageModal": {
     "firstTimePublishHeaderLabel": "Définissez l'URL pour {{brandPageDisplayName}}",

package/src/bundles/bundled-translations.fr-FR.json

@@ -9,7 +9,8 @@
     "connected": "Connecté",
     "inactive": "Inactif",
     "addPaymentProvider": "Ajouter un fournisseur de paiement",
-    "deletePaymentMethod": "Supprimer le mode de paiement"
+    "deletePaymentMethod": "Supprimer le mode de paiement",
+    "currencyLabel": "Devise"
   },
   "publishBrandPageModal": {
     "firstTimePublishHeaderLabel": "Définissez l'URL pour {{brandPageDisplayName}}",

package/src/bundles/bundled-translations.json

@@ -9,7 +9,8 @@
     "connected": "Connected",
     "inactive": "Inactive",
     "addPaymentProvider": "Add Payment Provider",
-    "deletePaymentMethod": "Delete payment method"
+    "deletePaymentMethod": "Delete payment method",
+    "currencyLabel": "Currency"
   },
   "publishBrandPageModal": {
     "firstTimePublishHeaderLabel": "Set the URL for {{brandPageDisplayName}}",

package/src/bundles/bundled-translations.pt-BR.json

@@ -9,7 +9,8 @@
     "connected": "Conectado",
     "inactive": "Inativo",
     "addPaymentProvider": "Adicionar fornecedor de pagamentos",
-    "deletePaymentMethod": "Excluir método de pagamento"
+    "deletePaymentMethod": "Excluir método de pagamento",
+    "currencyLabel": "Moeda"
   },
   "publishBrandPageModal": {
     "firstTimePublishHeaderLabel": "Defina o URL para {{brandPageDisplayName}}",

package/src/bundles/bundled-translations.pt-PT.json

@@ -9,7 +9,8 @@
     "connected": "Ligado",
     "inactive": "Inativo",
     "addPaymentProvider": "Adicionar fornecedor de pagamentos",
-    "deletePaymentMethod": "Eliminar método de pagamento"
+    "deletePaymentMethod": "Eliminar método de pagamento",
+    "currencyLabel": "Moeda"
   },
   "publishBrandPageModal": {
     "firstTimePublishHeaderLabel": "Defina o URL para {{brandPageDisplayName}}",

package/src/experiences/clients/brand-crowd-api.client.js

@@ -12,10 +12,21 @@ const getAxios = () => {
   return internalAxios || axios;
 };
 
-const uploadLogoAndGetDetails = async (logoFile) => {
+/**
+ * @param {File} logoFile
+ * @param {Object} data
+ * @returns Promise<{ success: boolean, response: any, error: any }>
+ */
+const uploadLogoAndGetDetails = async (logoFile, data) => {
   const formData = new FormData();
   formData.append('logoImage', logoFile && logoFile.file);
 
+  if (data && Object.keys(data).length > 0) {
+    Object.keys(data).forEach((key) => {
+      formData.append(key, data[key]);
+    });
+  }
+
   try {
     const response = await getAxios()({
       method: 'post',

package/src/experiences/clients/brand-page-api.client.js

@@ -24,6 +24,20 @@ const getPaymentConfigsByBrandPageToken = async (brandPageToken) => {
   }
 };
 
+const getPaymentConfigCurrencyListByBrandPageTokenAsync = async () => {
+  try {
+    const response = await getAxios().get(`/maker/api/brand-pages/payment-configs/currency-list`);
+
+    if (response.status === 200) {
+      return response.data;
+    }
+
+    return null;
+  } catch (err) {
+    return null;
+  }
+};
+
 const deletePaymentConfigByBrandPageTokenAndConfigId = async (brandPageToken, paymentConfigId) => {
   try {
     const response = await getAxios().delete(`/maker/api/brand-pages/${brandPageToken}/payment-configs`, {
@@ -44,4 +58,5 @@ export default {
   setBrandPageApiClientAxios,
   getPaymentConfigsByBrandPageToken,
   deletePaymentConfigByBrandPageTokenAndConfigId,
+  getPaymentConfigCurrencyListByBrandPageTokenAsync,
 };

package/src/experiences/components/AuthFlow/AuthModal.vue

@@ -17,7 +17,7 @@
   </div>
 </template>
 <script>
-import Icon from '../../../../src/atoms/components/Icon/Icon.vue';
+import Icon from '../../../atoms/components/Icon/Icon.vue';
 
 export default {
   components: {

package/src/experiences/components/AuthFlow/ForgotPassword.vue

@@ -74,7 +74,7 @@
 </template>
 <script>
 import { getCurrentLocale } from '../../../useSharedLibTranslate';
-import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
+import HelloBar from '../../../atoms/components/HelloBar/HelloBar.vue';
 import SubmissionButton from './SubmissionButton.vue';
 
 export default {

package/src/experiences/components/AuthFlow/ResetPassword.vue

@@ -64,7 +64,7 @@
 </template>
 <script>
 import { getCurrentLocale } from '../../../useSharedLibTranslate';
-import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
+import HelloBar from '../../../atoms/components/HelloBar/HelloBar.vue';
 import SubmissionButton from './SubmissionButton.vue';
 
 export default {

package/src/experiences/components/AuthFlow/ResetPasswordSuccessModal.vue

@@ -19,7 +19,7 @@
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
 
 import AuthModal from './AuthModal.vue';
 

package/src/experiences/components/AuthFlow/SocialSignInButton.vue

@@ -23,7 +23,7 @@
   </button>
 </template>
 <script>
-import Icon from '../../../../src/atoms/components/Icon/Icon.vue';
+import Icon from '../../../atoms/components/Icon/Icon.vue';
 
 const TYPES = {
   FACEBOOK: 'facebook',

package/src/experiences/components/AuthFlow/SubmissionButton.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
 
 export default {
   components: {

package/src/experiences/components/PaymentConfigList/PaymentConfig.mixin.js

@@ -32,9 +32,15 @@ export default {
   data: () => ({
     isLoading: true,
     paymentConfigs: [],
+    currencies: [],
     selectedPaymentConfig: {},
     isStripeOptionActionVisible: false,
   }),
+  computed: {
+    selectedCurrency() {
+      return this.currencies.find((currency) => currency.iso4127Code === this.selectedPaymentConfig?.defaultCurrency);
+    },
+  },
   methods: {
     getPaymentConfigStatusDisplayText(paymentConfigStatus) {
       switch (paymentConfigStatus) {
@@ -94,5 +100,19 @@ export default {
         this.isLoading = false;
       }
     },
+
+    async getCurrentListAsync() {
+      try {
+        const result = await brandPageApiClient.getPaymentConfigCurrencyListByBrandPageTokenAsync();
+
+        if (result) {
+          this.currencies = result?.currencies || [];
+        }
+      } catch (err) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error(`Error fetching currency list: ${err}`);
+        }
+      }
+    },
   },
 };

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

@@ -40,17 +40,17 @@
   </Modal>
 </template>
 <script>
-import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import Loader from '../../../../src/atoms/components/Loader/Loader.vue';
-import brandPageApiClient from './../../clients/brand-page-api.client';
+import Modal from '../../../atoms/components/Modal/Modal.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import Loader from '../../../atoms/components/Loader/Loader.vue';
+import brandPageApiClient from '../../clients/brand-page-api.client';
+
 export default {
   components: {
     Modal,
     Button,
     Loader,
   },
-  emits: ['close-modal', 'on-delete'],
   props: {
     paymentConfig: {
       type: Object,
@@ -60,8 +60,10 @@ export default {
     brandPageToken: {
       type: String,
       required: false,
+      default: () => undefined,
     },
   },
+  emits: ['close-modal', 'on-delete'],
   data: () => ({
     isLoading: false,
   }),

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

@@ -10,54 +10,84 @@
       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"
+    <div v-if="!isLoading && !isAddPaymentProviderButtonVisible">
+      <Dropdown 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>{{ selectedPaymentConfig.name }}</span>
-            <small class="stripe-acct">({{ selectedPaymentConfig.paymentProviderExternalId }})</small>
+            <span>{{ paymentConfig.name }}</span>
+            <small class="stripe-acct">({{ paymentConfig.paymentProviderExternalId }})</small>
           </span>
-          <Pill class="tw-text-white" :class="getPaymentConfigStatusDisplayClasses(selectedPaymentConfig.status)">
-            {{ getPaymentConfigStatusDisplayText(selectedPaymentConfig.status) }}
+          <Pill class="tw-text-white" :class="getPaymentConfigStatusDisplayClasses(paymentConfig.status)">
+            {{ getPaymentConfigStatusDisplayText(paymentConfig.status) }}
           </Pill>
-        </div>
-      </template>
+        </DropdownItem>
 
-      <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="sharedPaymentConfigTr('addPaymentProvider')"
+            size="small"
+            variant="outline"
+            @on-click="onAddPaymentProviderButtonClick"
+          />
+        </DropdownItem>
+      </Dropdown>
+      <!-- Currency -->
+      <template v-if="currencies && currencies.length > 0">
+        <h4 class="tw-mt-6 tw-mb-2 tw-text-sm tw-font-bold">{{ sharedPaymentConfigTr('currencyLabel') }}</h4>
+        <Dropdown ref="dropdownCurrency" :menu-element-classes="'tw-w-full'">
+          <template #title>
+            <div
+              v-if="selectedCurrency"
+              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>{{ selectedCurrency.iso4127Code }} ({{ selectedCurrency.symbol }})</span>
+              </span>
+            </div>
+          </template>
 
-      <DropdownItem v-if="showAddPaymentProvider" class="tw-border-t-2" @click="onAddPaymentProviderButtonClick">
-        <Button
-          :full-width="true"
-          :label="sharedPaymentConfigTr('addPaymentProvider')"
-          size="small"
-          variant="outline"
-          @on-click="onAddPaymentProviderButtonClick"
-        />
-      </DropdownItem>
-    </Dropdown>
+          <DropdownItem
+            v-for="currency in currencies"
+            :key="`currency-${currency.id}`"
+            @click="onCurrencyClick(currency)"
+          >
+            <span class="tw-text-sm tw-grow tw-select-none tw-flex tw-flex-col">
+              <span>{{ currency.iso4127Code }} ({{ currency.symbol }})</span>
+            </span>
+            <Icon v-if="selectedCurrency?.id === currency.id" name="check-thin" />
+          </DropdownItem>
+        </Dropdown>
+      </template>
+    </div>
   </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 Button from '../../../atoms/components/Button/Button.vue';
+import Dropdown from '../../../atoms/components/Dropdown/Dropdown.vue';
+import DropdownItem from '../../../atoms/components/Dropdown/DropdownItem.vue';
+import Loader from '../../../atoms/components/Loader/Loader.vue';
+import Pill from '../../../atoms/components/Pill/Pill.vue';
+import Icon from '../../../atoms/components/Icon/Icon.vue';
 
 import PaymentConfigMixin, { paymentConfigStatuses } from './PaymentConfig.mixin';
 import { sharedPaymentConfigTr } from '../../../useSharedLibTranslate';
@@ -69,6 +99,7 @@ export default {
     DropdownItem,
     Loader,
     Pill,
+    Icon,
   },
   mixins: [PaymentConfigMixin],
   props: {
@@ -89,6 +120,8 @@ export default {
     },
   },
   async mounted() {
+    this.getCurrentListAsync();
+
     if (this.brandPageToken) {
       await this.updatePaymentConfigs();
       if (!this.selectedPaymentConfig && this.paymentConfigs.length === 0) {
@@ -125,6 +158,11 @@ export default {
       this.selectedPaymentConfig = paymentConfig;
       this.$emit('on-payment-config-selected', this.selectedPaymentConfig);
     },
+
+    onCurrencyClick(currency) {
+      this.$refs.dropdownCurrency.hideMenu();
+      this.$emit('on-currency-selected', currency);
+    },
   },
 };
 </script>

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

@@ -57,11 +57,53 @@ const PAYMENT_CONFIGS_RESPONSE = [
   },
 ];
 
+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: {
@@ -85,6 +127,7 @@ export const SampleStripeHideExternalId = () => {
   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: {
@@ -112,6 +155,7 @@ export const SampleDropdownStripe = () => {
   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: {
@@ -139,6 +183,7 @@ export const SampleDropdownStripeWithFilter = () => {
   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: {

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

@@ -65,10 +65,10 @@
 </template>
 
 <script>
-import Loader from '../../../../src/atoms/components/Loader/Loader.vue';
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Loader from '../../../atoms/components/Loader/Loader.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
 import PaymentConfigDeleteConfigModal from './PaymentConfigDeleteConfigModal.vue';
-import Icon from '../../../../src/atoms/components/Icon/Icon.vue';
+import Icon from '../../../atoms/components/Icon/Icon.vue';
 
 import PaymentConfigMixin from './PaymentConfig.mixin';
 import { sharedPaymentConfigTr } from '../../../useSharedLibTranslate';

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

@@ -5,6 +5,7 @@
     "connected" : "Verbunden",
     "inactive" : "Inaktiv",
     "addPaymentProvider" : "Zahlungsanbieter hinzufügen",
-    "deletePaymentMethod" : "Zahlungsmethode löschen"
+    "deletePaymentMethod" : "Zahlungsmethode löschen",
+    "currencyLabel" : "Währung"
   }
 }

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

@@ -5,6 +5,7 @@
     "connected" : "Conectado",
     "inactive" : "Inactivo",
     "addPaymentProvider" : "Añadir proveedor de pago",
-    "deletePaymentMethod" : "Eliminar método de pago"
+    "deletePaymentMethod" : "Eliminar método de pago",
+    "currencyLabel" : "Moneda"
   }
 }

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

@@ -5,6 +5,7 @@
     "connected" : "Connecté",
     "inactive" : "Inactif",
     "addPaymentProvider" : "Ajouter un fournisseur de paiement",
-    "deletePaymentMethod" : "Supprimer le mode de paiement"
+    "deletePaymentMethod" : "Supprimer le mode de paiement",
+    "currencyLabel" : "Devise"
   }
 }

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

@@ -5,6 +5,7 @@
     "connected" : "Connecté",
     "inactive" : "Inactif",
     "addPaymentProvider" : "Ajouter un fournisseur de paiement",
-    "deletePaymentMethod" : "Supprimer le mode de paiement"
+    "deletePaymentMethod" : "Supprimer le mode de paiement",
+    "currencyLabel" : "Devise"
   }
 }

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

@@ -5,6 +5,7 @@
     "connected": "Connected",
     "inactive": "Inactive",
     "addPaymentProvider": "Add Payment Provider",
-    "deletePaymentMethod": "Delete payment method"
+    "deletePaymentMethod": "Delete payment method",
+    "currencyLabel": "Currency"
   }
 }

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

@@ -5,6 +5,7 @@
     "connected" : "Conectado",
     "inactive" : "Inativo",
     "addPaymentProvider" : "Adicionar fornecedor de pagamentos",
-    "deletePaymentMethod" : "Excluir método de pagamento"
+    "deletePaymentMethod" : "Excluir método de pagamento",
+    "currencyLabel" : "Moeda"
   }
 }

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

@@ -5,6 +5,7 @@
     "connected" : "Ligado",
     "inactive" : "Inativo",
     "addPaymentProvider" : "Adicionar fornecedor de pagamentos",
-    "deletePaymentMethod" : "Eliminar método de pagamento"
+    "deletePaymentMethod" : "Eliminar método de pagamento",
+    "currencyLabel" : "Moeda"
   }
 }

package/src/experiences/components/UploadYourLogoApplication/UploadYourLogoApplication.vue

@@ -3,6 +3,7 @@
     <UploadYourLogoOnBoarding
       v-if="active"
       :logo-file="logoData.logoFile"
+      :logo-data="logoData.data"
       :use-dropzone="useDropzone"
       :is-post-purchase-user-upload="isPostPurchaseUserUpload"
       @on-exit="onExit"
@@ -41,6 +42,7 @@ export default {
     return {
       logoData: {
         logoFile: null,
+        data: null,
       },
       active: this.useDropzone,
     };
@@ -67,20 +69,21 @@ export default {
     */
     if (window) {
       window.addEventListener(Events.BeginUploadLogoExperience, (e) => {
-        this.onBeginUploadLogoExperience(e.detail.file);
+        this.onBeginUploadLogoExperience(e.detail.file, e.detail.data);
       });
     }
   },
   beforeDestroy() {
     window.removeEventListener(Events.BeginUploadLogoExperience, (e) => {
-      this.onBeginUploadLogoExperience(e.detail.file);
+      this.onBeginUploadLogoExperience(e.detail.file, e.detail.data);
     });
   },
   methods: {
-    onBeginUploadLogoExperience(file) {
+    onBeginUploadLogoExperience(file, data) {
       this.active = true;
       this.logoData.logoFile = {
         file,
+        data,
       };
     },
     onExit({ currentStepTrackingLabel }) {
@@ -90,13 +93,16 @@ export default {
     reset() {
       this.active = false;
       this.logoData.logoFile = null;
+      this.logoData.data = null;
     },
     onUploadError() {
       this.logoData.logoFile = null;
+      this.logoData.data = null;
     },
     onFileChange(file) {
       this.logoData.logoFile = {
         file,
+        data: this.logoData.data || null,
       };
     },
     onFinish(e) {

package/src/experiences/components/UploadYourLogoOnBoarding/LogoBusinessBrandColours.vue

@@ -121,9 +121,9 @@
 </template>
 <script>
 /* eslint-disable no-param-reassign */
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import Icon from '../../../../src/atoms/components/Icon/Icon.vue';
-import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import Icon from '../../../atoms/components/Icon/Icon.vue';
+import HelloBar from '../../../atoms/components/HelloBar/HelloBar.vue';
 import trackEvent from '../../helpers/tracking';
 import hexDiff from '../../helpers/hex-diff';
 import { uploadYourLogoTr } from '../../../useSharedLibTranslate';

package/src/experiences/components/UploadYourLogoOnBoarding/LogoCropper.vue

@@ -47,8 +47,8 @@
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
 import VueCropper from 'vue-cropperjs';
+import Button from '../../../atoms/components/Button/Button.vue';
 
 import trackEvent from '../../helpers/tracking';
 import { uploadYourLogoTr } from '../../../useSharedLibTranslate';

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploadModal.vue

@@ -16,7 +16,7 @@
   </div>
 </template>
 <script>
-import Icon from '../../../../src/atoms/components/Icon/Icon.vue';
+import Icon from '../../../atoms/components/Icon/Icon.vue';
 
 export default {
   components: {

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploader.vue

@@ -19,6 +19,11 @@ export default {
       required: true,
       default: undefined,
     },
+    logoData: {
+      type: Object,
+      required: true,
+      default: undefined,
+    },
     eventCategory: {
       type: String,
       required: true,
@@ -50,7 +55,7 @@ export default {
         duration = Date.now() - start;
       }, 1);
 
-      const result = await brandCrowdClient.uploadLogoAndGetDetails(this.logoFile);
+      const result = await brandCrowdClient.uploadLogoAndGetDetails(this.logoFile, this.logoData);
 
       clearInterval(intervalTimer);
       this.isRunning = false;

package/src/experiences/components/UploadYourLogoOnBoarding/UploadYourLogoOnBoarding.vue

@@ -20,6 +20,7 @@
         <LogoUploader
           v-if="logoFile && !isAttemptingToExit && !hasError && currentStep === 1"
           :logo-file="logoFile"
+          :logo-data="logoData"
           :event-category="eventCategory"
           @on-upload-success="onUploadSuccess"
           @on-upload-error="onUploadError"
@@ -117,6 +118,11 @@ export default {
       required: false,
       default: undefined,
     },
+    logoData: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
     useDropzone: {
       type: Boolean,
       required: false,

package/src/experiences/components/UploadedLogoSearchResultCard/UploadedLogoSearchResultCard.vue

@@ -98,7 +98,7 @@
 </template>
 <script>
 import axios from 'axios';
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
 import Events from '../../constants/event-constants';
 import API from '../../constants/api';
 import trackEvent from '../../helpers/tracking';