@designcrowd/fe-shared-lib 1.3.8 → 1.3.9-currency-5

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

@@ -0,0 +1,105 @@
+{
+  "price": {
+    "domainCreditUsed": "Crédito de domínio utilizado",
+    "free": "Grátis"
+  },
+  "sharedPaymentConfig": {
+    "onboardingIncomplete": "Integração incompleta",
+    "pendingVerification": "Verificação Pendente",
+    "connected": "Conectado",
+    "inactive": "Inativo",
+    "addPaymentProvider": "Adicionar fornecedor de pagamentos",
+    "deletePaymentMethod": "Excluir método de pagamento",
+    "currencyLabel": "Moeda"
+  },
+  "publishBrandPageModal": {
+    "firstTimePublishHeaderLabel": "Defina o URL para {{brandPageDisplayName}}",
+    "sitePublishedLabel": "Site publicado!",
+    "publishSuccessLabel": "Seu {{brandPageDisplayName}} está ativo! Comece a usar seu link:",
+    "freePublishCardTitleLabel": "Endereço gratuito",
+    "freePublishCardDescriptionLabel": "Escolha um endereço gratuito para publicar agora. Você pode editar o URL depois",
+    "slugInputPlaceholderYourNameLabel": "Seu nome",
+    "slugInputPlaceholderYourBusinessNameLabel": "nome-da-sua-empresa",
+    "freeDomainLabel": "Domínio gratuito",
+    "purchasedDomainLabel": "Domínio comprado",
+    "setUrlLabel": "Definir URL",
+    "publishLabel": "Publicar",
+    "viewMoreDomainLabel": "Ver mais domínios",
+    "viewMyWebsiteLabel": "Ver {{brandPageDisplayName}}",
+    "copyLabel": "Copiar",
+    "copySuccessLabel": "Copiado!",
+    "publishedSuccessDescriptionLabel": "Compre um nome de domínio que corresponda à sua marca",
+    "hasAlreadyPurchasedDomainCloseButtonLabel": "Não, obrigado. Talvez depois",
+    "selectDomainDropdownPlaceholder": "Selecionar nome de domínio",
+    "websiteFriendlyName": "Site",
+    "digitalBusinessCardFriendlyName": "Cartão de visita digital"
+  },
+  "sellDomainNameList": {
+    "freeDomainButtonLabel": "Domínio gratuito",
+    "buyNowButtonLabel": "Comprar Agora",
+    "pricePerYearLabel": "/yr",
+    "costPriceLabel": "Preço de custo:"
+  },
+  "sellDomainNameListModal": {
+    "domainSearchHeaderTitle": "Pesquise um nome de domínio",
+    "domainSearchHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca"
+  },
+  "sellDomainNameModalApplication": {
+    "domainSearchHeaderTitle": "Pesquisar um nome de domínio",
+    "domainSearchHeaderSubtitle": "Compre um nome de domínio correspondente à sua marca"
+  },
+  "sellDomainNameSearch": {
+    "searchButtonLabel": "Pesquisar",
+    "searchBarLabel": "Pesquisar",
+    "searchBarPlaceholder": "Pesquisar nomes de domínio",
+    "searchBarPreText": "Nome de domínio"
+  },
+  "sellDomainNameListSearchResult": {
+    "domainSearchEmptyMessage": "Não encontramos nenhum domínio com \"{{domainNameSearchTerm}}\".",
+    "searchAnotherDomainMessage": "Tente pesquisar outro nome de domínio."
+  },
+  "sellDomainNameWidget": {
+    "searchButtonLabel": "Pesquisar",
+    "searchBarLabel": "Pesquisar",
+    "searchBarPlaceholder": "Pesquisar nomes de domínio",
+    "domainSearchOrConnectHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca ou associe ao domínio que já tem"
+  },
+  "uploadYourLogo": {
+    "uploadYourLogoText": "Carregue o seu logotipo",
+    "disclaimerText": "Certifique-se de que você tem o direito de usar qualquer imagem que você enviar.",
+    "generatingDesigns": "A gerar designs…",
+    "uploadingAndConverting": "Carregando e convertendo o seu logotipo...",
+    "stepOf": "Etapa {{CURRENT}} de {{TOTAL}}",
+    "uploadError": "Erro no carregamento",
+    "cancel": "Cancelar",
+    "continue": "Continuar",
+    "back": "Voltar",
+    "no": "Não",
+    "yes": "Sim",
+    "businessName": "Nome da empresa",
+    "businessNameDescription": "Insira o texto do seu logotipo ou nome da empresa",
+    "cropYourLogo": "Recorte o seu logotipo",
+    "cropDescription": "Recorte o design do seu logotipo para caber na tela do nosso criador de logotipos",
+    "logoPreview": "Prévia do logotipo",
+    "logoPreviewDescription": "Seu logotipo está ótimo! Ajude-nos a configurar seu logotipo concluindo as próximas etapas.",
+    "primaryTextColor": "Cor principal do texto",
+    "primaryTextColorDescription": "Para criar o logotipo, confirme a cor principal do texto. Escolha uma das cores disponíveis ou clique no ícone de mais para adicionar outra.",
+    "backgroundColor": "Cor de fundo",
+    "backgroundColorDescription": "Ajude-nos a configurar seu logotipo confirmando a cor de fundo. Escolha entre as cores disponíveis ou clique no ícone de adição para adicionar outra.",
+    "colorsWarning": "As cores do texto e do fundo são muito parecidas. Escolha uma combinação mais distinta para garantir que eles criem designs de qualidade.",
+    "exitConfirmationTitle": "Tem certeza de que deseja sair?",
+    "exitConfirmationDescription": "O progresso do carregamento do seu logotipo nesta sessão será perdido",
+    "maxByoFileErrorMessage": "Seu arquivo excede o tamanho máximo de 25 MB. Escolha um arquivo menor.",
+    "genericByoErrorMessage": "Ocorreu um erro inesperado. Tente novamente.",
+    "dropYourFileHere": "Arraste o seu ficheiro aqui ou",
+    "clickToUpload": "clique para carregar",
+    "acceptedFiles": "Aceitamos arquivos PNG, JPG, SVG ou EPS de até 25 MB",
+    "wrongUploadType": "Você não pode baixar arquivos deste tipo."
+  },
+  "uploadLogoSearchResultCard": {
+    "replace": "Substituir",
+    "replaceLogo": "Substituir logotipo",
+    "delete": "Excluir",
+    "deleteLogo": "Excluir logotipo"
+  }
+}

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

