@designcrowd/fe-shared-lib 1.2.0-ml-jj-9 → 1.2.0-ml-jj-12

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,7 +19,7 @@ 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 { default as useSellDomainContent } from './src/experiences/components/SellDomainNameSearch/useSellDomainContent';
+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';

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.0-ml-jj-9",
+  "version": "1.2.0-ml-jj-12",
   "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",
@@ -76,6 +81,9 @@
     "vue-style-loader": "4.1.3",
     "yargs": "17.7.2"
   },
+  "peerDependencies": {
+    "vue": "3.5.15"
+  },
   "browserslist": [
     "> 1%",
     "last 2 versions",
@@ -108,4 +116,4 @@
   "overrides": {
     "storybook": "$storybook"
   }
-}
+}

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/bundleTranslation.js

@@ -0,0 +1,79 @@
+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) => 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,51 @@
+{
+  "publishBrandPageModal": {
+    "firstTimePublishHeaderLabel": "Legen Sie die URL für Ihre {brandPageDisplayName} fest",
+    "sitePublishedLabel": "Seite veröffentlicht!",
+    "publishSuccessLabel": "Ihre {brandPageDisplayName} ist live! Beginnen Sie mit der Nutzung Ihres Links:",
+    "freePublishCardTitleLabel": "Freie Adresse",
+    "freePublishCardDescriptionLabel": "Wählen Sie jetzt eine kostenlose Adresse zur Veröffentlichung aus. Sie können die URL später jederzeit bearbeiten",
+    "slugInputPlaceholderYourNameLabel": "ihr-name",
+    "slugInputPlaceholderYourBusinessNameLabel": "ihr-firmen-name",
+    "freeDomainLabel": "Kostenlose Domain",
+    "purchasedDomainLabel": "Erworbene Domain",
+    "setUrlLabel": "URL festlegen",
+    "publishLabel": "Veröffentlichen",
+    "viewMoreDomainLabel": "WEITERE DOMAINS ANZEIGEN",
+    "viewMyWebsiteLabel": "{brandPageDisplayName} anzeigen",
+    "copyLabel": "Kopieren",
+    "copySuccessLabel": "Kopiert!",
+    "publishedSuccessDescriptionLabel": "Kaufen Sie eine passende Domain für Ihre Marke",
+    "hasAlreadyPurchasedDomainCloseButtonLabel": "Nein, danke, vielleicht später"
+  },
+  "sellDomainNameList": {
+    "freeDomainButtonLabel": "Kostenlose Domain",
+    "buyNowButtonLabel": "Jetzt kaufen",
+    "pricePerYearLabel": "/yr",
+    "costPriceLabel": "Kostenpreis:"
+  },
+  "sellDomainNameListModal": {
+    "domainSearchHeaderTitle": "Domainname suchen",
+    "domainSearchHeaderSubtitle": "Kaufen Sie eine passende Domain für Ihre Marke"
+  },
+  "sellDomainNameModalApplication": {
+    "domainSearchHeaderTitle": "Domainname suchen",
+    "domainSearchHeaderSubtitle": "Kaufen Sie eine passende Domain für Ihre Marke"
+  },
+  "sellDomainNameSearch": {
+    "searchButtonLabel": "Suche",
+    "searchBarLabel": "Suche",
+    "searchBarPlaceholder": "Domainnamen suchen",
+    "searchBarPreText": "Domainname"
+  },
+  "sellDomainNameListSearchResult": {
+    "domainSearchEmptyMessage": "Leider konnten wir keine Domain für \"{domainNameSearchTerm}\" finden.",
+    "searchAnotherDomainMessage": "Versuchen Sie, mit einer anderen Domain zu suchen."
+  },
+  "sellDomainNameWidget": {
+    "searchButtonLabel": "Suche",
+    "searchBarLabel": "Suche",
+    "searchBarPlaceholder": "Domainnamen suchen",
+    "domainSearchOrConnectHeaderSubtitle": "Kaufen Sie passende Domains für Ihre Marke oder verknüpfen Sie Ihre bestehende Domain"
+  }
+}

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

