@designcrowd/fe-shared-lib 1.5.27 → 1.5.28-ast-jy-2

package/src/atoms/components/Icon/Icon.stories.js

@@ -21,6 +21,7 @@ export const IconSample = () => {
           { name: 'websites-upgrade-to-videos' },
           { name: 'websites-upgrade-to-maps' },
           { name: 'add-page' },
+          { name: 'page-blank' },
           { name: 'ai' },
           { name: 'arrow-down' },
           { name: 'arrow-left' },
@@ -32,6 +33,7 @@ export const IconSample = () => {
           { name: 'auth-facebook-white' },
           { name: 'auth-google' },
           { name: 'badge' },
+          { name: 'discount-badge' },
           { name: 'briefcase' },
           { name: 'brush' },
           { name: 'banner' },
@@ -149,6 +151,7 @@ export const IconSample = () => {
 
           { name: 'home' },
           { name: 'home-crazy-domains' },
+          { name: 'home-outline' },
           { name: 'info' },
           { name: 'jobs' },
           { name: 'display-style-about-1' },

package/src/atoms/components/Icon/Icon.vue

@@ -39,6 +39,7 @@ import IconAspectRatio9_16 from './icons/ratio-9-16.vue';
 /* eslint-enable camelcase */
 import IconAbout from './icons/about.vue';
 import IconAddPage from './icons/add-page.vue';
+import IconPageBlank from './icons/page-blank.vue';
 import IconAi from './icons/ai.vue';
 import IconArrowDown from './icons/arrow-down.vue';
 import IconArrowLeft from './icons/arrow-left.vue';
@@ -105,6 +106,7 @@ import IconCopy from './icons/copy.vue';
 import IconFilterCrazyDomains from './icons/crazy-domains/filter.vue';
 import IconGlobeCrazyDomains from './icons/crazy-domains/globe.vue';
 import IconHomeCrazyDomains from './icons/crazy-domains/home.vue';
+import IconHomeOutline from './icons/home-outline.vue';
 import IconDelete from './icons/delete.vue';
 import IconDesigns from './icons/designs.vue';
 import IconDesktop from './icons/desktop.vue';
@@ -426,6 +428,7 @@ import IconFile from './icons/file.vue';
 import IconPenTool from './icons/pen-tool.vue';
 import IconClipboardCheck from './icons/clipboard-check.vue';
 import IconBadge from './icons/badge.vue';
+import IconDiscountBadge from './icons/discount-badge.vue';
 import IconCalculator from './icons/calculator.vue';
 import IconWebsitesUpgradeToAddPage from './icons/websites/upgrade-to-add-page.vue';
 import IconWebsitesUpgradeToContactForm from './icons/websites/upgrade-to-contact-form.vue';
@@ -445,6 +448,7 @@ export default {
     IconCalculator,
     IconAbout,
     IconAddPage,
+    IconPageBlank,
     IconAi,
     IconArrowDown,
     IconArrowLeft,
@@ -574,6 +578,7 @@ export default {
     IconFooterLeft,
 
     IconHome,
+    IconHomeOutline,
     IconHomeCrazyDomains,
     IconIconStyleNoBg,
     IconIconStyleCircleBg,
@@ -837,6 +842,7 @@ export default {
     IconAspectRatioOriginal,
     IconClipboardCheck,
     IconBadge,
+    IconDiscountBadge,
 
     IconWebsitesUpgradeToAddPage,
     IconWebsitesUpgradeToContactForm,

package/src/atoms/components/Icon/icons/discount-badge.vue

@@ -0,0 +1,5 @@
+<template>
+  <path
+    d="M4.99447 0.743491C5.51026 0.529844 6.09 0.529834 6.60579 0.743491L7.7679 1.22494L7.88216 1.25912C7.99836 1.28193 8.1198 1.27099 8.23079 1.22494L8.23177 1.22396L9.39583 0.743491V0.744468C9.91142 0.531171 10.4907 0.530929 11.0062 0.744468C11.5217 0.958072 11.9312 1.36768 12.1449 1.88314L12.6273 3.04623L12.6829 3.15072C12.7489 3.24943 12.8432 3.32719 12.9544 3.37337H12.9535L14.1175 3.85482C14.6332 4.0685 15.0426 4.47872 15.2562 4.99447C15.4698 5.51028 15.4698 6.08999 15.2562 6.6058L14.7747 7.76791C14.7285 7.87956 14.7174 8.00149 14.7406 8.11751L14.7747 8.2308L14.7757 8.23177L15.2562 9.39388L15.3255 9.58919C15.3854 9.78676 15.4163 9.99235 15.4163 10.1995C15.4164 10.4761 15.362 10.7507 15.2562 11.0062C15.1504 11.2614 14.9955 11.4934 14.8001 11.6888C14.6534 11.8355 14.4855 11.9595 14.3031 12.057L14.1165 12.1449L12.9535 12.6273C12.8053 12.6886 12.6878 12.8063 12.6263 12.9544L12.1439 14.1165C11.9303 14.6323 11.5209 15.0425 11.0052 15.2562C10.4894 15.4698 9.90968 15.4698 9.39388 15.2562L8.23079 14.7747V14.7738C8.08285 14.713 7.91662 14.7144 7.76888 14.7757H7.7679L6.60482 15.2572C6.0893 15.4703 5.50985 15.4697 4.99447 15.2562C4.4792 15.0427 4.06958 14.6336 3.85579 14.1185V14.1175L3.37337 12.9544V12.9535C3.31206 12.8053 3.19429 12.6878 3.04622 12.6263V12.6253L1.88314 12.1439C1.36774 11.9303 0.958138 11.5206 0.744466 11.0052C0.530902 10.4898 0.530333 9.91046 0.74349 9.39486L1.22493 8.23177C1.28589 8.08374 1.28623 7.91776 1.22493 7.76986L1.22396 7.76888L0.74349 6.60482L0.674154 6.41048C0.614089 6.21266 0.583367 6.00665 0.583333 5.79916C0.583296 5.52269 0.63772 5.24893 0.74349 4.99349C0.849321 4.73798 1.00494 4.50543 1.20052 4.3099C1.39597 4.11458 1.62785 3.95954 1.88314 3.85384L3.04622 3.3724L3.15169 3.31576C3.24998 3.24996 3.32725 3.15606 3.37337 3.04525L3.85482 1.88314C4.06847 1.36733 4.47866 0.957153 4.99447 0.743491ZM10.1361 4.80306C10.4289 4.51022 10.9037 4.51033 11.1966 4.80306C11.4895 5.09595 11.4895 5.57071 11.1966 5.86361L5.86361 11.1966C5.57071 11.4895 5.09595 11.4895 4.80306 11.1966C4.51033 10.9037 4.51022 10.4289 4.80306 10.1361L10.1361 4.80306ZM10.1107 8.9222C10.657 8.97764 11.0833 9.43938 11.0833 10.0003C11.0832 10.5984 10.5984 11.0832 10.0003 11.0833C9.43938 11.0833 8.97764 10.657 8.9222 10.1107L8.91634 10.0003L8.9222 9.889C8.97778 9.34283 9.43949 8.91634 10.0003 8.91634L10.1107 8.9222ZM6.11068 4.9222C6.657 4.97764 7.08333 5.43938 7.08333 6.00033C7.08316 6.59838 6.59838 7.08316 6.00033 7.08333C5.43938 7.08333 4.97764 6.657 4.9222 6.11068L4.91634 6.00033L4.9222 5.889C4.97778 5.34283 5.43949 4.91634 6.00033 4.91634L6.11068 4.9222ZM2.08333 5.79916C2.08337 5.87856 2.09884 5.95725 2.12923 6.0306L2.13021 6.03158L2.61068 7.19466L2.68001 7.39095C2.82043 7.8541 2.79798 8.35378 2.61165 8.80501V8.80599L2.13021 9.9681C2.06894 10.1163 2.06883 10.2828 2.13021 10.431C2.19162 10.5791 2.30927 10.6967 2.45736 10.7581L3.62044 11.2406H3.62142C4.13673 11.4545 4.54581 11.8646 4.75911 12.3802L5.24154 13.5433L5.2972 13.6488C5.36318 13.7472 5.45761 13.8244 5.56868 13.8704C5.71682 13.9318 5.88341 13.9317 6.03158 13.8704L7.19368 13.39L7.38997 13.3197C7.78717 13.1992 8.21136 13.1988 8.60872 13.3187L8.80501 13.389L9.9681 13.8704C10.1163 13.9318 10.2828 13.9318 10.431 13.8704C10.5791 13.8091 10.6967 13.6914 10.7581 13.5433L11.2406 12.3792L11.3294 12.1908C11.5583 11.7641 11.9289 11.4272 12.3802 11.2406L13.5423 10.7591C13.6158 10.7287 13.6834 10.6845 13.7396 10.6283C13.7957 10.5721 13.8401 10.5053 13.8704 10.432C13.9008 10.3587 13.9163 10.2799 13.9163 10.2005C13.9163 10.1609 13.9123 10.121 13.9046 10.0824L13.8704 9.9681L13.389 8.80599V8.80501C13.1748 8.28889 13.1759 7.70951 13.389 7.19466L13.8704 6.03158C13.9318 5.88337 13.9318 5.71691 13.8704 5.56869C13.809 5.42042 13.6915 5.30198 13.5433 5.24056L12.3792 4.75912C11.8646 4.54539 11.4551 4.1361 11.2415 3.62142L10.7591 2.45736C10.6977 2.30928 10.5801 2.19157 10.432 2.13021C10.2838 2.06883 10.1173 2.06889 9.96908 2.13021H9.9681L8.80404 2.61068L8.80306 2.6097C8.28806 2.8228 7.70983 2.82452 7.19466 2.61165V2.61068L6.03158 2.12923C5.88341 2.06788 5.71686 2.06792 5.56868 2.12923C5.42043 2.19064 5.30198 2.30908 5.24056 2.45736L4.75911 3.62044V3.62142C4.57175 4.07181 4.23437 4.44122 3.80794 4.66927L3.61947 4.75814L2.45736 5.23958C2.3841 5.2699 2.31719 5.31445 2.26107 5.37044C2.20485 5.42665 2.15965 5.49426 2.12923 5.56771C2.09892 5.64104 2.08332 5.7198 2.08333 5.79916Z"
+  />
+</template>

package/src/atoms/components/Icon/icons/home-outline.vue

@@ -0,0 +1,6 @@
+<template>
+  <path
+    d="M9.24448 8.75489C9.17512 8.75232 9.07964 8.75 8.93295 8.75H7.06674C6.91914 8.75 6.8237 8.75227 6.75424 8.75489C6.75165 8.82425 6.75034 8.91943 6.75034 9.06641V13.25H9.25034V9.06641C9.25034 8.9194 9.24707 8.82426 9.24448 8.75489ZM14.0833 11.8662C14.0833 12.2272 14.0841 12.5438 14.0628 12.8037C14.0409 13.0724 13.9913 13.3464 13.8558 13.6123C13.6561 14.0043 13.3376 14.3227 12.9456 14.5225C12.6798 14.6579 12.4057 14.7075 12.1371 14.7295C11.8771 14.7507 11.5605 14.75 11.1996 14.75H4.80014C4.43934 14.75 4.1235 14.7507 3.86362 14.7295C3.5949 14.7075 3.32001 14.658 3.05405 14.5225C2.66219 14.3227 2.34357 14.0042 2.14389 13.6123C2.00844 13.3464 1.95882 13.0723 1.93686 12.8037C1.91562 12.5438 1.91635 12.2272 1.91635 11.8662V6.83301L1.78354 6.9336C1.4522 7.1821 0.982283 7.11449 0.733734 6.78321C0.485245 6.45189 0.551913 5.98196 0.883148 5.7334L6.91049 1.21289C7.0865 1.08086 7.33718 0.876452 7.63901 0.796879C7.81616 0.750246 8.00045 0.738464 8.181 0.761723L8.36069 0.796879L8.47202 0.832035C8.72473 0.926401 8.93617 1.09738 9.09018 1.21289L15.1165 5.7334C15.4478 5.98188 15.5153 6.45185 15.2669 6.78321C15.0185 7.11444 14.5485 7.18176 14.2171 6.9336L14.0833 6.83301V11.8662ZM10.7503 13.25H11.1996C11.5853 13.25 11.8303 13.2495 12.015 13.2344C12.1907 13.22 12.2457 13.1963 12.265 13.1865C12.3747 13.1306 12.464 13.0413 12.5199 12.9316C12.5297 12.9124 12.5533 12.8574 12.5677 12.6816C12.5828 12.4969 12.5833 12.252 12.5833 11.8662V5.70801L8.83041 2.89356C8.31837 2.50953 8.22454 2.45554 8.14877 2.43555C8.05158 2.40997 7.94911 2.41004 7.8519 2.43555C7.77611 2.4555 7.68262 2.50929 7.17026 2.89356L3.41635 5.70801V11.8662C3.41635 12.252 3.41688 12.4969 3.43198 12.6816C3.44634 12.8572 3.47 12.9123 3.47983 12.9316C3.5357 13.0413 3.6251 13.1306 3.73471 13.1865C3.75397 13.1963 3.80973 13.22 3.98569 13.2344C4.17036 13.2494 4.41463 13.25 4.80014 13.25H5.25034V9.06641C5.25034 8.89219 5.2499 8.71611 5.26205 8.56739C5.27495 8.40991 5.30553 8.21794 5.40463 8.02344L5.45932 7.92579C5.59543 7.70397 5.79061 7.5231 6.02377 7.4043L6.1683 7.3418C6.31184 7.29067 6.44953 7.27138 6.56772 7.26172C6.71651 7.24957 6.89243 7.25 7.06674 7.25H8.93295C9.10715 7.25 9.28325 7.24959 9.43198 7.26172C9.55009 7.27137 9.68795 7.29075 9.83139 7.3418L9.9769 7.4043L10.0736 7.45899C10.264 7.57569 10.4246 7.73542 10.5414 7.92579L10.596 8.02344L10.6576 8.16895C10.7085 8.31223 10.729 8.44937 10.7386 8.56739C10.7508 8.71611 10.7503 8.89219 10.7503 9.06641V13.25Z"
+    fill-rule="nonzero"
+  />
+</template>

package/src/atoms/components/Icon/icons/page-blank.vue

@@ -0,0 +1,6 @@
+<template>
+  <path
+    d="M12.8172 3.67969C13.0724 3.9349 13.2 4.24479 13.2 4.60938V13.6875C13.2 14.0521 13.0724 14.362 12.8172 14.6172C12.562 14.8724 12.2521 15 11.8875 15H4.0125C3.64792 15 3.33802 14.8724 3.08281 14.6172C2.8276 14.362 2.7 14.0521 2.7 13.6875V2.3125C2.7 1.94792 2.8276 1.63802 3.08281 1.38281C3.33802 1.1276 3.64792 1 4.0125 1H9.59063C9.95521 1 10.2651 1.1276 10.5203 1.38281L12.8172 3.67969ZM9.7 2.42188V4.5H11.7781L9.7 2.42188ZM11.8875 13.6875V5.8125H9.04375C8.86146 5.8125 8.70651 5.7487 8.57891 5.62109C8.4513 5.49349 8.3875 5.33854 8.3875 5.15625V2.3125H4.0125V13.6875H11.8875Z"
+    fill-rule="nonzero"
+  />
+</template>

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

@@ -10,7 +10,9 @@
     "inactive": "Inaktiv",
     "addPaymentProvider": "Zahlungsanbieter hinzufügen",
     "deletePaymentMethod": "Zahlungsmethode löschen",
-    "currencyLabel": "Währung"
+    "currencyLabel": "Währung",
+    "upgradeBannerMessage": "Unlock lower commission fees by upgrading to Premium",
+    "upgradeBannerButtonLabel": "Upgrade Now"
   },
   "publishBrandPageModal": {
     "firstTimePublishHeaderLabel": "Legen Sie die URL für {{brandPageDisplayName}} fest",

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

@@ -10,7 +10,9 @@
     "inactive": "Inactivo",
     "addPaymentProvider": "Añadir proveedor de pago",
     "deletePaymentMethod": "Eliminar método de pago",
-    "currencyLabel": "Moneda"
+    "currencyLabel": "Moneda",
+    "upgradeBannerMessage": "Unlock lower commission fees by upgrading to Premium",
+    "upgradeBannerButtonLabel": "Upgrade Now"
   },
   "publishBrandPageModal": {
     "firstTimePublishHeaderLabel": "Establece la URL para {{brandPageDisplayName}}",

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

@@ -10,7 +10,9 @@
     "inactive": "Inactif",
     "addPaymentProvider": "Ajouter un fournisseur de paiement",
     "deletePaymentMethod": "Supprimer le mode de paiement",
-    "currencyLabel": "Devise"
+    "currencyLabel": "Devise",
+    "upgradeBannerMessage": "Unlock lower commission fees by upgrading to Premium",
+    "upgradeBannerButtonLabel": "Upgrade Now"
   },
   "publishBrandPageModal": {
     "firstTimePublishHeaderLabel": "Définissez l'URL pour {{brandPageDisplayName}}",

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

@@ -10,7 +10,9 @@
     "inactive": "Inactif",
     "addPaymentProvider": "Ajouter un fournisseur de paiement",
     "deletePaymentMethod": "Supprimer le mode de paiement",
-    "currencyLabel": "Devise"
+    "currencyLabel": "Devise",
+    "upgradeBannerMessage": "Unlock lower commission fees by upgrading to Premium",
+    "upgradeBannerButtonLabel": "Upgrade Now"
   },
   "publishBrandPageModal": {
     "firstTimePublishHeaderLabel": "Définissez l'URL pour {{brandPageDisplayName}}",

package/src/bundles/bundled-translations.json

@@ -10,7 +10,9 @@
     "inactive": "Inactive",
     "addPaymentProvider": "Add Payment Provider",
     "deletePaymentMethod": "Delete payment method",
-    "currencyLabel": "Currency"
+    "currencyLabel": "Currency",
+    "upgradeBannerMessage": "Unlock lower commission fees by upgrading to Premium",
+    "upgradeBannerButtonLabel": "Upgrade Now"
   },
   "publishBrandPageModal": {
     "firstTimePublishHeaderLabel": "Set the URL for {{brandPageDisplayName}}",

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

@@ -10,7 +10,9 @@
     "inactive": "Inativo",
     "addPaymentProvider": "Adicionar fornecedor de pagamentos",
     "deletePaymentMethod": "Excluir método de pagamento",
-    "currencyLabel": "Moeda"
+    "currencyLabel": "Moeda",
+    "upgradeBannerMessage": "Unlock lower commission fees by upgrading to Premium",
+    "upgradeBannerButtonLabel": "Upgrade Now"
   },
   "publishBrandPageModal": {
     "firstTimePublishHeaderLabel": "Defina o URL para {{brandPageDisplayName}}",

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

@@ -10,7 +10,9 @@
     "inactive": "Inativo",
     "addPaymentProvider": "Adicionar fornecedor de pagamentos",
     "deletePaymentMethod": "Eliminar método de pagamento",
-    "currencyLabel": "Moeda"
+    "currencyLabel": "Moeda",
+    "upgradeBannerMessage": "Unlock lower commission fees by upgrading to Premium",
+    "upgradeBannerButtonLabel": "Upgrade Now"
   },
   "publishBrandPageModal": {
     "firstTimePublishHeaderLabel": "Defina o URL para {{brandPageDisplayName}}",

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

@@ -25,6 +25,16 @@ export default {
       required: false,
       default: undefined,
     },
+    showUpgradeBanner: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isDesignCom: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   directives: {
     clickOutside: vClickOutside,

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

@@ -10,6 +10,13 @@
       variant="outline"
       @on-click="onAddPaymentProviderButtonClick"
     ></Button>
+    <PaymentConfigUpgradeBanner
+      v-if="showUpgradeBanner && !isLoading"
+      class="tw-mb-3"
+      :class="{ 'tw-mt-3': isAddPaymentProviderButtonVisible }"
+      :is-design-com="isDesignCom"
+      @on-upgrade-click="onUpgradeClick"
+    />
     <div v-if="!isLoading && !isAddPaymentProviderButtonVisible">
       <Dropdown ref="dropdown">
         <template #title>
@@ -89,6 +96,7 @@ 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 PaymentConfigUpgradeBanner from './PaymentConfigUpgradeBanner.vue';
 import PaymentConfigMixin, { paymentConfigStatuses } from './PaymentConfig.mixin';
 import { sharedPaymentConfigTr } from '../../../useSharedLibTranslate';
 
@@ -100,6 +108,7 @@ export default {
     Loader,
     Pill,
     Icon,
+    PaymentConfigUpgradeBanner,
   },
   mixins: [PaymentConfigMixin],
   props: {
@@ -113,6 +122,13 @@ export default {
       default: undefined,
     },
   },
+  emits: [
+    'on-load',
+    'on-add-payment-provider-click',
+    'on-payment-config-selected',
+    'on-currency-selected',
+    'on-upgrade-click',
+  ],
   data: () => ({ isAddPaymentProviderButtonVisible: false, selectedPaymentConfig: undefined }),
   watch: {
     paymentConfig(newValue) {
@@ -163,6 +179,10 @@ export default {
       this.$refs.dropdownCurrency.hideMenu();
       this.$emit('on-currency-selected', currency);
     },
+
+    onUpgradeClick() {
+      this.$emit('on-upgrade-click');
+    },
   },
 };
 </script>

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

@@ -232,3 +232,51 @@ export const SampleDropdownEmpty = () => {
 SampleDropdownEmpty.SampleDropdownEmpty = {
   name: 'Dropdown Empty',
 };
+
+export const SampleStripeWithUpgradeBanner = () => {
+  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: { PaymentConfigList },
+    data() {
+      return { brandPageToken };
+    },
+    template: `
+      <div class="tw-w-full tw-p-4" style="background: #f4f4f4">
+        <PaymentConfigList :brand-page-token="brandPageToken" :show-upgrade-banner="true" />
+      </div>
+    `,
+  };
+};
+
+SampleStripeWithUpgradeBanner.story = {
+  name: 'Sample Stripe with Upgrade Banner',
+};
+
+export const SampleDropdownWithUpgradeBanner = () => {
+  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: { PaymentConfigDropdown },
+    data() {
+      return { brandPageToken };
+    },
+    template: `
+      <div class="tw-w-1/3 tw-p-4" style="background: #f4f4f4">
+        <PaymentConfigDropdown :brand-page-token="brandPageToken" :show-upgrade-banner="true" />
+      </div>
+    `,
+  };
+};
+
+SampleDropdownWithUpgradeBanner.story = {
+  name: 'Dropdown with Upgrade Banner',
+};

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

@@ -4,6 +4,12 @@
       <Loader />
     </div>
     <div v-else>
+      <PaymentConfigUpgradeBanner
+        v-if="showUpgradeBanner"
+        class="tw-mb-3"
+        :is-design-com="isDesignCom"
+        @on-upgrade-click="$emit('on-upgrade-click')"
+      />
       <div
         v-for="(paymentConfig, index) in paymentConfigs"
         :key="paymentConfig.id"
@@ -69,6 +75,7 @@ import Loader from '../../../atoms/components/Loader/Loader.vue';
 import Button from '../../../atoms/components/Button/Button.vue';
 import PaymentConfigDeleteConfigModal from './PaymentConfigDeleteConfigModal.vue';
 import Icon from '../../../atoms/components/Icon/Icon.vue';
+import PaymentConfigUpgradeBanner from './PaymentConfigUpgradeBanner.vue';
 
 import PaymentConfigMixin from './PaymentConfig.mixin';
 import { sharedPaymentConfigTr } from '../../../useSharedLibTranslate';
@@ -79,10 +86,11 @@ export default {
     Button,
     Icon,
     PaymentConfigDeleteConfigModal,
+    PaymentConfigUpgradeBanner,
   },
 
   mixins: [PaymentConfigMixin],
-  emits: ['on-load'],
+  emits: ['on-load', 'on-upgrade-click'],
   data() {
     return {
       activeStripeOptionIndex: null,

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

@@ -0,0 +1,68 @@
+<template>
+  <div class="tw-border tw-border-solid tw-rounded-lg tw-p-4" :style="bannerStyles">
+    <div class="tw-flex tw-items-start tw-gap-3">
+      <Icon name="discount-badge" size="sm" class="tw-shrink-0 tw-mt-0.5" :style="{ color: colors.icon }" />
+      <div>
+        <p class="tw-font-sans tw-text-sm tw-text-grayscale-800 tw-m-0">
+          {{ sharedPaymentConfigTr('upgradeBannerMessage') }}
+        </p>
+        <Button
+          class="tw-mt-2"
+          :class="{ 'tw-uppercase': !isDesignCom }"
+          :label="sharedPaymentConfigTr('upgradeBannerButtonLabel')"
+          variant="primary"
+          size="small"
+          @on-click.stop="$emit('on-upgrade-click')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import Icon from '../../../atoms/components/Icon/Icon.vue';
+import { sharedPaymentConfigTr } from '../../../useSharedLibTranslate';
+
+const BC_COLORS = {
+  background: '#CCEAF7',
+  border: '#0097D7',
+  icon: '#0097D7',
+};
+
+const DCOM_COLORS = {
+  background: '#ECEEFE',
+  border: '#3F59F6',
+  icon: '#3F59F6',
+};
+
+export default {
+  components: {
+    Button,
+    Icon,
+  },
+  props: {
+    isDesignCom: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  emits: ['on-upgrade-click'],
+  computed: {
+    colors() {
+      console.log(this.isDesignCom);
+      return this.isDesignCom ? DCOM_COLORS : BC_COLORS;
+    },
+    bannerStyles() {
+      return {
+        borderColor: this.colors.border,
+        backgroundColor: this.colors.background,
+      };
+    },
+  },
+  methods: {
+    sharedPaymentConfigTr,
+  },
+};
+</script>

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

@@ -6,6 +6,8 @@
     "inactive" : "Inaktiv",
     "addPaymentProvider" : "Zahlungsanbieter hinzufügen",
     "deletePaymentMethod" : "Zahlungsmethode löschen",
-    "currencyLabel" : "Währung"
+    "currencyLabel" : "Währung",
+    "upgradeBannerMessage" : "Unlock lower commission fees by upgrading to Premium",
+    "upgradeBannerButtonLabel" : "Upgrade Now"
   }
 }

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

@@ -6,6 +6,8 @@
     "inactive" : "Inactivo",
     "addPaymentProvider" : "Añadir proveedor de pago",
     "deletePaymentMethod" : "Eliminar método de pago",
-    "currencyLabel" : "Moneda"
+    "currencyLabel" : "Moneda",
+    "upgradeBannerMessage" : "Unlock lower commission fees by upgrading to Premium",
+    "upgradeBannerButtonLabel" : "Upgrade Now"
   }
 }

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

@@ -6,6 +6,8 @@
     "inactive" : "Inactif",
     "addPaymentProvider" : "Ajouter un fournisseur de paiement",
     "deletePaymentMethod" : "Supprimer le mode de paiement",
-    "currencyLabel" : "Devise"
+    "currencyLabel" : "Devise",
+    "upgradeBannerMessage" : "Unlock lower commission fees by upgrading to Premium",
+    "upgradeBannerButtonLabel" : "Upgrade Now"
   }
 }

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

@@ -6,6 +6,8 @@
     "inactive" : "Inactif",
     "addPaymentProvider" : "Ajouter un fournisseur de paiement",
     "deletePaymentMethod" : "Supprimer le mode de paiement",
-    "currencyLabel" : "Devise"
+    "currencyLabel" : "Devise",
+    "upgradeBannerMessage" : "Unlock lower commission fees by upgrading to Premium",
+    "upgradeBannerButtonLabel" : "Upgrade Now"
   }
 }

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

@@ -6,6 +6,8 @@
     "inactive": "Inactive",
     "addPaymentProvider": "Add Payment Provider",
     "deletePaymentMethod": "Delete payment method",
-    "currencyLabel": "Currency"
+    "currencyLabel": "Currency",
+    "upgradeBannerMessage": "Unlock lower commission fees by upgrading to Premium",
+    "upgradeBannerButtonLabel": "Upgrade Now"
   }
 }

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

