@designcrowd/fe-shared-lib 1.2.2-pl-1 → 1.2.3-ast-disabled-1

package/Dockerfile

@@ -26,6 +26,8 @@ COPY . .
 
 COPY .npmignore ./
 
+RUN npm run bundle-translation
+
 RUN mkdir artifacts
 RUN npm publish || touch artifacts/npm_publish_failed
 RUN cp package.json artifacts/

package/index.js

@@ -19,6 +19,8 @@ export { default as SellDomainNameWidget } from './src/experiences/components/Se
 export { default as PublishBrandPageModal } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue';
 export { default as PublishBrandPageCard } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue';
 
+export { setLocaleAsync, tr } from './src/useSharedLibTranslate';
+
 export { default as Button } from './src/atoms/components/Button/Button.vue';
 export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';
 export { default as Dropdown } from './src/atoms/components/Dropdown/Dropdown.vue';

package/nodemon.translation.json

@@ -0,0 +1,7 @@
+{
+    "exec": "npm run bundle-translation",
+    "ext": ".json",
+    "watch": [
+        "./src"
+    ]
+}

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.2-pl-1",
+  "version": "1.2.3-ast-disabled-1",
   "scripts": {
-    "start": "npm run storybook",
+    "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",
     "storybook": "export NODE_ENV=development && npm run storybook:css && npm run storybook:themes && storybook dev -p 6006 public",
     "build:css": "node ./tailwind.build.js",
     "build:storybook": "mkdir -p public && mkdir -p public/css && npm run storybook:css && storybook build -c .storybook -o .storybook-static && cp -R ./public/css .storybook-static/",
+    "bundle-translation": "node ./src/bundleTranslation.js",
+    "watch:translation": "nodemon --config nodemon.translation.json",
     "storybook:themes": "node ./tailwind.themes.js",
     "storybook:css": "node ./tailwind.build.js --storybook",
     "lint": "NODE_ENV=production eslint ./src/ --ext .ts,.js,.vue",
@@ -26,6 +28,7 @@
     "cropperjs": "1.6.1",
     "dropzone-vue3": "1.0.2",
     "fs-extra": "11.2.0",
+    "i18next": "25.2.1",
     "lodash.throttle": "4.1.1",
     "postcss-loader": "8.1.0",
     "swiper": "11.0.6",
@@ -62,6 +65,8 @@
     "eslint-plugin-vue": "9.21.1",
     "husky": "9.0.10",
     "lint-staged": "15.2.1",
+    "nodemon": "3.0.3",
+    "npm-run-all": "4.1.5",
     "postcss": "8.4.33",
     "postcss-cli": "11.0.0",
     "postcss-import": "16.0.0",
@@ -108,4 +113,4 @@
   "overrides": {
     "storybook": "$storybook"
   }
-}
+}

package/public/css/tailwind-brandCrowd.css

@@ -719,6 +719,9 @@ video {
 .theme-brandCrowd .tw-ml-auto {
   margin-left: auto;
 }
+.theme-brandCrowd .tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .theme-brandCrowd .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -1017,6 +1020,9 @@ video {
 .theme-brandCrowd .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-brandCrowd .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1450,6 +1456,17 @@ video {
 .theme-brandCrowd .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.theme-brandCrowd .tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.theme-brandCrowd .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);
+}
+.theme-brandCrowd .tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .theme-brandCrowd .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2091,6 +2108,10 @@ video {
   --tw-shadow-color: #0097D7 !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.theme-brandCrowd .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);
+}
 .theme-brandCrowd .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(194 22 50 / var(--tw-border-opacity));

package/public/css/tailwind-brandPage.css

@@ -719,6 +719,9 @@ video {
 .theme-brandPage .tw-ml-auto {
   margin-left: auto;
 }
+.theme-brandPage .tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .theme-brandPage .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -1017,6 +1020,9 @@ video {
 .theme-brandPage .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-brandPage .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1298,6 +1304,17 @@ video {
 .theme-brandPage .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.theme-brandPage .tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.theme-brandPage .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);
+}
+.theme-brandPage .tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .theme-brandPage .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -1795,6 +1812,10 @@ video {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.theme-brandPage .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);
+}
 .theme-brandPage .focus\:tw-border-grayscale-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));

