@designcrowd/fe-shared-lib 1.2.6 → 1.2.7-ml-291-6

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" method="post" @submit="validate">
+          <form id="resetPassword" ref="resetPasswordForm" 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" />
@@ -25,14 +25,14 @@
               aria-required="true"
               :aria-invalid="!!passwordError"
               autocomplete="new-password"
-              placeholder="New password"
+              :placeholder="newPasswordPlaceholder"
               class="password-input tw-mb-3 tw-h-12 tw-bg-no-repeat tw-w-full tw-rounded tw-shadow-inner tw-outline-none tw-py-4 tw-pl-10-important tw-pr-2 tw-text-grayscale-600 tw-border tw-border-grayscale-500 focus:tw-border-grayscale-700"
               :class="{ 'tw-border-error-500': !!passwordError }"
             />
             <p v-if="!!passwordError" class="tw-text-error-500 tw-text-sm tw-text-left tw-mb-4">
               {{ passwordError }}
             </p>
-            <label for="confirmPassword" class="tw-sr-only"> Confirm Password </label>
+            <label for="confirmPassword" class="tw-sr-only">{{ confirmPasswordLabel }}</label>
             <input
               v-model="confirmPassword"
               name="confirmPassword"
@@ -40,7 +40,7 @@
               aria-required="true"
               :aria-invalid="!!confirmPasswordError"
               autocomplete="off"
-              placeholder="Confirm new password"
+              :placeholder="confirmPasswordPlaceholder"
               class="password-input tw-mb-3 tw-h-12 tw-bg-no-repeat tw-w-full tw-rounded tw-shadow-inner tw-outline-none tw-py-4 tw-pl-10-important tw-pr-2 tw-text-grayscale-600 tw-border tw-border-grayscale-500 focus:tw-border-grayscale-700"
               :class="{ 'tw-border-error-500': !!confirmPasswordError }"
             />
@@ -50,7 +50,7 @@
             <SubmissionButton
               variant="primary"
               size="medium"
-              label="UPDATE PASSWORD"
+              :label="updatePasswordLabel"
               label-size="larger"
               :is-loading="isLoading"
               :disabled="isLoading"
@@ -63,6 +63,7 @@
   </div>
 </template>
 <script>
+import { getCurrentLocale } from '../../../useSharedLibTranslate';
 import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
 import SubmissionButton from './SubmissionButton.vue';
 
