@designcrowd/fe-shared-lib 1.0.17-fe-upgrade-rc-v2 → 1.0.17-kp-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.0.17-fe-upgrade-rc-v2",
+  "version": "1.0.17-kp-1",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",
@@ -28,10 +28,10 @@
     "postcss-loader": "8.1.0",
     "swiper": "11.0.6",
     "tailwindcss": "3.4.1",
-    "vite": "5.1.4",
+    "vite": "5.2.3",
     "vite-plugin-eslint": "1.8.1",
     "vite-plugin-vue-devtools": "7.7.0",
-    "vue": "3.5.13",
+    "vue": "3.5.3",
     "vue-color": "2.8.1",
     "vue-cropperjs": "5.0.0",
     "vue-observe-visibility": "1.0.0",
@@ -39,14 +39,14 @@
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "8.6.11",
-    "@storybook/addon-actions": "8.6.11",
-    "@storybook/addon-controls": "8.6.11",
-    "@storybook/addon-essentials": "8.6.11",
-    "@storybook/addon-links": "8.6.11",
-    "@storybook/addon-themes": "8.6.11",
-    "@storybook/vue3": "8.6.11",
-    "@storybook/vue3-vite": "8.6.11",
+    "@storybook/addon-a11y": "8.0.4",
+    "@storybook/addon-actions": "8.0.4",
+    "@storybook/addon-controls": "8.0.4",
+    "@storybook/addon-essentials": "8.0.4",
+    "@storybook/addon-links": "8.0.4",
+    "@storybook/addon-themes": "8.0.4",
+    "@storybook/vue3": "8.0.4",
+    "@storybook/vue3-vite": "8.0.4",
     "@vitejs/plugin-vue": "5.0.4",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",
@@ -68,7 +68,7 @@
     "postcss-import": "16.0.0",
     "postcss-nested": "6.0.1",
     "prettier": "3.2.4",
-    "storybook": "8.6.11",
+    "storybook": "8.0.4",
     "stylelint": "16.2.1",
     "stylelint-config-standard": "36.0.0",
     "tailwindcss": "3.4.1",

package/{.storybook-static → public}/css/tailwind-brandCrowd.css