@@ -6,6 +6,8 @@
     "inactive" : "Inativo",
     "addPaymentProvider" : "Adicionar fornecedor de pagamentos",
     "deletePaymentMethod" : "Excluir método de pagamento",
-    "currencyLabel" : "Moeda"
+    "currencyLabel" : "Moeda",
+    "upgradeBannerMessage" : "Unlock lower commission fees by upgrading to Premium",
+    "upgradeBannerButtonLabel" : "Upgrade Now"
   }
 }

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

@@ -6,6 +6,8 @@
     "inactive" : "Inativo",
     "addPaymentProvider" : "Adicionar fornecedor de pagamentos",
     "deletePaymentMethod" : "Eliminar método de pagamento",
-    "currencyLabel" : "Moeda"
+    "currencyLabel" : "Moeda",
+    "upgradeBannerMessage" : "Unlock lower commission fees by upgrading to Premium",
+    "upgradeBannerButtonLabel" : "Upgrade Now"
   }
 }

package/.storybook-static/assets/Auth-BEjq1pFf.css

@@ -1 +0,0 @@
-.email-input[data-v-cce70fef]{background-image:url(https://dcstatic.com/images/icons/forms/forms-email-58207f9a5c.svg);background-position:top 50% left .5rem}.password-input[data-v-cce70fef]{background-image:url(https://dcstatic.com/images/icons/forms/forms-password-ff538cd5e4.svg);background-position:top 50% left .5rem}.tw-pl-10-important[data-v-cce70fef]{padding-left:2.5rem!important}.email-input[data-v-91cb4060]{background-image:url(https://dcstatic.com/images/icons/forms/forms-email-58207f9a5c.svg);background-position:top 50% left .5rem}.tw-pl-10-important[data-v-91cb4060]{padding-left:2.5rem!important}.password-input[data-v-524c1521]{background-image:url(https://dcstatic.com/images/icons/forms/forms-password-ff538cd5e4.svg);background-position:top 50% left .5rem}.tw-pl-10-important[data-v-524c1521]{padding-left:2.5rem!important}