package/public/css/tailwind-crazyDomains.css

@@ -719,6 +719,9 @@ video {
 .theme-crazyDomains .tw-ml-auto {
   margin-left: auto;
 }
+.theme-crazyDomains .tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .theme-crazyDomains .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -1017,6 +1020,9 @@ video {
 .theme-crazyDomains .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-crazyDomains .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1450,6 +1456,17 @@ video {
 .theme-crazyDomains .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.theme-crazyDomains .tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.theme-crazyDomains .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);
+}
+.theme-crazyDomains .tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .theme-crazyDomains .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2091,6 +2108,10 @@ video {
   --tw-shadow-color: #00A1EF !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.theme-crazyDomains .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);
+}
 .theme-crazyDomains .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(186 24 79 / var(--tw-border-opacity));

package/public/css/tailwind-designCom.css

@@ -719,6 +719,9 @@ video {
 .theme-designCom .tw-ml-auto {
   margin-left: auto;
 }
+.theme-designCom .tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .theme-designCom .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -1017,6 +1020,9 @@ video {
 .theme-designCom .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-designCom .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1450,6 +1456,17 @@ video {
 .theme-designCom .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.theme-designCom .tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.theme-designCom .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);
+}
+.theme-designCom .tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .theme-designCom .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2091,6 +2108,10 @@ video {
   --tw-shadow-color: #3f59f6 !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.theme-designCom .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);
+}
 .theme-designCom .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(182 58 42 / var(--tw-border-opacity));

package/public/css/tailwind-designCrowd.css

@@ -719,6 +719,9 @@ video {
 .theme-designCrowd .tw-ml-auto {
   margin-left: auto;
 }
+.theme-designCrowd .tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .theme-designCrowd .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -1017,6 +1020,9 @@ video {
 .theme-designCrowd .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
+.\!tw-cursor-not-allowed {
+  cursor: not-allowed !important;
+}
 .theme-designCrowd .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1450,6 +1456,17 @@ video {
 .theme-designCrowd .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.theme-designCrowd .tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.theme-designCrowd .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);
+}
+.theme-designCrowd .tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .theme-designCrowd .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2091,6 +2108,10 @@ video {
   --tw-shadow-color: #1197EB !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.theme-designCrowd .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);
+}
 .theme-designCrowd .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(195 50 48 / var(--tw-border-opacity));

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

@@ -21,6 +21,7 @@ export const Sample = () => {
         {
           label: 'Medium',
           value: 'medium',
+          disabled: true,
         },
         {
           label: 'Large',

package/src/atoms/components/ButtonGroup/ButtonGroup.vue

@@ -10,11 +10,14 @@
       <button
         class="button-group-item tw-text-xs tw-shadow-inner tw-w-full tw-py-2"
         :class="{
-          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
-          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+          'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+          'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
         }"
+        :disabled="option.disabled"
         v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
-        @click="$emit('on-select', option)"
+        @click="!option.disabled && $emit('on-select', option)"
       >
         <slot name="content" :option="option"></slot>
       </button>
@@ -35,8 +38,10 @@
       <button
         v-if="variant === 'icon'"
         :class="{
-          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
-          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+          'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+          'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
           'tw-px-2': !option.iconViewBox,
           'tw-px-px':
             option.iconViewBox && !option.isSelected && !option.iconName.includes('display-style') && btnStyleVariant, // TODO - move style logic to computed prop
@@ -45,9 +50,10 @@
           'tw-px-0 tw-py-0': option.iconName.includes('display-style') || btnStyleVariant === 'compressed',
         }"
         :style="option.iconName.includes('display-style') ? { lineHeight: 0 } : {}"
+        :disabled="option.disabled"
         class="tw-text-xs button-group-icon-button tw-shadow-inner"
         v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
-        @click="$emit('on-select', option)"
+        @click="!option.disabled && $emit('on-select', option)"
       >
         <div
           :class="{
@@ -67,12 +73,15 @@
       <button
         v-else
         :class="{
-          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
-          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+          '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+          '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+          'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+          'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
         }"
+        :disabled="option.disabled"
         class="tw-text-xs button-group-image-button tw-shadow-inner"
         v-bind="option.dataAttribute ? { [option.dataAttribute]: '' } : {}"
-        @click="$emit('on-select', option)"
+        @click="!option.disabled && $emit('on-select', option)"
       >
         <img :src="option.src" :alt="option.alt" class="tw-w-full tw-h-full" />
       </button>
@@ -90,11 +99,14 @@
       :key="`button-${option.value}`"
       :class="{
         'tw-ml-2': idx > 0 && !columns,
-        '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected,
-        '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !option.isSelected,
+        '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': option.isSelected && !option.disabled,
+        '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': !option.isSelected && !option.disabled,
+        'hover:!tw-shadow-info-500': !option.isSelected && !option.disabled,
+        'tw-opacity-50 !tw-cursor-not-allowed !tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200': option.disabled,
       }"
+      :disabled="option.disabled"
       class="tw-text-xs button-group-button tw-shadow-inner"
-      @click="$emit('on-select', option)"
+      @click="!option.disabled && $emit('on-select', option)"
     >
       {{ option.label }}
     </button>

package/src/atoms/components/FormControl/FormControl.mixin.js

@@ -97,11 +97,20 @@ export default {
       required: false,
       default: false,
     },
+    requiredMessage: {
+      type: String,
+      required: false,
+      default: 'Please fill in this field.',
+    },
   },
   methods: {
-    input(modelValue) {
+    input(modelValue, event) {
       this.$emit('update:modelValue', modelValue);
       this.$emit('input', modelValue);
+
+      if (event?.target) {
+        event.target.setCustomValidity('');
+      }
     },
     keyup(modelValue) {
       this.$emit('keyup', modelValue);

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

@@ -20,8 +20,8 @@
       aria-labelledby="title"
       aria-describedby="desc"
     >
-      <title :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
-      <desc :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
+      <title v-if="title" :id="`${name}-${id}-title`" lang="en">{{ title }}</title>
+      <desc v-if="description" :id="`${name}-${id}-desc`" lang="en">{{ description }}</desc>
       <component :is="`icon-${iconName}`"></component>
     </svg>
   </div>
@@ -799,7 +799,7 @@ export default {
       return css || null;
     },
     title() {
-      return this.altText || `${this.titleCase(this.name)}`;
+      return this.altText;
     },
     description() {
       return `${this.title} Icon`;

package/src/atoms/components/TextInput/TextInput.vue

@@ -73,7 +73,8 @@
             },
           ]"
           class="tw-text-grayscale-600 tw-box-border tw-w-full tw-text-base tw-px-4 tw-border tw-border-solid focus:tw-outline-none tw-transition-colors tw-duration-300 tw-ease-out tw-shadow-inner"
-          @input.stop="input($event.target.value)"
+          @invalid="setValidationMessage"
+          @input.stop="input($event.target.value, $event)"
           @keyup.stop="keyup($event.target.value)"
           @keydown.stop="keydown($event.target.value, $event)"
           @focus="focus($event.target.value)"
@@ -151,6 +152,9 @@ export default {
         this.$emit('on-clear-confirmation');
       }
     },
+    setValidationMessage(event) {
+      event.target.setCustomValidity(this.requiredMessage);
+    },
   },
 };
 </script>