@@ -679,6 +679,9 @@ video {
 .theme-brandCrowd .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-brandCrowd .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-brandCrowd .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -835,6 +838,9 @@ video {
 .theme-brandCrowd .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-brandCrowd .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-brandCrowd .tw-w-10 {
   width: 2.5rem;
 }
@@ -1715,6 +1721,9 @@ video {
 .theme-brandCrowd .tw-text-center {
   text-align: center;
 }
+.theme-brandCrowd .tw-align-top {
+  vertical-align: top;
+}
 .theme-brandCrowd .tw-align-middle {
   vertical-align: middle;
 }
@@ -2197,6 +2206,9 @@ video {
 .theme-brandCrowd .md\:tw-grid {
     display: grid;
   }
+.theme-brandCrowd .md\:tw-hidden {
+    display: none;
+  }
 .theme-brandCrowd .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -2209,12 +2221,21 @@ video {
 .theme-brandCrowd .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-brandCrowd .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-brandCrowd .md\:tw-w-auto {
     width: auto;
   }
 .theme-brandCrowd .md\:tw-w-full {
     width: 100%;
   }
+.theme-brandCrowd .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-brandCrowd .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-brandCrowd .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2257,9 @@ video {
 .theme-brandCrowd .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-brandCrowd .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-brandCrowd .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2302,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-brandCrowd .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-brandCrowd .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/{.storybook-static → public}/css/tailwind-brandPage.css

@@ -679,6 +679,9 @@ video {
 .theme-brandPage .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-brandPage .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-brandPage .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -835,6 +838,9 @@ video {
 .theme-brandPage .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-brandPage .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-brandPage .tw-w-10 {
   width: 2.5rem;
 }
@@ -1563,6 +1569,9 @@ video {
 .theme-brandPage .tw-text-center {
   text-align: center;
 }
+.theme-brandPage .tw-align-top {
+  vertical-align: top;
+}
 .theme-brandPage .tw-align-middle {
   vertical-align: middle;
 }
@@ -1885,6 +1894,9 @@ video {
 .theme-brandPage .md\:tw-grid {
     display: grid;
   }
+.theme-brandPage .md\:tw-hidden {
+    display: none;
+  }
 .theme-brandPage .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -1897,12 +1909,21 @@ video {
 .theme-brandPage .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-brandPage .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-brandPage .md\:tw-w-auto {
     width: auto;
   }
 .theme-brandPage .md\:tw-w-full {
     width: 100%;
   }
+.theme-brandPage .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-brandPage .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-brandPage .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1924,6 +1945,9 @@ video {
 .theme-brandPage .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-brandPage .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-brandPage .md\:tw-justify-center {
     justify-content: center;
   }
@@ -1966,6 +1990,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-brandPage .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-brandPage .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/{.storybook-static → public}/css/tailwind-crazyDomains.css

@@ -679,6 +679,9 @@ video {
 .theme-crazyDomains .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-crazyDomains .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-crazyDomains .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -835,6 +838,9 @@ video {
 .theme-crazyDomains .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-crazyDomains .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-crazyDomains .tw-w-10 {
   width: 2.5rem;
 }
@@ -1715,6 +1721,9 @@ video {
 .theme-crazyDomains .tw-text-center {
   text-align: center;
 }
+.theme-crazyDomains .tw-align-top {
+  vertical-align: top;
+}
 .theme-crazyDomains .tw-align-middle {
   vertical-align: middle;
 }
@@ -2197,6 +2206,9 @@ video {
 .theme-crazyDomains .md\:tw-grid {
     display: grid;
   }
+.theme-crazyDomains .md\:tw-hidden {
+    display: none;
+  }
 .theme-crazyDomains .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -2209,12 +2221,21 @@ video {
 .theme-crazyDomains .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-crazyDomains .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-crazyDomains .md\:tw-w-auto {
     width: auto;
   }
 .theme-crazyDomains .md\:tw-w-full {
     width: 100%;
   }
+.theme-crazyDomains .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-crazyDomains .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-crazyDomains .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2257,9 @@ video {
 .theme-crazyDomains .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-crazyDomains .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-crazyDomains .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2302,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-crazyDomains .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-crazyDomains .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/{.storybook-static → public}/css/tailwind-designCom.css

@@ -679,6 +679,9 @@ video {
 .theme-designCom .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-designCom .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-designCom .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -835,6 +838,9 @@ video {
 .theme-designCom .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-designCom .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-designCom .tw-w-10 {
   width: 2.5rem;
 }
@@ -1715,6 +1721,9 @@ video {
 .theme-designCom .tw-text-center {
   text-align: center;
 }
+.theme-designCom .tw-align-top {
+  vertical-align: top;
+}
 .theme-designCom .tw-align-middle {
   vertical-align: middle;
 }
@@ -2197,6 +2206,9 @@ video {
 .theme-designCom .md\:tw-grid {
     display: grid;
   }
+.theme-designCom .md\:tw-hidden {
+    display: none;
+  }
 .theme-designCom .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -2209,12 +2221,21 @@ video {
 .theme-designCom .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-designCom .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-designCom .md\:tw-w-auto {
     width: auto;
   }
 .theme-designCom .md\:tw-w-full {
     width: 100%;
   }
+.theme-designCom .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-designCom .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-designCom .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2257,9 @@ video {
 .theme-designCom .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-designCom .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-designCom .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2302,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-designCom .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-designCom .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/{.storybook-static → public}/css/tailwind-designCrowd.css

@@ -679,6 +679,9 @@ video {
 .theme-designCrowd .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-designCrowd .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-designCrowd .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -835,6 +838,9 @@ video {
 .theme-designCrowd .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-designCrowd .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-designCrowd .tw-w-10 {
   width: 2.5rem;
 }
@@ -1715,6 +1721,9 @@ video {
 .theme-designCrowd .tw-text-center {
   text-align: center;
 }
+.theme-designCrowd .tw-align-top {
+  vertical-align: top;
+}
 .theme-designCrowd .tw-align-middle {
   vertical-align: middle;
 }
@@ -2197,6 +2206,9 @@ video {
 .theme-designCrowd .md\:tw-grid {
     display: grid;
   }
+.theme-designCrowd .md\:tw-hidden {
+    display: none;
+  }
 .theme-designCrowd .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -2209,12 +2221,21 @@ video {
 .theme-designCrowd .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-designCrowd .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-designCrowd .md\:tw-w-auto {
     width: auto;
   }
 .theme-designCrowd .md\:tw-w-full {
     width: 100%;
   }
+.theme-designCrowd .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-designCrowd .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-designCrowd .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2257,9 @@ video {
 .theme-designCrowd .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-designCrowd .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-designCrowd .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2302,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-designCrowd .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-designCrowd .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

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

@@ -13,7 +13,10 @@
     <Dropdown v-if="!isLoading && !isAddPaymentProviderButtonVisible" ref="dropdown">
       <template #title>
         <div v-if="selectedPaymentConfig" class="tw-flex">
-          <span class="tw-text-sm tw-grow tw-select-none">{{ selectedPaymentConfig.name }}</span>
+          <span class="tw-text-sm tw-grow tw-select-none"
+            >{{ selectedPaymentConfig.name }} &nbsp;
+            <small>({{ selectedPaymentConfig.paymentProviderExternalId }})</small></span
+          >
           <Pill
             class="tw-text-white tw-mr-2"
             :class="getPaymentConfigStatusDisplayClasses(selectedPaymentConfig.status)"
@@ -28,7 +31,9 @@
         :key="`payment-config-${paymentConfig.id}`"
         @click="onPaymentConfigClick(paymentConfig)"
       >
-        <span class="tw-text-sm tw-grow tw-select-none">{{ paymentConfig.name }}</span>
+        <span class="tw-text-sm tw-grow tw-select-none"
+          >{{ paymentConfig.name }} &nbsp;<small>({{ paymentConfig.paymentProviderExternalId }})</small></span
+        >
         <Pill class="tw-text-white" :class="getPaymentConfigStatusDisplayClasses(paymentConfig.status)">
           {{ getPaymentConfigStatusDisplayText(paymentConfig.status) }}
         </Pill>

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

@@ -14,7 +14,7 @@ const PAYMENT_CONFIGS_RESPONSE = [
   {
     id: '32e1c01c-6276-4edb-821d-16f9d8a5e16b',
     name: 'Stripe AUD',
-    paymentProviderExternalId: undefined, // Intentionally undefined
+    paymentProviderExternalId: 'acct_123456789abcdefg', // Intentionally undefined
     paymentProviderImageUrl:
       'https://staging.bcassetcdn.com/assets/brand-page/payment-providers/stripe_wordmark_purple.svg',
     paymentProviderName: 'Stripe',

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

@@ -1 +0,0 @@
-.email-input[data-v-ca06c217]{background-image:url(https://dcstatic.com/images/icons/forms/forms-email-58207f9a5c.svg);background-position:top 50% left .5rem}.password-input[data-v-ca06c217]{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-ca06c217]{padding-left:2.5rem!important}.email-input[data-v-decd2a1c]{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-decd2a1c]{padding-left:2.5rem!important}.password-input[data-v-da12bb42]{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-da12bb42]{padding-left:2.5rem!important}