@designcrowd/fe-shared-lib 1.2.6 → 1.2.7-rr-debugging

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.6",
+  "version": "1.2.7-rr-debugging",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",
@@ -113,4 +113,4 @@
   "overrides": {
     "storybook": "$storybook"
   }
-}
+}

package/src/atoms/components/Price/Price.vue

@@ -53,7 +53,7 @@ export default {
       if (this.isDomainCredit) {
         return 'Domain credit used';
       }
-      
+
       if (!this.amount || this.amount === 0) {
         return 'Free';
       }

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

@@ -1,5 +1,52 @@
 {
-  "publishModal": {
-    "test": "DE-Publish Brand Page"
+  "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"
+  },
+  "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

@@ -1,5 +1,52 @@
 {
-  "publishModal": {
-    "test": "ES-Publish Brand Page"
+  "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"
+  },
+  "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

@@ -1,5 +1,52 @@
 {
-  "publishModal": {
-    "test": "FR-Publish Brand Page"
+  "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"
+  },
+  "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

@@ -1,5 +1,52 @@
 {
-  "publishModal": {
-    "test": "EN-Publish Brand Page"
+  "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"
+  },
+  "sellDomainNameList": {
+    "freeDomainButtonLabel": "Free Domain",
+    "buyNowButtonLabel": "Buy Now",
+    "pricePerYearLabel": "/yr",
+    "costPriceLabel": "Cost Price:"
+  },
+  "sellDomainNameListModal": {
+    "domainSearchHeaderTitle": "Search a domain name",
+    "domainSearchHeaderSubtitle": "Buy matching domain name for your brand"
+  },
+  "sellDomainNameModalApplication": {
+    "domainSearchHeaderTitle": "Search a domain name",
+    "domainSearchHeaderSubtitle": "Buy matching domain name for your brand"
+  },
+  "sellDomainNameSearch": {
+    "searchButtonLabel": "Search",
+    "searchBarLabel": "Search",
+    "searchBarPlaceholder": "Search domain names",
+    "searchBarPreText": "Domain name"
+  },
+  "sellDomainNameListSearchResult": {
+    "domainSearchEmptyMessage": "Sorry, we couldn't find any domain for \"{{domainNameSearchTerm}}\".",
+    "searchAnotherDomainMessage": "Try searching with another domain name."
+  },
+  "sellDomainNameWidget": {
+    "searchButtonLabel": "Search",
+    "searchBarLabel": "Search",
+    "searchBarPlaceholder": "Search domain names",
+    "domainSearchOrConnectHeaderSubtitle": "Buy matching domain name for your brand or connect your existing domain"
   }
 }

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

@@ -1,5 +1,52 @@
 {
-  "publishModal": {
-    "test": "PT-Publish Brand Page"
+  "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"
+  },
+  "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/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];