@@ -0,0 +1,51 @@
+{
+  "publishBrandPageModal": {
+    "firstTimePublishHeaderLabel": "Define la URL de tu sitio {brandPageDisplayName}",
+    "sitePublishedLabel": "¡Sitio publicado!",
+    "publishSuccessLabel": "¡Tu sitio {brandPageDisplayName} está online! Comienza a usar el enlace:",
+    "freePublishCardTitleLabel": "Dirección gratuita",
+    "freePublishCardDescriptionLabel": "Elige una dirección gratuita para publicar ahora. Siempre puedes editar la URL más tarde",
+    "slugInputPlaceholderYourNameLabel": "tu-nombre",
+    "slugInputPlaceholderYourBusinessNameLabel": "nombre-de-tu-negocio",
+    "freeDomainLabel": "Dominio gratis",
+    "purchasedDomainLabel": "Dominio adquirido",
+    "setUrlLabel": "Establece URL",
+    "publishLabel": "Publicar",
+    "viewMoreDomainLabel": "VER MÁS DOMINIOS",
+    "viewMyWebsiteLabel": "Ver sitio {brandPageDisplayName}",
+    "copyLabel": "Copiar",
+    "copySuccessLabel": "¡Copiado!",
+    "publishedSuccessDescriptionLabel": "Compra un nombre de dominio que coincida con tu marca",
+    "hasAlreadyPurchasedDomainCloseButtonLabel": "No gracias, quizás más tarde"
+  },
+  "sellDomainNameList": {
+    "freeDomainButtonLabel": "Dominio gratis",
+    "buyNowButtonLabel": "Comprar ahora",
+    "pricePerYearLabel": "/yr",
+    "costPriceLabel": "Precio de coste:"
+  },
+  "sellDomainNameListModal": {
+    "domainSearchHeaderTitle": "Busca un nombre de dominio",
+    "domainSearchHeaderSubtitle": "Compra un nombre de dominio que coincida con tu marca"
+  },
+  "sellDomainNameModalApplication": {
+    "domainSearchHeaderTitle": "Busca un nombre de dominio",
+    "domainSearchHeaderSubtitle": "Compra un nombre de dominio que coincida con tu marca"
+  },
+  "sellDomainNameSearch": {
+    "searchButtonLabel": "Buscar",
+    "searchBarLabel": "Buscar",
+    "searchBarPlaceholder": "Busca nombres de dominio",
+    "searchBarPreText": "Nombre de dominio"
+  },
+  "sellDomainNameListSearchResult": {
+    "domainSearchEmptyMessage": "Lo siento, no hemos podido encontrar ningún dominio para \"{domainNameSearchTerm}\".",
+    "searchAnotherDomainMessage": "Prueba a buscar con otro nombre de dominio."
+  },
+  "sellDomainNameWidget": {
+    "searchButtonLabel": "Buscar",
+    "searchBarLabel": "Buscar",
+    "searchBarPlaceholder": "Busca nombres de dominio",
+    "domainSearchOrConnectHeaderSubtitle": "Compra un nombre de dominio que coincida con tu marca o conecta tu dominio existente"
+  }
+}

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

@@ -0,0 +1,51 @@
+{
+  "publishBrandPageModal": {
+    "firstTimePublishHeaderLabel": "Définissez l'URL de votre site {brandPageDisplayName}",
+    "sitePublishedLabel": "Site publié !",
+    "publishSuccessLabel": "Votre site {brandPageDisplayName} est en ligne! Commencez à utiliser votre lien:",
+    "freePublishCardTitleLabel": "Adresse libre",
+    "freePublishCardDescriptionLabel": "Choisissez une adresse gratuite pour publier maintenant. Vous pouvez toujours modifier l'URL plus tard",
+    "slugInputPlaceholderYourNameLabel": "your-name",
+    "slugInputPlaceholderYourBusinessNameLabel": "nom-de-votre-entreprise",
+    "freeDomainLabel": "Domaine gratuit",
+    "purchasedDomainLabel": "Domaine acheté",
+    "setUrlLabel": "Définir l'URL",
+    "publishLabel": "Publier",
+    "viewMoreDomainLabel": "VOIR PLUS DE NOMS DE DOMAINE",
+    "viewMyWebsiteLabel": "Voir le site {brandPageDisplayName}",
+    "copyLabel": "Copier",
+    "copySuccessLabel": "Copié!",
+    "publishedSuccessDescriptionLabel": "Achetez un nom de domaine correspondant à votre marque",
+    "hasAlreadyPurchasedDomainCloseButtonLabel": "Non merci, peut-être plus tard"
+  },
+  "sellDomainNameList": {
+    "freeDomainButtonLabel": "Domaine gratuit",
+    "buyNowButtonLabel": "Acheter",
+    "pricePerYearLabel": "/yr",
+    "costPriceLabel": "Prix de revient:"
+  },
+  "sellDomainNameListModal": {
+    "domainSearchHeaderTitle": "Rechercher un nom de domaine",
+    "domainSearchHeaderSubtitle": "Achetez un nom de domaine correspondant à votre marque"
+  },
+  "sellDomainNameModalApplication": {
+    "domainSearchHeaderTitle": "Rechercher un nom de domaine",
+    "domainSearchHeaderSubtitle": "Achetez un nom de domaine correspondant à votre marque"
+  },
+  "sellDomainNameSearch": {
+    "searchButtonLabel": "Rechercher",
+    "searchBarLabel": "Rechercher",
+    "searchBarPlaceholder": "Rechercher des noms de domaine",
+    "searchBarPreText": "Nom de domaine"
+  },
+  "sellDomainNameListSearchResult": {
+    "domainSearchEmptyMessage": "Désolé, nous n’avons pas trouvé de nom de domaine pour \"{domainNameSearchTerm}\".",
+    "searchAnotherDomainMessage": "Essayez de faire une recherche avec un autre nom de domaine."
+  },
+  "sellDomainNameWidget": {
+    "searchButtonLabel": "Rechercher",
+    "searchBarLabel": "Rechercher",
+    "searchBarPlaceholder": "Rechercher des noms de domaine",
+    "domainSearchOrConnectHeaderSubtitle": "Achetez un nom de domaine correspondant à votre marque ou connectez votre domaine existant"
+  }
+}

