@designcrowd/fe-shared-lib 1.5.28 → 1.5.29-jj-2

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",
+    "upgradeMessage": "Unlock lower commission fees by upgrading to Premium",
+    "upgradeNow": "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",
+    "upgradeMessage": "Unlock lower commission fees by upgrading to Premium",
+    "upgradeNow": "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",
+    "upgradeMessage": "Unlock lower commission fees by upgrading to Premium",
+    "upgradeNow": "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",
+    "upgradeMessage": "Unlock lower commission fees by upgrading to Premium",
+    "upgradeNow": "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",
+    "upgradeMessage": "Unlock lower commission fees by upgrading to Premium",
+    "upgradeNow": "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",
+    "upgradeMessage": "Unlock lower commission fees by upgrading to Premium",
+    "upgradeNow": "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",
+    "upgradeMessage": "Unlock lower commission fees by upgrading to Premium",
+    "upgradeNow": "Upgrade Now"
   },
   "publishBrandPageModal": {
     "firstTimePublishHeaderLabel": "Defina o URL para {{brandPageDisplayName}}",

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

@@ -25,6 +25,11 @@ export default {
       required: false,
       default: undefined,
     },
+    showUpgradeBanner: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   directives: {
     clickOutside: vClickOutside,
@@ -101,6 +106,10 @@ export default {
       }
     },
 
+    onUpgradeClick() {
+      this.$emit('on-upgrade-click');
+    },
+
     async getCurrentListAsync() {
       try {
         const result = await brandPageApiClient.getPaymentConfigCurrencyListByBrandPageTokenAsync();

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

@@ -3,6 +3,24 @@
     <div v-if="isLoading" class="tw-w-full tw-flex tw-justify-center tw-p-2">
       <Loader />
     </div>
+    <div
+      v-if="showUpgradeBanner && !isLoading"
+      class="tw-p-3 tw-mb-3 tw-rounded tw-border tw-border-solid tw-border-primary-500 tw-bg-primary-100"
+    >
+      <div class="tw-flex tw-items-start tw-gap-2">
+        <Icon name="upgrade-alt" size="md" class="tw-flex-shrink-0" />
+        <div class="tw-flex tw-flex-col tw-gap-2">
+          <span class="tw-text-sm">{{ sharedPaymentConfigTr('upgradeMessage') }}</span>
+          <Button
+            :label="sharedPaymentConfigTr('upgradeNow')"
+            variant="primary"
+            size="small"
+            class="tw-w-fit"
+            @on-click="onUpgradeClick"
+          />
+        </div>
+      </div>
+    </div>
     <Button
       v-if="isAddPaymentProviderButtonVisible"
       :label="sharedPaymentConfigTr('addPaymentProvider')"
@@ -102,6 +120,7 @@ export default {
     Icon,
   },
   mixins: [PaymentConfigMixin],
+  emits: ['on-add-payment-provider-click', 'on-payment-config-selected', 'on-currency-selected', 'on-upgrade-click'],
   props: {
     showAddPaymentProvider: {
       type: Boolean,

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

@@ -232,3 +232,59 @@ 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" @on-upgrade-click="() => alert('Upgrade clicked')" />
+      </div>
+    `,
+  };
+};
+
+SampleStripeWithUpgradeBanner.story = {
+  name: 'Sample Stripe (With Upgrade Banner)',
+};
+
+export const SampleDropdownStripeWithUpgradeBanner = () => {
+  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" @on-upgrade-click="() => alert('Upgrade clicked')" />
+      </div>
+    `,
+  };
+};
+
+SampleDropdownStripeWithUpgradeBanner.story = {
+  name: 'Dropdown Stripe (With Upgrade Banner)',
+};

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

@@ -4,6 +4,24 @@
       <Loader />
     </div>
     <div v-else>
+      <div
+        v-if="showUpgradeBanner"
+        class="tw-p-3 tw-mb-3 tw-rounded tw-border tw-border-solid tw-border-primary-500 tw-bg-primary-100"
+      >
+        <div class="tw-flex tw-items-start tw-gap-2 sm:tw-items-center sm:tw-gap-3 sm:tw-flex-row">
+          <Icon name="upgrade-alt" size="md" class="tw-flex-shrink-0" />
+          <div class="tw-flex tw-flex-col tw-gap-2 sm:tw-flex-row sm:tw-items-center sm:tw-grow">
+            <span class="tw-text-sm sm:tw-grow">{{ sharedPaymentConfigTr('upgradeMessage') }}</span>
+            <Button
+              :label="sharedPaymentConfigTr('upgradeNow')"
+              variant="primary"
+              size="small"
+              class="tw-w-fit"
+              @on-click="onUpgradeClick"
+            />
+          </div>
+        </div>
+      </div>
       <div
         v-for="(paymentConfig, index) in paymentConfigs"
         :key="paymentConfig.id"
@@ -82,7 +100,7 @@ export default {
   },
 
   mixins: [PaymentConfigMixin],
-  emits: ['on-load'],
+  emits: ['on-load', 'on-upgrade-click'],
   data() {
     return {
       activeStripeOptionIndex: null,

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",
+    "upgradeMessage" : "Unlock lower commission fees by upgrading to Premium",
+    "upgradeNow" : "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",
+    "upgradeMessage" : "Unlock lower commission fees by upgrading to Premium",
+    "upgradeNow" : "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",
+    "upgradeMessage" : "Unlock lower commission fees by upgrading to Premium",
+    "upgradeNow" : "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",
+    "upgradeMessage" : "Unlock lower commission fees by upgrading to Premium",
+    "upgradeNow" : "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",
+    "upgradeMessage": "Unlock lower commission fees by upgrading to Premium",
+    "upgradeNow": "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",
+    "upgradeMessage" : "Unlock lower commission fees by upgrading to Premium",
+    "upgradeNow" : "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",
+    "upgradeMessage" : "Unlock lower commission fees by upgrading to Premium",
+    "upgradeNow" : "Upgrade Now"
   }
 }