package/src/bundleTranslation.js

@@ -0,0 +1,89 @@
+const path = require('path');
+const fs = require('fs');
+
+const localeSuffixes = ['.de-DE', '.fr-FR', '.es-ES', '.pt-PT', ''];
+
+const findTranslationFiles = (dir, localeString) => {
+  const files = [];
+  const entries = fs.readdirSync(dir);
+
+  entries.forEach((entry) => {
+    const fullPath = path.join(dir, entry);
+
+    if (fs.statSync(fullPath).isDirectory()) {
+      if (entry === 'i18n') {
+        files.push(
+          ...fs
+            .readdirSync(fullPath)
+            .filter((file) => {
+              if (localeString === '') {
+                return (
+                  !file.includes('.de-DE') &&
+                  !file.includes('.fr-FR') &&
+                  !file.includes('.es-ES') &&
+                  !file.includes('.pt-PT')
+                );
+              }
+              return file.endsWith(`${localeString}.json`);
+            })
+            .map((file) => path.join(fullPath, file)),
+        );
+      } else {
+        // Recursively find translation files in nested folders
+        files.push(...findTranslationFiles(fullPath, localeString));
+      }
+    }
+  });
+
+  return files;
+};
+
+const bundle = () => {
+  console.log('Bundling translations...', __dirname);
+
+  const bundlesDir = path.resolve(__dirname, './bundles');
+
+  console.log('bundlesDir', bundlesDir);
+
+  if (!fs.existsSync(bundlesDir)) {
+    console.log('Creating bundles dir');
+    fs.mkdirSync(bundlesDir);
+  }
+
+  const rootDir = path.resolve(__dirname, '../src');
+
+  localeSuffixes.forEach((locale) => {
+    const outputFile = path.resolve(bundlesDir, `bundled-translations${locale}.json`);
+
+    const translationFiles = findTranslationFiles(rootDir, locale);
+
+    console.log(
+      `Found ${translationFiles.length} translation files in BrandPage for file prefix: ${`bundled-translations${locale}.json`}`,
+    );
+
+    const translations = {};
+
+    translationFiles.forEach((file) => {
+      const fileContent = fs.readFileSync(file, 'utf-8');
+
+      Object.assign(translations, JSON.parse(fileContent));
+    });
+
+    console.log(`Writing bundled translations to: ${outputFile}`);
+
+    try {
+      const potentiallyExistingFile = fs.readFileSync(outputFile, 'utf-8');
+
+      if (potentiallyExistingFile === JSON.stringify(translations, null, 2)) {
+        console.log('Current translations are the same as the existing file - skipping write');
+      } else {
+        fs.writeFileSync(outputFile, JSON.stringify(translations, null, 2));
+      }
+    } catch (e) {
+      console.log("Translation file doesn't exist, creating new one");
+      fs.writeFileSync(outputFile, JSON.stringify(translations, null, 2));
+    }
+  });
+};
+
+bundle();

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

