@designcrowd/fe-shared-lib 1.3.9-currency-5 → 1.3.9-test-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.3.9-currency-5",
+  "version": "1.3.9-test-1",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",
@@ -25,7 +25,7 @@
     "axios": "1.6.7",
     "click-outside-vue3": "4.0.1",
     "core-js": "3.35.1",
-    "cropperjs": "1.6.1",
+    "cropperjs": "2.0.1",
     "dropzone-vue3": "1.0.2",
     "fs-extra": "11.2.0",
     "i18next": "25.2.1",
@@ -38,7 +38,6 @@
     "vite-plugin-vue-devtools": "7.7.0",
     "vue": "3.5.15",
     "vue-color": "3.0.2",
-    "vue-cropperjs": "5.0.0",
     "vue-observe-visibility": "1.0.0",
     "vue-router": "4.5.0",
     "yargs": "17.7.2"

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.stop="onClick"
+      @click="onClick"
       :class="{
         'dropdown-item-hover': backgroundHover,
       }"

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

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

package/src/atoms/components/vuecropper.js

@@ -0,0 +1,370 @@
+import { h } from 'vue';
+import Cropper from 'cropperjs';
+
+const previewPropType = typeof window === 'undefined' ? [String, Array] : [String, Array, Element, NodeList];
+
+export default {
+  render() {
+    const crossorigin = this.crossorigin || undefined;
+
+    return h('div', { style: this.containerStyle }, [
+      h('img', {
+        ref: 'img',
+        src: this.src,
+        alt: this.alt || 'image',
+        style: [{ 'max-width': '100%' }, this.imgStyle],
+        crossorigin,
+      }),
+    ]);
+  },
+  props: {
+    // Library props
+    containerStyle: Object,
+    src: {
+      type: String,
+      default: '',
+    },
+    alt: String,
+    imgStyle: Object,
+
+    // CropperJS props
+    viewMode: Number,
+    dragMode: String,
+    initialAspectRatio: Number,
+    aspectRatio: Number,
+    data: Object,
+    preview: previewPropType,
+    responsive: {
+      type: Boolean,
+      default: true,
+    },
+    restore: {
+      type: Boolean,
+      default: true,
+    },
+    checkCrossOrigin: {
+      type: Boolean,
+      default: true,
+    },
+    checkOrientation: {
+      type: Boolean,
+      default: true,
+    },
+    crossorigin: {
+      type: String,
+    },
+    modal: {
+      type: Boolean,
+      default: true,
+    },
+    guides: {
+      type: Boolean,
+      default: true,
+    },
+    center: {
+      type: Boolean,
+      default: true,
+    },
+    highlight: {
+      type: Boolean,
+      default: true,
+    },
+    background: {
+      type: Boolean,
+      default: true,
+    },
+    autoCrop: {
+      type: Boolean,
+      default: true,
+    },
+    autoCropArea: Number,
+    movable: {
+      type: Boolean,
+      default: true,
+    },
+    rotatable: {
+      type: Boolean,
+      default: true,
+    },
+    scalable: {
+      type: Boolean,
+      default: true,
+    },
+    zoomable: {
+      type: Boolean,
+      default: true,
+    },
+    zoomOnTouch: {
+      type: Boolean,
+      default: true,
+    },
+    zoomOnWheel: {
+      type: Boolean,
+      default: true,
+    },
+    wheelZoomRatio: Number,
+    cropBoxMovable: {
+      type: Boolean,
+      default: true,
+    },
+    cropBoxResizable: {
+      type: Boolean,
+      default: true,
+    },
+    toggleDragModeOnDblclick: {
+      type: Boolean,
+      default: true,
+    },
+
+    // Size limitation
+    minCanvasWidth: Number,
+    minCanvasHeight: Number,
+    minCropBoxWidth: Number,
+    minCropBoxHeight: Number,
+    minContainerWidth: Number,
+    minContainerHeight: Number,
+
+    // callbacks
+    ready: Function,
+    cropstart: Function,
+    cropmove: Function,
+    cropend: Function,
+    crop: Function,
+    zoom: Function,
+  },
+  mounted() {
+    const { containerStyle, src, alt, imgStyle, ...data } = this.$options.props;
+    const props = {};
+
+    // eslint-disable-next-line no-restricted-syntax
+    for (const key in data) {
+      if (this[key] !== undefined) {
+        props[key] = this[key];
+      }
+    }
+
+    this.cropper = new Cropper(this.$refs.img, props);
+  },
+  methods: {
+    // Reset the image and crop box to their initial states
+    reset() {
+      return this.cropper.reset();
+    },
+
+    // Clear the crop box
+    clear() {
+      return this.cropper.clear();
+    },
+
+    // Init crop box manually
+    initCrop() {
+      return this.cropper.crop();
+    },
+
+    /**
+     * Replace the image's src and rebuild the cropper
+     * @param {string} url - The new URL.
+     * @param {boolean} [onlyColorChanged] - Indicate if the new image only changed color.
+     * @returns {Object} this
+     */
+    replace(url, onlyColorChanged = false) {
+      return this.cropper.replace(url, onlyColorChanged);
+    },
+
+    // Enable (unfreeze) the cropper
+    enable() {
+      return this.cropper.enable();
+    },
+
+    // Disable (freeze) the cropper
+    disable() {
+      return this.cropper.disable();
+    },
+
+    // Destroy the cropper and remove the instance from the image
+    destroy() {
+      return this.cropper.destroy();
+    },
+
+    /**
+     * Move the canvas with relative offsets
+     * @param {number} offsetX - The relative offset distance on the x-axis.
+     * @param {number} offsetY - The relative offset distance on the y-axis.
+     * @returns {Object} this
+     */
+    move(offsetX, offsetY) {
+      return this.cropper.move(offsetX, offsetY);
+    },
+
+    /**
+     * Move the canvas to an absolute point
+     * @param {number} x - The x-axis coordinate.
+     * @param {number} [y=x] - The y-axis coordinate.
+     * @returns {Object} this
+     */
+    moveTo(x, y = x) {
+      return this.cropper.moveTo(x, y);
+    },
+
+    /**
+     * Zoom the canvas with a relative ratio
+     * @param {number} ratio - The target ratio.
+     * @param {Event} _originalEvent - The original event if any.
+     * @returns {Object} this
+     */
+    relativeZoom(ratio, _originalEvent) {
+      return this.cropper.zoom(ratio, _originalEvent);
+    },
+
+    /**
+     * Zoom the canvas to an absolute ratio
+     * @param {number} ratio - The target ratio.
+     * @param {Event} _originalEvent - The original event if any.
+     * @returns {Object} this
+     */
+    zoomTo(ratio, _originalEvent) {
+      return this.cropper.zoomTo(ratio, _originalEvent);
+    },
+
+    /**
+     * Rotate the canvas with a relative degree
+     * @param {number} degree - The rotate degree.
+     * @returns {Object} this
+     */
+    rotate(degree) {
+      return this.cropper.rotate(degree);
+    },
+
+    /**
+     * Rotate the canvas to an absolute degree
+     * @param {number} degree - The rotate degree.
+     * @returns {Object} this
+     */
+    rotateTo(degree) {
+      return this.cropper.rotateTo(degree);
+    },
+
+    /**
+     * Scale the image on the x-axis.
+     * @param {number} scaleX - The scale ratio on the x-axis.
+     * @returns {Object} this
+     */
+    scaleX(scaleX) {
+      return this.cropper.scaleX(scaleX);
+    },
+
+    /**
+     * Scale the image on the y-axis.
+     * @param {number} scaleY - The scale ratio on the y-axis.
+     * @returns {Object} this
+     */
+    scaleY(scaleY) {
+      return this.cropper.scaleY(scaleY);
+    },
+
+    /**
+     * Scale the image
+     * @param {number} scaleX - The scale ratio on the x-axis.
+     * @param {number} [scaleY=scaleX] - The scale ratio on the y-axis.
+     * @returns {Object} this
+     */
+    scale(scaleX, scaleY = scaleX) {
+      return this.cropper.scale(scaleX, scaleY);
+    },
+
+    /**
+     * Get the cropped area position and size data (base on the original image)
+     * @param {boolean} [rounded=false] - Indicate if round the data values or not.
+     * @returns {Object} The result cropped data.
+     */
+    getData(rounded = false) {
+      return this.cropper.getData(rounded);
+    },
+
+    /**
+     * Set the cropped area position and size with new data
+     * @param {Object} data - The new data.
+     * @returns {Object} this
+     */
+    setData(data) {
+      return this.cropper.setData(data);
+    },
+
+    /**
+     * Get the container size data.
+     * @returns {Object} The result container data.
+     */
+    getContainerData() {
+      return this.cropper.getContainerData();
+    },
+
+    /**
+     * Get the image position and size data.
+     * @returns {Object} The result image data.
+     */
+    getImageData() {
+      return this.cropper.getImageData();
+    },
+
+    /**
+     * Get the canvas position and size data.
+     * @returns {Object} The result canvas data.
+     */
+    getCanvasData() {
+      return this.cropper.getCanvasData();
+    },
+
+    /**
+     * Set the canvas position and size with new data.
+     * @param {Object} data - The new canvas data.
+     * @returns {Object} this
+     */
+    setCanvasData(data) {
+      return this.cropper.setCanvasData(data);
+    },
+
+    /**
+     * Get the crop box position and size data.
+     * @returns {Object} The result crop box data.
+     */
+    getCropBoxData() {
+      return this.cropper.getCropBoxData();
+    },
+
+    /**
+     * Set the crop box position and size with new data.
+     * @param {Object} data - The new crop box data.
+     * @returns {Object} this
+     */
+    setCropBoxData(data) {
+      return this.cropper.setCropBoxData(data);
+    },
+
+    /**
+     * Get a canvas drawn the cropped image.
+     * @param {Object} [options={}] - The config options.
+     * @returns {HTMLCanvasElement} - The result canvas.
+     */
+    getCroppedCanvas(options = {}) {
+      return this.cropper.getCroppedCanvas(options);
+    },
+
+    /**
+     * Change the aspect ratio of the crop box.
+     * @param {number} aspectRatio - The new aspect ratio.
+     * @returns {Object} this
+     */
+    setAspectRatio(aspectRatio) {
+      return this.cropper.setAspectRatio(aspectRatio);
+    },
+
+    /**
+     * Change the drag mode.
+     * @param {string} mode - The new drag mode.
+     * @returns {Object} this
+     */
+    setDragMode(mode) {
+      return this.cropper.setDragMode(mode);
+    },
+  },
+};

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

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

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

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

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

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

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

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

