@designcrowd/fe-shared-lib 1.3.5 → 1.3.6-currency-1

package/dist/css/tailwind-designCom.css

@@ -643,10 +643,6 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
-.tw-my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
 .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -655,10 +651,6 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
-.tw-my-5 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
 .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -687,9 +679,6 @@ video {
 .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
-.tw-mb-10 {
-  margin-bottom: 2.5rem;
-}
 .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -717,12 +706,12 @@ video {
 .tw-ml-4 {
   margin-left: 1rem;
 }
+.tw-ml-6 {
+  margin-left: 1.5rem;
+}
 .tw-ml-auto {
   margin-left: auto;
 }
-.tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -831,10 +820,6 @@ video {
 .tw-h-auto {
   height: auto;
 }
-.tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .tw-h-full {
   height: 100%;
 }
@@ -1018,9 +1003,6 @@ video {
 .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
-.\!tw-cursor-not-allowed {
-  cursor: not-allowed !important;
-}
 .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1202,9 +1184,6 @@ video {
 .tw-border-b-0 {
   border-bottom-width: 0px;
 }
-.tw-border-b-2 {
-  border-bottom-width: 2px;
-}
 .tw-border-b-4 {
   border-bottom-width: 4px;
 }
@@ -1454,17 +1433,6 @@ video {
 .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -1603,9 +1571,6 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
-.tw-p-5 {
-  padding: 1.25rem;
-}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,9 +1706,6 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.tw-pt-4 {
-  padding-top: 1rem;
-}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1753,9 +1715,6 @@ video {
 .tw-text-center {
   text-align: center;
 }
-.tw-align-top {
-  vertical-align: top;
-}
 .tw-align-middle {
   vertical-align: middle;
 }
@@ -2048,10 +2007,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(50 71 197 / var(--tw-bg-opacity));
 }
-.hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 238 254 / var(--tw-bg-opacity));
-}
 .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(121 139 249 / var(--tw-bg-opacity));
@@ -2116,10 +2071,6 @@ video {
   --tw-shadow-color: #3f59f6 !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
-.hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(182 58 42 / var(--tw-border-opacity));
@@ -2262,10 +2213,6 @@ video {
     margin-left: 1rem;
   }
 
-  .md\:tw-mr-2 {
-    margin-right: 0.5rem;
-  }
-
   .md\:tw-mt-0 {
     margin-top: 0px;
   }
@@ -2282,10 +2229,6 @@ video {
     display: grid;
   }
 
-  .md\:tw-hidden {
-    display: none;
-  }
-
   .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -2302,10 +2245,6 @@ video {
     width: 2.5rem;
   }
 
-  .md\:tw-w-24 {
-    width: 6rem;
-  }
-
   .md\:tw-w-auto {
     width: auto;
   }
@@ -2314,14 +2253,6 @@ video {
     width: 100%;
   }
 
-  .md\:tw-max-w-full {
-    max-width: 100%;
-  }
-
-  .md\:tw-grow {
-    flex-grow: 1;
-  }
-
   .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2350,10 +2281,6 @@ video {
     justify-content: flex-start;
   }
 
-  .md\:tw-justify-end {
-    justify-content: flex-end;
-  }
-
   .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2408,10 +2335,6 @@ video {
     padding-bottom: 0.5rem;
   }
 
-  .md\:tw-pl-4 {
-    padding-left: 1rem;
-  }
-
   .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/dist/css/tailwind-designCrowd.css

@@ -643,10 +643,6 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
-.tw-my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
 .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -655,10 +651,6 @@ video {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
-.tw-my-5 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
 .tw-my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -687,9 +679,6 @@ video {
 .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
-.tw-mb-10 {
-  margin-bottom: 2.5rem;
-}
 .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -717,12 +706,12 @@ video {
 .tw-ml-4 {
   margin-left: 1rem;
 }
+.tw-ml-6 {
+  margin-left: 1.5rem;
+}
 .tw-ml-auto {
   margin-left: auto;
 }
-.tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -831,10 +820,6 @@ video {
 .tw-h-auto {
   height: auto;
 }
-.tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .tw-h-full {
   height: 100%;
 }
@@ -1018,9 +1003,6 @@ video {
 .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
-.\!tw-cursor-not-allowed {
-  cursor: not-allowed !important;
-}
 .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1202,9 +1184,6 @@ video {
 .tw-border-b-0 {
   border-bottom-width: 0px;
 }
-.tw-border-b-2 {
-  border-bottom-width: 2px;
-}
 .tw-border-b-4 {
   border-bottom-width: 4px;
 }
@@ -1454,17 +1433,6 @@ video {
 .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -1603,9 +1571,6 @@ video {
 .tw-p-4 {
   padding: 1rem;
 }
-.tw-p-5 {
-  padding: 1.25rem;
-}
 .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,9 +1706,6 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.tw-pt-4 {
-  padding-top: 1rem;
-}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1753,9 +1715,6 @@ video {
 .tw-text-center {
   text-align: center;
 }
-.tw-align-top {
-  vertical-align: top;
-}
 .tw-align-middle {
   vertical-align: middle;
 }
@@ -2048,10 +2007,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
-.hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(207 234 251 / var(--tw-bg-opacity));
-}
 .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(65 172 239 / var(--tw-bg-opacity));
@@ -2116,10 +2071,6 @@ video {
   --tw-shadow-color: #1197EB !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
-.hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(195 50 48 / var(--tw-border-opacity));
@@ -2262,10 +2213,6 @@ video {
     margin-left: 1rem;
   }
 
-  .md\:tw-mr-2 {
-    margin-right: 0.5rem;
-  }
-
   .md\:tw-mt-0 {
     margin-top: 0px;
   }
@@ -2282,10 +2229,6 @@ video {
     display: grid;
   }
 
-  .md\:tw-hidden {
-    display: none;
-  }
-
   .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -2302,10 +2245,6 @@ video {
     width: 2.5rem;
   }
 
-  .md\:tw-w-24 {
-    width: 6rem;
-  }
-
   .md\:tw-w-auto {
     width: auto;
   }
@@ -2314,14 +2253,6 @@ video {
     width: 100%;
   }
 
-  .md\:tw-max-w-full {
-    max-width: 100%;
-  }
-
-  .md\:tw-grow {
-    flex-grow: 1;
-  }
-
   .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2350,10 +2281,6 @@ video {
     justify-content: flex-start;
   }
 
-  .md\:tw-justify-end {
-    justify-content: flex-end;
-  }
-
   .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2408,10 +2335,6 @@ video {
     padding-bottom: 0.5rem;
   }
 
-  .md\:tw-pl-4 {
-    padding-left: 1rem;
-  }
-
   .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.3.5",
+  "version": "1.3.6-currency-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/experiences/clients/brand-crowd-api.client.js

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import API from '../constants/api';
+import { getCurrentLocale } from '../../useSharedLibTranslate';
 
 let internalAxios;
 
@@ -45,6 +46,9 @@ const createUserLogo = async (payload) => {
       method: 'post',
       url: API.BYO_LOGO_API_URL + API.BYO_LOGO_API_LINK_TEMPLATE_ENDPOINT,
       data: { logoTemplateToken: response.data.token },
+      headers: {
+        'Accept-Language': getCurrentLocale(),
+      },
     });
 
     return { success: true, response: linkResponse };

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/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/PaymentConfigDropdown.vue

@@ -10,46 +10,69 @@
       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>
+      <h4 class="tw-mt-3 tw-mb-2 tw-text-sm tw-font-bold">Currency</h4>
+      <Dropdown ref="dropdownCurrency">
+        <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>
+    </div>
   </div>
 </template>
 <script>
@@ -58,6 +81,7 @@ 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 Icon from '../../../../src/atoms/components/Icon/Icon.vue';
 
 import PaymentConfigMixin, { paymentConfigStatuses } from './PaymentConfig.mixin';
 import { sharedPaymentConfigTr } from '../../../useSharedLibTranslate';
@@ -69,6 +93,7 @@ export default {
     DropdownItem,
     Loader,
     Pill,
+    Icon,
   },
   mixins: [PaymentConfigMixin],
   props: {
@@ -89,6 +114,8 @@ export default {
     },
   },
   async mounted() {
+    this.getCurrentListAsync();
+
     if (this.brandPageToken) {
       await this.updatePaymentConfigs();
       if (!this.selectedPaymentConfig && this.paymentConfigs.length === 0) {
@@ -125,6 +152,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>