@@ -0,0 +1,5 @@
+{
+  "publishModal": {
+    "test": "DE-Publish Brand Page"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "publishModal": {
+    "test": "ES-Publish Brand Page"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "publishModal": {
+    "test": "FR-Publish Brand Page"
+  }
+}

package/src/bundles/bundled-translations.json

@@ -0,0 +1,5 @@
+{
+  "publishModal": {
+    "test": "EN-Publish Brand Page"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "publishModal": {
+    "test": "PT-Publish Brand Page"
+  }
+}

package/src/experiences/components/AuthFlow/ResetPassword.vue

@@ -13,7 +13,7 @@
             {{ title }}
           </h2>
           <p class="tw-mb-8 tw-text-grayscale-600">{{ description }}</p>
-          <form id="resetPassword" ref="resetPasswordForm" method="post" @submit="validate">
+          <form id="resetPassword" method="post" @submit="validate">
             <input name="__RequestVerificationToken" type="hidden" :value="antiForgeryToken" />
             <input name="userName" type="hidden" :value="userName" />
             <input name="resetPasswordToken" type="hidden" :value="resetPasswordToken" />
@@ -104,11 +104,6 @@ export default {
       required: false,
       default: undefined,
     },
-    submitAction: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
   },
   data() {
     return {
@@ -121,9 +116,6 @@ export default {
   },
   methods: {
     validate(e) {
-      if (this.submitAction) {
-        this.$refs.resetPasswordForm.action = this.submitAction;
-      }
       if (this.password && this.password === this.confirmPassword) {
         this.isLoading = true;
         return true;

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

@@ -1,5 +1,5 @@
-import brandPageApiClient from '../../clients/brand-page-api.client';
 import vClickOutside from 'click-outside-vue3';
+import brandPageApiClient from '../../clients/brand-page-api.client';
 
 export const paymentConfigStatuses = Object.freeze({
   active: 'Active',