package/src/bundles/bundled-translations.json

@@ -0,0 +1,51 @@
+{
+  "publishBrandPageModal": {
+    "firstTimePublishHeaderLabel": "Defina o URL do seu {brandPageDisplayName}",
+    "sitePublishedLabel": "Site publicado!",
+    "publishSuccessLabel": "O seu {brandPageDisplayName} está ativo! Comece a usar o seu link:",
+    "freePublishCardTitleLabel": "Endereço gratuito",
+    "freePublishCardDescriptionLabel": "Escolha um endereço gratuito para publicar agora. Pode sempre editar o URL mais tarde",
+    "slugInputPlaceholderYourNameLabel": "o-seu-nome",
+    "slugInputPlaceholderYourBusinessNameLabel": "nome-da-sua-empresa",
+    "freeDomainLabel": "Domínio gratuito",
+    "purchasedDomainLabel": "Domínio comprado",
+    "setUrlLabel": "Definir URL",
+    "publishLabel": "Publicar",
+    "viewMoreDomainLabel": "VER MAIS DOMÍNIOS",
+    "viewMyWebsiteLabel": "Ver {brandPageDisplayName}",
+    "copyLabel": "Copiar",
+    "copySuccessLabel": "Copiado!",
+    "publishedSuccessDescriptionLabel": "Compre um nome de domínio que corresponda à sua marca",
+    "hasAlreadyPurchasedDomainCloseButtonLabel": "Não, obrigado, talvez mais tarde"
+  },
+  "sellDomainNameList": {
+    "freeDomainButtonLabel": "Domínio gratuito",
+    "buyNowButtonLabel": "Comprar Agora",
+    "pricePerYearLabel": "/yr",
+    "costPriceLabel": "Preço de Custo:"
+  },
+  "sellDomainNameListModal": {
+    "domainSearchHeaderTitle": "Pesquisar um nome de domínio",
+    "domainSearchHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca"
+  },
+  "sellDomainNameModalApplication": {
+    "domainSearchHeaderTitle": "Pesquisar um nome de domínio",
+    "domainSearchHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca"
+  },
+  "sellDomainNameSearch": {
+    "searchButtonLabel": "Pesquisar",
+    "searchBarLabel": "Pesquisar",
+    "searchBarPlaceholder": "Pesquisar nomes de domínio",
+    "searchBarPreText": "Nome de domínio"
+  },
+  "sellDomainNameListSearchResult": {
+    "domainSearchEmptyMessage": "Não conseguimos encontrar nenhum domínio para \"{domainNameSearchTerm}\".",
+    "searchAnotherDomainMessage": "Experimente pesquisar outro nome de domínio."
+  },
+  "sellDomainNameWidget": {
+    "searchButtonLabel": "Pesquisar",
+    "searchBarLabel": "Pesquisar",
+    "searchBarPlaceholder": "Pesquisar nomes de domínio",
+    "domainSearchOrConnectHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca ou associe ao domínio que já tem"
+  }
+}

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

