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

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/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,

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

@@ -10,6 +10,28 @@
       variant="outline"
       @on-click="onAddPaymentProviderButtonClick"
     ></Button>
+    <!-- Upgrade Banner (shown when loaded, regardless of provider state) -->
+    <div
+      v-if="showUpgradeBanner && !isLoading"
+      class="tw-border tw-border-solid tw-border-grayscale-300 tw-rounded-lg tw-p-4 tw-mb-3"
+      :class="{ 'tw-mt-3': isAddPaymentProviderButtonVisible }"
+    >
+      <div class="tw-flex tw-items-start tw-gap-3">
+        <Icon name="callout-info" size="md" class="tw-shrink-0 tw-mt-0.5" />
+        <div>
+          <p class="tw-font-sans tw-text-sm tw-text-grayscale-800 tw-m-0">
+            {{ sharedPaymentConfigTr('upgradeBannerMessage') }}
+          </p>
+          <Button
+            class="tw-mt-2"
+            :label="sharedPaymentConfigTr('upgradeBannerButtonLabel')"
+            variant="primary"
+            size="small"
+            @on-click.stop="onUpgradeClick"
+          />
+        </div>
+      </div>
+    </div>
     <div v-if="!isLoading && !isAddPaymentProviderButtonVisible">
       <Dropdown ref="dropdown">
         <template #title>
@@ -113,6 +135,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 +192,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,27 @@
       <Loader />
     </div>
     <div v-else>
+      <!-- Upgrade Banner -->
+      <div
+        v-if="showUpgradeBanner"
+        class="tw-border tw-border-solid tw-border-grayscale-300 tw-rounded-lg tw-p-4 tw-mb-3"
+      >
+        <div class="tw-flex tw-items-start tw-gap-3">
+          <Icon name="callout-info" size="md" class="tw-shrink-0 tw-mt-0.5" />
+          <div>
+            <p class="tw-font-sans tw-text-sm tw-text-grayscale-800 tw-m-0">
+              {{ sharedPaymentConfigTr('upgradeBannerMessage') }}
+            </p>
+            <Button
+              class="tw-mt-2"
+              :label="sharedPaymentConfigTr('upgradeBannerButtonLabel')"
+              variant="primary"
+              size="small"
+              @on-click.stop="$emit('on-upgrade-click')"
+            />
+          </div>
+        </div>
+      </div>
       <div
         v-for="(paymentConfig, index) in paymentConfigs"
         :key="paymentConfig.id"
@@ -82,7 +103,7 @@ export default {
   },
 
   mixins: [PaymentConfigMixin],
-  emits: ['on-load'],
+  emits: ['on-load', 'on-upgrade-click'],
   data() {
     return {
       activeStripeOptionIndex: null,

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}