@designcrowd/fe-shared-lib 1.4.0 → 1.4.1-currency-6

package/dist/css/tailwind-brandCrowd.css

@@ -717,6 +717,9 @@ video {
 .tw-ml-4 {
   margin-left: 1rem;
 }
+.tw-ml-6 {
+  margin-left: 1.5rem;
+}
 .tw-ml-auto {
   margin-left: auto;
 }
@@ -1603,9 +1606,6 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
-.tw-p-5 {
-  padding: 1.25rem;
-}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,9 +1741,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

@@ -717,6 +717,9 @@ video {
 .tw-ml-4 {
   margin-left: 1rem;
 }
+.tw-ml-6 {
+  margin-left: 1.5rem;
+}
 .tw-ml-auto {
   margin-left: auto;
 }
@@ -1451,9 +1454,6 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
-.tw-p-5 {
-  padding: 1.25rem;
-}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1589,9 +1589,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

@@ -717,6 +717,9 @@ video {
 .tw-ml-4 {
   margin-left: 1rem;
 }
+.tw-ml-6 {
+  margin-left: 1.5rem;
+}
 .tw-ml-auto {
   margin-left: auto;
 }
@@ -1603,9 +1606,6 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
-.tw-p-5 {
-  padding: 1.25rem;
-}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,9 +1741,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

@@ -717,6 +717,9 @@ video {
 .tw-ml-4 {
   margin-left: 1rem;
 }
+.tw-ml-6 {
+  margin-left: 1.5rem;
+}
 .tw-ml-auto {
   margin-left: auto;
 }
@@ -1603,9 +1606,6 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
-.tw-p-5 {
-  padding: 1.25rem;
-}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,9 +1741,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

@@ -717,6 +717,9 @@ video {
 .tw-ml-4 {
   margin-left: 1rem;
 }
+.tw-ml-6 {
+  margin-left: 1.5rem;
+}
 .tw-ml-auto {
   margin-left: auto;
 }
@@ -1603,9 +1606,6 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
-.tw-p-5 {
-  padding: 1.25rem;
-}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,9 +1741,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.0",
+  "version": "1.4.1-currency-6",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -717,6 +717,9 @@ video {
 .theme-brandCrowd .tw-ml-4 {
   margin-left: 1rem;
 }
+.theme-brandCrowd .tw-ml-6 {
+  margin-left: 1.5rem;
+}
 .theme-brandCrowd .tw-ml-auto {
   margin-left: auto;
 }
@@ -1603,9 +1606,6 @@ video {
 .theme-brandCrowd .tw-p-4 {
   padding: 1rem;
 }
-.theme-brandCrowd .tw-p-5 {
-  padding: 1.25rem;
-}
 .theme-brandCrowd .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,9 +1741,6 @@ video {
 .theme-brandCrowd .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.theme-brandCrowd .tw-pt-4 {
-  padding-top: 1rem;
-}
 .theme-brandCrowd .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/public/css/tailwind-brandPage.css

@@ -717,6 +717,9 @@ video {
 .theme-brandPage .tw-ml-4 {
   margin-left: 1rem;
 }
+.theme-brandPage .tw-ml-6 {
+  margin-left: 1.5rem;
+}
 .theme-brandPage .tw-ml-auto {
   margin-left: auto;
 }
@@ -1451,9 +1454,6 @@ video {
 .theme-brandPage .tw-p-4 {
   padding: 1rem;
 }
-.theme-brandPage .tw-p-5 {
-  padding: 1.25rem;
-}
 .theme-brandPage .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1589,9 +1589,6 @@ video {
 .theme-brandPage .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.theme-brandPage .tw-pt-4 {
-  padding-top: 1rem;
-}
 .theme-brandPage .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/public/css/tailwind-crazyDomains.css

@@ -717,6 +717,9 @@ video {
 .theme-crazyDomains .tw-ml-4 {
   margin-left: 1rem;
 }
+.theme-crazyDomains .tw-ml-6 {
+  margin-left: 1.5rem;
+}
 .theme-crazyDomains .tw-ml-auto {
   margin-left: auto;
 }
@@ -1603,9 +1606,6 @@ video {
 .theme-crazyDomains .tw-p-4 {
   padding: 1rem;
 }
-.theme-crazyDomains .tw-p-5 {
-  padding: 1.25rem;
-}
 .theme-crazyDomains .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,9 +1741,6 @@ video {
 .theme-crazyDomains .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.theme-crazyDomains .tw-pt-4 {
-  padding-top: 1rem;
-}
 .theme-crazyDomains .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/public/css/tailwind-designCom.css

@@ -717,6 +717,9 @@ video {
 .theme-designCom .tw-ml-4 {
   margin-left: 1rem;
 }
+.theme-designCom .tw-ml-6 {
+  margin-left: 1.5rem;
+}
 .theme-designCom .tw-ml-auto {
   margin-left: auto;
 }
@@ -1603,9 +1606,6 @@ video {
 .theme-designCom .tw-p-4 {
   padding: 1rem;
 }
-.theme-designCom .tw-p-5 {
-  padding: 1.25rem;
-}
 .theme-designCom .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,9 +1741,6 @@ video {
 .theme-designCom .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.theme-designCom .tw-pt-4 {
-  padding-top: 1rem;
-}
 .theme-designCom .tw-pt-6 {
   padding-top: 1.5rem;
 }

package/public/css/tailwind-designCrowd.css

@@ -717,6 +717,9 @@ video {
 .theme-designCrowd .tw-ml-4 {
   margin-left: 1rem;
 }
+.theme-designCrowd .tw-ml-6 {
+  margin-left: 1.5rem;
+}
 .theme-designCrowd .tw-ml-auto {
   margin-left: auto;
 }
@@ -1603,9 +1606,6 @@ video {
 .theme-designCrowd .tw-p-4 {
   padding: 1rem;
 }
-.theme-designCrowd .tw-p-5 {
-  padding: 1.25rem;
-}
 .theme-designCrowd .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,9 +1741,6 @@ video {
 .theme-designCrowd .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.theme-designCrowd .tw-pt-4 {
-  padding-top: 1rem;
-}
 .theme-designCrowd .tw-pt-6 {
   padding-top: 1.5rem;
 }

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-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/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/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';