@@ -0,0 +1,51 @@
+{
+  "publishBrandPageModal": {
+    "firstTimePublishHeaderLabel": "Defina o URL do seu {brandPageDisplayName}",
+    "sitePublishedLabel": "Site publicado!",
+    "publishSuccessLabel": "O seu {brandPageDisplayName} está ativo! Comece a usar o seu link:",
+    "freePublishCardTitleLabel": "Endereço gratuito",
+    "freePublishCardDescriptionLabel": "Escolha um endereço gratuito para publicar agora. Pode sempre editar o URL mais tarde",
+    "slugInputPlaceholderYourNameLabel": "o-seu-nome",
+    "slugInputPlaceholderYourBusinessNameLabel": "nome-da-sua-empresa",
+    "freeDomainLabel": "Domínio gratuito",
+    "purchasedDomainLabel": "Domínio comprado",
+    "setUrlLabel": "Definir URL",
+    "publishLabel": "Publicar",
+    "viewMoreDomainLabel": "VER MAIS DOMÍNIOS",
+    "viewMyWebsiteLabel": "Ver {brandPageDisplayName}",
+    "copyLabel": "Copiar",
+    "copySuccessLabel": "Copiado!",
+    "publishedSuccessDescriptionLabel": "Compre um nome de domínio que corresponda à sua marca",
+    "hasAlreadyPurchasedDomainCloseButtonLabel": "Não, obrigado, talvez mais tarde"
+  },
+  "sellDomainNameList": {
+    "freeDomainButtonLabel": "Domínio gratuito",
+    "buyNowButtonLabel": "Comprar Agora",
+    "pricePerYearLabel": "/yr",
+    "costPriceLabel": "Preço de Custo:"
+  },
+  "sellDomainNameListModal": {
+    "domainSearchHeaderTitle": "Pesquisar um nome de domínio",
+    "domainSearchHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca"
+  },
+  "sellDomainNameModalApplication": {
+    "domainSearchHeaderTitle": "Pesquisar um nome de domínio",
+    "domainSearchHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca"
+  },
+  "sellDomainNameSearch": {
+    "searchButtonLabel": "Pesquisar",
+    "searchBarLabel": "Pesquisar",
+    "searchBarPlaceholder": "Pesquisar nomes de domínio",
+    "searchBarPreText": "Nome de domínio"
+  },
+  "sellDomainNameListSearchResult": {
+    "domainSearchEmptyMessage": "Não conseguimos encontrar nenhum domínio para \"{domainNameSearchTerm}\".",
+    "searchAnotherDomainMessage": "Experimente pesquisar outro nome de domínio."
+  },
+  "sellDomainNameWidget": {
+    "searchButtonLabel": "Pesquisar",
+    "searchBarLabel": "Pesquisar",
+    "searchBarPlaceholder": "Pesquisar nomes de domínio",
+    "domainSearchOrConnectHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca ou associe ao domínio que já tem"
+  }
+}

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

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue

@@ -32,10 +32,10 @@
               data-test-brand-page-search-button
               variant="primary"
               size="small-medium"
-              @on-click="onClick"
               :class="{
                 'tw-uppercase': !isDesignCom,
               }"
+              @on-click="onClick"
             />
           </div>
         </div>
@@ -53,17 +53,17 @@
           variant="primary"
           size="small-medium"
           :full-width="true"
-          @on-click="onClick"
           :class="{
             'tw-uppercase': !isDesignCom,
           }"