@@ -80,7 +81,7 @@ export default {
     description: {
       type: String,
       required: false,
-      default: 'Enter and confirm your new password',
+      default: undefined,
     },
     userName: {
       type: String,
@@ -104,6 +105,16 @@ export default {
       required: false,
       default: undefined,
     },
+    submitAction: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    resetPasswordContent: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -112,10 +123,28 @@ export default {
       confirmPassword: undefined,
       passwordError: undefined,
       confirmPasswordError: undefined,
+
+      newPasswordLabel: this.resetPasswordContent?.newPasswordLabel ?? 'New Password',
+      newPasswordPlaceholder: this.resetPasswordContent?.newPasswordPlaceholder ?? 'New password',
+      confirmPasswordLabel: this.resetPasswordContent?.confirmPasswordLabel ?? 'Confirm Password',
+      confirmPasswordPlaceholder: this.resetPasswordContent?.confirmPasswordPlaceholder ?? 'Confirm new password',
+      updatePasswordLabel: this.resetPasswordContent?.updatePasswordLabel ?? 'UPDATE PASSWORD',
+      passwordRequiredError: this.resetPasswordContent?.passwordRequiredError ?? 'Please enter a password',
+      passwordsDoNotMatchError: this.resetPasswordContent?.passwordsDoNotMatchError ?? 'Passwords do not match',
     };
   },
+  computed: {
+    currentLocale() {
+      return getCurrentLocale();
+    },
+  },
   methods: {
     validate(e) {
+      if (this.submitAction) {
+        const url = new URL(this.submitAction, window.location.origin);
+        url.searchParams.set('locale', this.currentLocale);
+        this.$refs.resetPasswordForm.action = url.toString();
+      }
       if (this.password && this.password === this.confirmPassword) {
         this.isLoading = true;
         return true;
@@ -127,9 +156,9 @@ export default {
       this.confirmPasswordError = undefined;
 
       if (!this.password) {
-        this.passwordError = 'Please enter a password';
+        this.passwordError = this.passwordRequiredError;
       } else if (!this.confirmPassword || this.password !== this.confirmPassword) {
-        this.confirmPasswordError = 'Passwords do not match';
+        this.confirmPasswordError = this.passwordsDoNotMatchError;
       }
 
       e.preventDefault();

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

@@ -12,10 +12,10 @@
                 {{ title }}
               </p>
               <span
-                v-if="showLabel"
+                v-if="pillLabel"
                 class="tw-text-xs tw-h-4 tw-w-fit tw-text-primary-500 tw-border tw-border-solid tw-border-primary-500 tw-rounded-full tw-px-2 tw-font-sans tw-uppercase"
               >
-                Recommended
+                {{ pillLabel }}
               </span>
             </div>
             <p class="tw-mt-2 md:tw-mt-0 tw-text-grayscale-600 tw-text-sm">
@@ -27,15 +27,15 @@
           </div>
           <div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 desktop-cta">
             <Button
-              label="Search"
+              :label="searchButtonLabel"
               class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
               data-test-brand-page-search-button
               variant="primary"
               size="small-medium"
-              @on-click="onClick"
               :class="{
                 'tw-uppercase': !isDesignCom,
               }"
+              @on-click="onClick"
             />
           </div>
         </div>
@@ -47,23 +47,23 @@
       </div>
       <div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 mobile-cta tw-mt-2">
         <Button
-          label="Search"
+          :label="searchButtonLabel"
           class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
           data-test-brand-page-search-button
           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: {
@@ -86,9 +86,13 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  showLabel: {
-    type: Boolean,
-    default: false,
+  searchButtonLabel: {
+    type: String,
+    default: () => 'Search',
+  },
+  pillLabel: {
+    type: String,
+    default: null,
   },
 });
 

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

@@ -1,12 +1,19 @@
 import Card from './PublishBrandPageCard.vue';
 import PublishBrandPageModal from './PublishBrandPageModal.vue';
 import { domains } from './__fixtures__/data';
+import { setSharedLibLocaleAsync } from '../../../useSharedLibTranslate';
 
 export default {
   title: 'Components/PublishBrandPageModal',
   component: PublishBrandPageModal,
 };
 
+const locale = 'en-US';
+
+const loadTranslationAsync = async () => {
+  await setSharedLibLocaleAsync(locale);
+};
+
 export const NotPublishedWithPurchasedDomains = () => {
   return {
     components: {
@@ -15,6 +22,7 @@ export const NotPublishedWithPurchasedDomains = () => {
     data() {
       return {
         domains,
+        show: false,
       };
     },
     methods: {},
@@ -26,7 +34,7 @@ export const NotPublishedWithPurchasedDomains = () => {
         should-publish
         :domains="domains"
         brand-page-display-name='Website' 
-        brand-page-base-url="https://brand.site/" 
+        brand-page-base-url="https://brand.site" 
         radio-value="slug"
         :show-radio-buttons="domains.length > 0"
       />
@@ -34,6 +42,8 @@ export const NotPublishedWithPurchasedDomains = () => {
   };
 };
 
+NotPublishedWithPurchasedDomains.loaders = [loadTranslationAsync];
+
 export const PublishWithSelectedDomain = () => {
   return {
     components: {
@@ -66,7 +76,7 @@ export const PublishWithSelectedDomain = () => {
         :domains="domains"
         :custom-domain="customDomain"
         brand-page-display-name='Website'
-        brand-page-base-url="https://brand.site/"
+        brand-page-base-url="https://brand.site"
         radio-value="purchased"
         :show-radio-buttons="domains.length > 0"
         @radio-button-changed="onRadioButtonChanged"
@@ -75,6 +85,8 @@ export const PublishWithSelectedDomain = () => {
   };
 };
 
+PublishWithSelectedDomain.loaders = [loadTranslationAsync];
+
 export const SetSlug = () => {
   return {
     components: {
@@ -94,13 +106,16 @@ export const SetSlug = () => {
         should-publish
         :domains="domains"
         brand-page-display-name='Website'
-        brand-page-base-url="https://brand.site/"
+        brand-page-base-url="https://brand.site"
         brand-page-slug='test-slug' 
         :show-radio-buttons="domains.length > 0"
       />
     `,
   };
 };
+
+SetSlug.loaders = [loadTranslationAsync];
+
 export const Published = () => {
   return {
     components: {
@@ -119,13 +134,16 @@ export const Published = () => {
         should-publish
         :domains="domains"
         brand-page-display-name='Website' 
-        brand-page-base-url="https://brand.site/" 
+        brand-page-base-url="https://brand.site" 
         radio-value="slug"
         brand-page-url="https://brand.site/brandname"
       />
     `,
   };
 };
+
+Published.loaders = [loadTranslationAsync];
+
 export const PublishedNoDomains = () => {
   return {
     components: {
@@ -146,13 +164,16 @@ export const PublishedNoDomains = () => {
         :domains="domains"
         brand-page-display-name='Website' 
         brand-page-slug='test-slug' 
-        brand-page-base-url="https://brand.site/" 
+        brand-page-base-url="https://brand.site" 
         radio-value="slug"
         brand-page-url="https://brand.site/test-slug"
       />
   `,
   };
 };
+
+PublishedNoDomains.loaders = [loadTranslationAsync];
+
 export const Free = () => {
   return {
     components: {
@@ -180,7 +201,7 @@ export const Free = () => {
         should-publish
         :domains="domains"
         brand-page-display-name='Website' 
-        brand-page-base-url="https://brand.site/" 
+        brand-page-base-url="https://brand.site" 
         radio-value="slug"
         brand-page-url="https://brand.site/brandname"
         :show-radio-buttons="domains.length > 0"
@@ -201,3 +222,5 @@ export const Free = () => {
     `,
   };
 };
+
+Free.loaders = [loadTranslationAsync];

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

@@ -11,15 +11,15 @@
     >
       <template #header>
         <div v-if="isNotPublished || isSlugEditMode" class="tw-text-center tw-font-bold tw-mb-8 tw-mt-8 tw-text-4xl">
-          <span>Set the URL for your {{ brandPageDisplayName }}</span>
+          <span>{{ firstTimePublishHeaderLabel }}</span>
         </div>
         <div v-if="isPublished && !isSlugEditMode" class="tw-text-center tw-font-bold tw-mb-8 tw-mt-8">
-          <p class="tw-font-bold tw-text-black tw-mb-2 tw-text-4xl">Site published!</p>
+          <p class="tw-font-bold tw-text-black tw-mb-2 tw-text-4xl">{{ sitePublishedLabel }}</p>
           <p v-if="hasPurchasedDomains || isCustomDomainActive" class="tw-text-grayscale-600 tw-mb-8">
-            Your {{ brandPageDisplayName }} is live! Start using your link:
+            {{ publishSuccessLabel }}
           </p>
           <p v-else class="tw-text-grayscale-600 tw-mb-8 tw-font-normal">
-            {{ headerSubtitle }}
+            {{ publishedSuccessDescriptionLabel }}
           </p>
         </div>
       </template>
@@ -44,25 +44,25 @@
               for="domain-type"
               class="tw-font-sans tw-w-full tw-text-grayscale-600 tw-text-sm tw-cursor-pointer tw-ml-2"
             >
-              <span class="tw-inline-block tw-rounded-full">Free domain</span>
+              <span class="tw-inline-block tw-rounded-full">{{ freeDomainLabel }}</span>
             </label>
           </div>
           <div v-if="isNotPublished || isSlugEditMode" class="tw-mt-4">
             <PublishBrandPageCard
               v-if="!hasPurchasedDomains"
               :img-url="iconUrl"
-              title="Free Address"
-              description="Choose a free address to publish now. You can always edit the URL later"
+              :title="freePublishCardTitleLabel"
+              :description="freePublishCardDescriptionLabel"
               :is-design-com="isDesignCom"
               :has-search-button="false"
             >
               <template #slug>
                 <div class="tw-flex tw-flex-col md:tw-flex-row tw-justify-between">
-                  <div>
+                  <div class="tw-grow md:tw-mr-2">
                     <TextInput
                       v-model="internalSlug"
-                      element-classes="tw-mb-0 !tw-rounded-l-none tw-text-md tw-w-1/3"
-                      :prefix-text="`${brandPageBaseUrl}/`"
+                      element-classes="tw-mb-0 !tw-rounded-l-none tw-text-md"
+                      :prefix-text="`${brandPageBaseUrlWithoutHttps}/`"
                       :error="!!slugValidationError"
                       :disabled="isInputEnabled"
                       :placeholder="getPlaceHolder"
@@ -78,9 +78,9 @@
                     </div>
                   </div>
                   <Button
-                    label="Publish"
+                    :label="publishLabel"
                     :disabled="isPublishingDisabled"
-                    class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
+                    class="tw-flex tw-items-center tw-justify-center tw-mt-2 md:tw-mt-0 tw-font-bold tw-transition-colors tw-duration-300"
                     data-test-brand-page-publish-button
                     variant="primary"
                     size="small-medium"
@@ -97,7 +97,7 @@
               <TextInput
                 v-model="internalSlug"
                 element-classes="tw-mb-0 !tw-rounded-l-none tw-text-lg"
-                :prefix-text="`${brandPageBaseUrl}/`"
+                :prefix-text="`${brandPageBaseUrlWithoutHttps}/`"
                 :error="!!slugValidationError"
                 :disabled="isInputEnabled"
                 :placeholder="getPlaceHolder"
@@ -128,7 +128,7 @@
                   for="domain-type"
                   class="tw-font-sans tw-w-full tw-text-grayscale-600 tw-text-sm tw-cursor-pointer tw-ml-2"
                 >
-                  <span class="tw-inline-block tw-rounded-full">Purchased domain</span>
+                  <span class="tw-inline-block tw-rounded-full">{{ purchasedDomainLabel }}</span>
                 </label>
               </div>
               <div class="tw-mt-4 domain-dropdown">
@@ -143,7 +143,7 @@
                   :class="{
                     'tw-text-grayscale-600 tw-font-normal': !selectedCustomDomain,
                   }"
-                  :title="(selectedCustomDomain && selectedCustomDomain.domainName) || 'Select domain name'"
+                  :title="(selectedCustomDomain && selectedCustomDomain.domainName) || selectDomainDropdownPlaceholder"
                 >
                   <DropdownItem
                     v-for="purchasedDomain of domains"
@@ -167,7 +167,7 @@
             :style="isMobile ? 'padding-left: 1.5rem; padding-right: 1.5rem;' : ''"
           >
             <Button
-              :label="isSlugEditMode ? 'Set URL' : 'Publish'"
+              :label="isSlugEditMode ? setUrlLabel : publishLabel"
               :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
               icon="chevron-right-wide"
               :disabled="isPublishingDisabled"
@@ -177,7 +177,7 @@
               @on-click="onPublish"
             />
             <Button
-              label="No thanks, maybe later"
+              :label="hasAlreadyPurchasedDomainCloseButtonLabel"
               variant="no-border"
               size="large"
               class="tw-my-4"
@@ -200,7 +200,7 @@
               />
             </div>
             <Button
-              label="VIEW MORE DOMAINS"
+              :label="viewMoreDomainLabel"
               variant="no-border"
               size="small-medium"
               class="tw-text-center"
@@ -211,11 +211,13 @@
             <TextCopyField
               button-variant="secondary"
               :text="brandPageUrl"
+              :default-copy-button-text="copyLabel"
+              :copied-button-text="copySuccessLabel"
               data-test-brand-page-copy-input
               @on-click="onCopyUrlClick"
             />
             <Button
-              :label="`View ${brandPageDisplayName}`"
+              :label="viewMyWebsiteLabel"
               :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
               icon="chevron-right-wide"
               size="medium"
@@ -246,7 +248,6 @@
   </div>
 </template>
 <script>
-import { computed } from 'vue';
 import Modal from '../../../atoms/components/Modal/Modal.vue';
 import PublishBrandPageCard from './PublishBrandPageCard.vue';
 import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
@@ -260,9 +261,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 headerSubtitle = 'Buy matching domain name for your brand';
+import { publishBrandPageModalTr } from '../../../useSharedLibTranslate';
 
 const DOMAIN_TYPES = {
   slug: 'slug',
@@ -417,8 +416,22 @@ export default {
   ],
   setup() {
     return {
-      tr,
-      testMessage: computed(() => tr('publishModal.test')),
+      publishBrandPageModalTr,
+      sitePublishedLabel: publishBrandPageModalTr('sitePublishedLabel'),
+      freePublishCardTitleLabel: publishBrandPageModalTr('freePublishCardTitleLabel'),
+      freePublishCardDescriptionLabel: publishBrandPageModalTr('freePublishCardDescriptionLabel'),
+      slugInputPlaceholderYourNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourNameLabel'),
+      slugInputPlaceholderYourBusinessNameLabel: publishBrandPageModalTr('slugInputPlaceholderYourBusinessNameLabel'),
+      freeDomainLabel: publishBrandPageModalTr('freeDomainLabel'),
+      purchasedDomainLabel: publishBrandPageModalTr('purchasedDomainLabel'),
+      setUrlLabel: publishBrandPageModalTr('setUrlLabel'),
+      publishLabel: publishBrandPageModalTr('publishLabel'),
+      viewMoreDomainLabel: publishBrandPageModalTr('viewMoreDomainLabel'),
+      copyLabel: publishBrandPageModalTr('copyLabel'),
+      copySuccessLabel: publishBrandPageModalTr('copySuccessLabel'),
+      hasAlreadyPurchasedDomainCloseButtonLabel: publishBrandPageModalTr('hasAlreadyPurchasedDomainCloseButtonLabel'),
+      publishedSuccessDescriptionLabel: publishBrandPageModalTr('publishedSuccessDescriptionLabel'),
+      selectDomainDropdownPlaceholder: publishBrandPageModalTr('selectDomainDropdownPlaceholder'),
     };
   },
   data() {
@@ -427,7 +440,6 @@ export default {
       domainTypeValue: this.radioValue,
       internalSlug: this.brandPageSlug,
       selectedCustomDomain: this.customDomain,
-      headerSubtitle,
       userCurrency: undefined,
       isModalVisible: false,
       isLoading: false,
@@ -438,6 +450,24 @@ export default {
     };
   },
   computed: {
+    brandPageBaseUrlWithoutHttps() {
+      return this.brandPageBaseUrl.replace('https://', '');
+    },
+    firstTimePublishHeaderLabel() {
+      return this.publishBrandPageModalTr('firstTimePublishHeaderLabel', {
+        brandPageDisplayName: this.brandPageDisplayName,
+      });
+    },
+    publishSuccessLabel() {
+      return this.publishBrandPageModalTr('publishSuccessLabel', {
+        brandPageDisplayName: this.brandPageDisplayName,
+      });
+    },
+    viewMyWebsiteLabel() {
+      return this.publishBrandPageModalTr('viewMyWebsiteLabel', {
+        brandPageDisplayName: this.brandPageDisplayName,
+      });
+    },
     allowPublish() {
       if (this.domainTypeValue === DOMAIN_TYPES.slug) {
         return this.internalSlug && !this.slugValidationError;
@@ -466,7 +496,9 @@ export default {
       return !this.allowPublish || this.isPublishing;
     },
     getPlaceHolder() {
-      return this.brandPageType === 'brandContact' ? 'your-name' : 'your-business-name';
+      return this.brandPageType === 'brandContact'
+        ? this.slugInputPlaceholderYourNameLabel
+        : this.slugInputPlaceholderYourBusinessNameLabel;
     },
   },
   watch: {

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

@@ -0,0 +1,22 @@
+{
+  "publishBrandPageModal" : {
+    "firstTimePublishHeaderLabel" : "Legen Sie die URL für {{brandPageDisplayName}} fest",
+    "sitePublishedLabel" : "Seite veröffentlicht!",
+    "publishSuccessLabel" : "Ihr {{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",
+    "selectDomainDropdownPlaceholder" : "Domain auswählen"
+  }
+}

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

@@ -0,0 +1,22 @@
+{
+  "publishBrandPageModal" : {
+    "firstTimePublishHeaderLabel" : "Establece la URL para {{brandPageDisplayName}}",
+    "sitePublishedLabel" : "¡Sitio publicado!",
+    "publishSuccessLabel" : "¡Tu {{brandPageDisplayName}} está activo! Comienza a usar tu 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 {{brandPageDisplayName}}",
+    "copyLabel" : "Copiar",
+    "copySuccessLabel" : "¡Copiado!",
+    "publishedSuccessDescriptionLabel" : "Compra un nombre de dominio que coincida con tu marca",
+    "hasAlreadyPurchasedDomainCloseButtonLabel" : "No gracias, quizás más tarde",
+    "selectDomainDropdownPlaceholder" : "Selecciona un nombre de dominio"
+  }
+}

package/src/experiences/components/PublishBrandPageModal/i18n/publish-brand-page-modal.fr-FR.json

@@ -0,0 +1,22 @@
+{
+  "publishBrandPageModal" : {
+    "firstTimePublishHeaderLabel" : "Définissez l'URL pour {{brandPageDisplayName}}",
+    "sitePublishedLabel" : "Site publié !",
+    "publishSuccessLabel" : "Votre {{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 {{brandPageDisplayName}}",
+    "copyLabel" : "Copier",
+    "copySuccessLabel" : "Copié !",
+    "publishedSuccessDescriptionLabel" : "Achetez un nom de domaine correspondant à votre marque",
+    "hasAlreadyPurchasedDomainCloseButtonLabel" : "Non merci, peut-être plus tard",
+    "selectDomainDropdownPlaceholder" : "Sélectionner un nom de domaine"
+  }
+}

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

@@ -0,0 +1,22 @@
+{
+    "publishBrandPageModal": {
+        "firstTimePublishHeaderLabel": "Set the URL for {{brandPageDisplayName}}",
+        "sitePublishedLabel": "Site published!",
+        "publishSuccessLabel": "Your {{brandPageDisplayName}} is live! Start using your link:",
+        "freePublishCardTitleLabel": "Free Address",
+        "freePublishCardDescriptionLabel": "Choose a free address to publish now. You can always edit the URL later",
+        "slugInputPlaceholderYourNameLabel": "your-name",
+        "slugInputPlaceholderYourBusinessNameLabel": "your-business-name",
+        "freeDomainLabel": "Free domain",
+        "purchasedDomainLabel": "Purchased domain",
+        "setUrlLabel": "Set URL",
+        "publishLabel": "Publish",
+        "viewMoreDomainLabel": "VIEW MORE DOMAINS",
+        "viewMyWebsiteLabel": "View {{brandPageDisplayName}}",
+        "copyLabel": "Copy",
+        "copySuccessLabel": "Copied!",
+        "publishedSuccessDescriptionLabel": "Buy matching domain name for your brand",
+        "hasAlreadyPurchasedDomainCloseButtonLabel": "No thanks, maybe later",
+        "selectDomainDropdownPlaceholder": "Select domain name"
+    }
+}

package/src/experiences/components/PublishBrandPageModal/i18n/publish-brand-page-modal.pt-PT.json

@@ -0,0 +1,22 @@
+{
+  "publishBrandPageModal" : {
+    "firstTimePublishHeaderLabel" : "Defina o URL para {{brandPageDisplayName}}",
+    "sitePublishedLabel" : "Site publicado!",
+    "publishSuccessLabel" : "A sua página {{brandPageDisplayName}} está ativa! Comece a utilizar o 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",
+    "selectDomainDropdownPlaceholder" : "Selecionar nome de domínio"
+  }
+}