package/src/bundles/bundled-translations.json

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

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

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

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

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

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

@@ -24,20 +24,6 @@ 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`, {
@@ -58,5 +44,4 @@ export default {
   setBrandPageApiClientAxios,
   getPaymentConfigsByBrandPageToken,
   deletePaymentConfigByBrandPageTokenAndConfigId,
-  getPaymentConfigCurrencyListByBrandPageTokenAsync,
 };

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

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

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

@@ -32,15 +32,9 @@ 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) {
@@ -100,19 +94,5 @@ 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 '../../../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';
-
+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';
 export default {
   components: {
     Modal,
     Button,
     Loader,
   },
+  emits: ['close-modal', 'on-delete'],
   props: {
     paymentConfig: {
       type: Object,
@@ -60,10 +60,8 @@ 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,84 +10,54 @@
       variant="outline"
       @on-click="onAddPaymentProviderButtonClick"
     ></Button>
-    <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)"
+    <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>{{ paymentConfig.name }}</span>
-            <small class="stripe-acct">({{ paymentConfig.paymentProviderExternalId }})</small>
+            <span>{{ selectedPaymentConfig.name }}</span>
+            <small class="stripe-acct">({{ selectedPaymentConfig.paymentProviderExternalId }})</small>
           </span>
-          <Pill class="tw-text-white" :class="getPaymentConfigStatusDisplayClasses(paymentConfig.status)">
-            {{ getPaymentConfigStatusDisplayText(paymentConfig.status) }}
+          <Pill class="tw-text-white" :class="getPaymentConfigStatusDisplayClasses(selectedPaymentConfig.status)">
+            {{ getPaymentConfigStatusDisplayText(selectedPaymentConfig.status) }}
           </Pill>
-        </DropdownItem>
+        </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>
-      <!-- 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-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-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>
+      <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>
   </div>
 </template>
 <script>
-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 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';
 import { sharedPaymentConfigTr } from '../../../useSharedLibTranslate';
@@ -99,7 +69,6 @@ export default {
     DropdownItem,
     Loader,
     Pill,
-    Icon,
   },
   mixins: [PaymentConfigMixin],
   props: {
@@ -120,8 +89,6 @@ export default {
     },
   },
   async mounted() {
-    this.getCurrentListAsync();
-
     if (this.brandPageToken) {
       await this.updatePaymentConfigs();
       if (!this.selectedPaymentConfig && this.paymentConfigs.length === 0) {
@@ -158,11 +125,6 @@ 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,53 +57,11 @@ 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: {
@@ -127,7 +85,6 @@ 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: {
@@ -155,7 +112,6 @@ 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: {
@@ -183,7 +139,6 @@ 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 '../../../atoms/components/Loader/Loader.vue';
-import Button from '../../../atoms/components/Button/Button.vue';
+import Loader from '../../../../src/atoms/components/Loader/Loader.vue';
+import Button from '../../../../src/atoms/components/Button/Button.vue';
 import PaymentConfigDeleteConfigModal from './PaymentConfigDeleteConfigModal.vue';
-import Icon from '../../../atoms/components/Icon/Icon.vue';
+import Icon from '../../../../src/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,7 +5,6 @@
     "connected" : "Verbunden",
     "inactive" : "Inaktiv",
     "addPaymentProvider" : "Zahlungsanbieter hinzufügen",
-    "deletePaymentMethod" : "Zahlungsmethode löschen",
-    "currencyLabel" : "Währung"
+    "deletePaymentMethod" : "Zahlungsmethode löschen"
   }
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -121,9 +121,9 @@
 </template>
 <script>
 /* eslint-disable no-param-reassign */
-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 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 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 VueCropper from 'vue-cropperjs';
-import Button from '../../../atoms/components/Button/Button.vue';
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+import VueCropper from '../../../atoms/components/vuecropper';
 
 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 '../../../atoms/components/Icon/Icon.vue';
+import Icon from '../../../../src/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 '../../../atoms/components/Button/Button.vue';
+import Button from '../../../../src/atoms/components/Button/Button.vue';
 import Events from '../../constants/event-constants';
 import API from '../../constants/api';
 import trackEvent from '../../helpers/tracking';