@@ -0,0 +1,105 @@
+{
+  "price": {
+    "domainCreditUsed": "Crédito de domínio utilizado",
+    "free": "Grátis"
+  },
+  "sharedPaymentConfig": {
+    "onboardingIncomplete": "Integração incompleta",
+    "pendingVerification": "Verificação Pendente",
+    "connected": "Ligado",
+    "inactive": "Inativo",
+    "addPaymentProvider": "Adicionar fornecedor de pagamentos",
+    "deletePaymentMethod": "Eliminar método de pagamento",
+    "currencyLabel": "Moeda"
+  },
+  "publishBrandPageModal": {
+    "firstTimePublishHeaderLabel": "Defina o URL para {{brandPageDisplayName}}",
+    "sitePublishedLabel": "Site publicado!",
+    "publishSuccessLabel": "A sua página {{brandPageDisplayName}} está ativa! Comece a utilizar o link:",
+    "freePublishCardTitleLabel": "Endereço gratuito",
+    "freePublishCardDescriptionLabel": "Escolha um endereço gratuito para publicar agora. Pode sempre editar o URL mais tarde",
+    "slugInputPlaceholderYourNameLabel": "o-seu-nome",
+    "slugInputPlaceholderYourBusinessNameLabel": "nome-da-sua-empresa",
+    "freeDomainLabel": "Domínio gratuito",
+    "purchasedDomainLabel": "Domínio comprado",
+    "setUrlLabel": "Definir URL",
+    "publishLabel": "Publicar",
+    "viewMoreDomainLabel": "VER MAIS DOMÍNIOS",
+    "viewMyWebsiteLabel": "Ver {{brandPageDisplayName}}",
+    "copyLabel": "Copiar",
+    "copySuccessLabel": "Copiado!",
+    "publishedSuccessDescriptionLabel": "Compre um nome de domínio que corresponda à sua marca",
+    "hasAlreadyPurchasedDomainCloseButtonLabel": "Não, obrigado, talvez mais tarde",
+    "selectDomainDropdownPlaceholder": "Selecionar nome de domínio",
+    "websiteFriendlyName": "Website",
+    "digitalBusinessCardFriendlyName": "Cartão de visita digital"
+  },
+  "sellDomainNameList": {
+    "freeDomainButtonLabel": "Domínio gratuito",
+    "buyNowButtonLabel": "Comprar Agora",
+    "pricePerYearLabel": "/yr",
+    "costPriceLabel": "Preço de Custo:"
+  },
+  "sellDomainNameListModal": {
+    "domainSearchHeaderTitle": "Pesquisar um nome de domínio",
+    "domainSearchHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca"
+  },
+  "sellDomainNameModalApplication": {
+    "domainSearchHeaderTitle": "Pesquisar um nome de domínio",
+    "domainSearchHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca"
+  },
+  "sellDomainNameSearch": {
+    "searchButtonLabel": "Pesquisar",
+    "searchBarLabel": "Pesquisar",
+    "searchBarPlaceholder": "Pesquisar nomes de domínio",
+    "searchBarPreText": "Nome de domínio"
+  },
+  "sellDomainNameListSearchResult": {
+    "domainSearchEmptyMessage": "Não conseguimos encontrar nenhum domínio para \"{{domainNameSearchTerm}}\".",
+    "searchAnotherDomainMessage": "Experimente pesquisar outro nome de domínio."
+  },
+  "sellDomainNameWidget": {
+    "searchButtonLabel": "Pesquisar",
+    "searchBarLabel": "Pesquisar",
+    "searchBarPlaceholder": "Pesquisar nomes de domínio",
+    "domainSearchOrConnectHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca ou associe ao domínio que já tem"
+  },
+  "uploadYourLogo": {
+    "uploadYourLogoText": "Carregue o seu logótipo",
+    "disclaimerText": "Certifique-se de que tem os direitos de utilização de todas as imagens que carregar.",
+    "generatingDesigns": "A gerar designs…",
+    "uploadingAndConverting": "A carregar e a converter o seu logótipo…",
+    "stepOf": "Passo {{CURRENT}} de {{TOTAL}}",
+    "uploadError": "Erro ao carregar",
+    "cancel": "Cancelar",
+    "continue": "Continuar",
+    "back": "Voltar",
+    "no": "Não",
+    "yes": "Sim",
+    "businessName": "Nome da empresa",
+    "businessNameDescription": "Introduza o texto do seu logótipo ou o nome da sua empresa",
+    "cropYourLogo": "Recorte o seu logótipo",
+    "cropDescription": "Recorte o design de logótipo para caber no ecrã do criador de logótipos",
+    "logoPreview": "Pré-visualização do logótipo",
+    "logoPreviewDescription": "O seu logótipo está com um ótimo aspeto! Ajude-nos a configurar o seu logótipo concluindo os próximos passos.",
+    "primaryTextColor": "Cor principal do texto",
+    "primaryTextColorDescription": "Ajude-nos a configurar o seu logótipo confirmando a cor principal do texto. Escolha entre as cores disponíveis ou clique no ícone de mais para adicionar outra.",
+    "backgroundColor": "Cor de fundo",
+    "backgroundColorDescription": "Ajude-nos a configurar o seu logótipo confirmando a cor do fundo. Escolha entre as cores disponíveis ou clique no ícone de mais para adicionar outra.",
+    "colorsWarning": "As suas cores de texto e de fundo são demasiado semelhantes. Escolha uma combinação mais distinta para garantir que criamos designs de qualidade.",
+    "exitConfirmationTitle": "Tem a certeza de que pretende sair?",
+    "exitConfirmationDescription": "O progresso do carregamento do seu logótipo nesta sessão será perdido",
+    "maxByoFileErrorMessage": "O seu ficheiro excede o tamanho máximo de 25 MB. Escolha um ficheiro mais pequeno.",
+    "genericByoErrorMessage": "Ocorreu um erro inesperado. Tente novamente.",
+    "dropYourFileHere": "Arraste o seu ficheiro aqui ou",
+    "clickToUpload": "clique para carregar",
+    "acceptedFiles": "Aceitamos ficheiros PNG, JPG, SVG ou EPS até 25 MB",
+    "wrongUploadType": "Não pode carregar ficheiros deste tipo."
+  },
+  "uploadLogoSearchResultCard": {
+    "replace": "Substituir",
+    "replaceLogo": "Substituir logótipo",
+    "delete": "Eliminar",
+    "deleteLogo": "Eliminar Logótipo"
+  }
+}

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"
   }
 }