+          @on-click="onClick"
         />
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
 
 const props = defineProps({
   title: {

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue

@@ -197,6 +197,7 @@
                 :domain-search-location="sitePublishedModal"
                 :search-button-label="content.searchButtonLabel"
                 @on-change-search="onSearchTextChanged"
+                @on-buy-now-click="onBuyNowClick"
               />
             </div>
             <Button
@@ -246,7 +247,7 @@
       @close-modal="onSellDomainNameListCloseModal"
       @search="searchDomainName(true)"
     />
-</div>
+  </div>
 </template>
 <script>
 import Modal from '../../../atoms/components/Modal/Modal.vue';
@@ -262,6 +263,7 @@ import SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameLi
 import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
 import Events, { sitePublishedModal } from '../../constants/event-constants';
 import mediaQueryMixin from '../../mixins/mediaQueryMixin';
+import { tr } from '../../../useSharedLibTranslate';
 
 const DOMAIN_TYPES = {
   slug: 'slug',
@@ -403,10 +405,6 @@ export default {
       required: true,
       default: '',
     },
-    content: {
-      type: Object,
-      required: true,
-    },
   },
   emits: [
     'close-modal',
@@ -418,27 +416,27 @@ export default {
     'on-view-more-domains',
     'on-slug-changed',
   ],
+  setup() {
+    return {
+      tr,
+      sitePublishedLabel: tr('publishBrandPageModal.sitePublishedLabel'),
+      freePublishCardTitleLabel: tr('publishBrandPageModal.freePublishCardTitleLabel'),
+      freePublishCardDescriptionLabel: tr('publishBrandPageModal.freePublishCardDescriptionLabel'),
+      slugInputPlaceholderYourNameLabel: tr('publishBrandPageModal.slugInputPlaceholderYourNameLabel'),
+      slugInputPlaceholderYourBusinessNameLabel: tr('publishBrandPageModal.slugInputPlaceholderYourBusinessNameLabel'),
+      freeDomainLabel: tr('publishBrandPageModal.freeDomainLabel'),
+      purchasedDomainLabel: tr('publishBrandPageModal.purchasedDomainLabel'),
+      setUrlLabel: tr('publishBrandPageModal.setUrlLabel'),
+      publishLabel: tr('publishBrandPageModal.publishLabel'),
+      viewMoreDomainLabel: tr('publishBrandPageModal.viewMoreDomainLabel'),
+      copyLabel: tr('publishBrandPageModal.copyLabel'),
+      copySuccessLabel: tr('publishBrandPageModal.copySuccessLabel'),
+      hasAlreadyPurchasedDomainCloseButtonLabel: tr('publishBrandPageModal.hasAlreadyPurchasedDomainCloseButtonLabel'),
+      publishedSuccessDescriptionLabel: tr('publishBrandPageModal.publishedSuccessDescriptionLabel'),
+    };
+  },
   data() {
     return {
-      firstTimePublishHeaderLabel: this.content.publishBrandPageModalContent.firstTimePublishHeaderLabel,
-      sitePublishedLabel: this.content.publishBrandPageModalContent.sitePublishedLabel,
-      publishSuccessLabel: this.content.publishBrandPageModalContent.publishSuccessLabel,
-      freePublishCardTitleLabel: this.content.publishBrandPageModalContent.freePublishCardTitleLabel,
-      freePublishCardDescriptionLabel: this.content.publishBrandPageModalContent.freePublishCardDescriptionLabel,
-      slugInputPlaceholderYourNameLabel: this.content.publishBrandPageModalContent.slugInputPlaceholderYourNameLabel,
-      slugInputPlaceholderYourBusinessNameLabel:
-        this.content.publishBrandPageModalContent.slugInputPlaceholderYourBusinessNameLabel,
-      freeDomainLabel: this.content.publishBrandPageModalContent.freeDomainLabel,
-      purchasedDomainLabel: this.content.publishBrandPageModalContent.purchasedDomainLabel,
-      setUrlLabel: this.content.publishBrandPageModalContent.setUrlLabel,
-      publishLabel: this.content.publishBrandPageModalContent.publishLabel,
-      viewMoreDomainLabel: this.content.publishBrandPageModalContent.viewMoreDomainLabel,
-      viewMyWebsiteLabel: this.content.publishBrandPageModalContent.viewMyWebsiteLabel,
-      copyLabel: this.content.publishBrandPageModalContent.copyLabel,
-      copySuccessLabel: this.content.publishBrandPageModalContent.copySuccessLabel,
-      hasAlreadyPurchasedDomainCloseButtonLabel:
-        this.content.publishBrandPageModalContent.hasAlreadyPurchasedDomainCloseButtonLabel,
-      publishedSuccessDescriptionLabel: this.content.publishBrandPageModalContent.publishedSuccessDescriptionLabel,
       DOMAIN_TYPES,
       domainTypeValue: this.radioValue,
       internalSlug: this.brandPageSlug,
@@ -453,6 +451,21 @@ export default {
     };
   },
   computed: {
+    firstTimePublishHeaderLabel() {
+      return this.tr('publishBrandPageModal.firstTimePublishHeaderLabel', {
+        brandPageDisplayName: this.brandPageDisplayName,
+      });
+    },
+    publishSuccessLabel() {
+      return this.tr('publishBrandPageModal.publishSuccessLabel', {
+        brandPageDisplayName: this.brandPageDisplayName,
+      });
+    },
+    viewMyWebsiteLabel() {
+      return this.tr('publishBrandPageModal.viewMyWebsiteLabel', {
+        brandPageDisplayName: this.brandPageDisplayName,
+      });
+    },
     allowPublish() {
       if (this.domainTypeValue === DOMAIN_TYPES.slug) {
         return this.internalSlug && !this.slugValidationError;
@@ -515,7 +528,7 @@ export default {
       this.$emit('on-hide-domain-modal');
     },
     onCopyUrlClick() {
-      this.$emit('copy-url-click');
+      this.$emit('copy-url-clicked');
     },
     onSlugChanged(e) {
       this.searchText = e;
@@ -535,6 +548,7 @@ export default {
     },
     onSearchTextChanged(val) {
       this.searchText = val;
+      this.$emit('on-change-search', val);
     },
     onSelectPurchasedDomain(newVal) {
       this.selectedCustomDomain = newVal;
@@ -550,6 +564,9 @@ export default {
     onSellDomainNameListCloseModal() {
       this.$emit('on-hide-domain-modal');
     },
+    onBuyNowClick() {
+      this.$emit('on-buy-now-clicked');
+    },
     async searchDomainName(isUserTriggered) {
       this.isLoading = true;
       let searchSlug = '';

package/src/experiences/components/PublishBrandPageModal/i18n/publish-brand-page-modal.de-DE.json

@@ -0,0 +1,21 @@
+{
+    "publishBrandPageModal": {
+        "firstTimePublishHeaderLabel": "Legen Sie die URL für Ihre {brandPageDisplayName} fest",
+        "sitePublishedLabel": "Seite veröffentlicht!",
+        "publishSuccessLabel": "Ihre {brandPageDisplayName} ist live! Beginnen Sie mit der Nutzung Ihres Links:",
+        "freePublishCardTitleLabel": "Freie Adresse",
+        "freePublishCardDescriptionLabel": "Wählen Sie jetzt eine kostenlose Adresse zur Veröffentlichung aus. Sie können die URL später jederzeit bearbeiten",
+        "slugInputPlaceholderYourNameLabel": "ihr-name",
+        "slugInputPlaceholderYourBusinessNameLabel": "ihr-firmen-name",
+        "freeDomainLabel": "Kostenlose Domain",
+        "purchasedDomainLabel": "Erworbene Domain",
+        "setUrlLabel": "URL festlegen",
+        "publishLabel": "Veröffentlichen",
+        "viewMoreDomainLabel": "WEITERE DOMAINS ANZEIGEN",
+        "viewMyWebsiteLabel": "{brandPageDisplayName} anzeigen",
+        "copyLabel": "Kopieren",
+        "copySuccessLabel": "Kopiert!",
+        "publishedSuccessDescriptionLabel": "Kaufen Sie eine passende Domain für Ihre Marke",
+        "hasAlreadyPurchasedDomainCloseButtonLabel": "Nein, danke, vielleicht später"
+    }
+}

package/src/experiences/components/PublishBrandPageModal/i18n/publish-brand-page-modal.es-ES.json

@@ -0,0 +1,21 @@
+{
+    "publishBrandPageModal": {
+        "firstTimePublishHeaderLabel": "Define la URL de tu sitio {brandPageDisplayName}",
+        "sitePublishedLabel": "¡Sitio publicado!",
+        "publishSuccessLabel": "¡Tu sitio {brandPageDisplayName} está online! Comienza a usar el enlace:",
+        "freePublishCardTitleLabel": "Dirección gratuita",
+        "freePublishCardDescriptionLabel": "Elige una dirección gratuita para publicar ahora. Siempre puedes editar la URL más tarde",
+        "slugInputPlaceholderYourNameLabel": "tu-nombre",
+        "slugInputPlaceholderYourBusinessNameLabel": "nombre-de-tu-negocio",
+        "freeDomainLabel": "Dominio gratis",
+        "purchasedDomainLabel": "Dominio adquirido",
+        "setUrlLabel": "Establece URL",
+        "publishLabel": "Publicar",
+        "viewMoreDomainLabel": "VER MÁS DOMINIOS",
+        "viewMyWebsiteLabel": "Ver sitio {brandPageDisplayName}",
+        "copyLabel": "Copiar",
+        "copySuccessLabel": "¡Copiado!",
+        "publishedSuccessDescriptionLabel": "Compra un nombre de dominio que coincida con tu marca",
+        "hasAlreadyPurchasedDomainCloseButtonLabel": "No gracias, quizás más tarde"
+    }
+}