@designcrowd/fe-shared-lib 1.5.8 → 1.5.9-dbc-1

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

@@ -1,24 +1,24 @@
-{
-  "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",
-    "websiteFriendlyName" : "Site Web",
-    "digitalBusinessCardFriendlyName" : "Carte professionnelle numérique"
-  }
-}
+{
+  "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",
+    "websiteFriendlyName" : "Site Web",
+    "digitalBusinessCardFriendlyName" : "Carte professionnelle numérique"
+  }
+}

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

@@ -1,24 +1,24 @@
-{
-  "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",
-    "websiteFriendlyName" : "Site Web",
-    "digitalBusinessCardFriendlyName" : "Carte de visite numérique"
-  }
-}
+{
+  "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",
+    "websiteFriendlyName" : "Site Web",
+    "digitalBusinessCardFriendlyName" : "Carte de visite numérique"
+  }
+}

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

@@ -1,24 +1,24 @@
-{
-  "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",
-    "websiteFriendlyName": "Website",
-    "digitalBusinessCardFriendlyName": "Digital Business Card"
-  }
-}
+{
+  "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",
+    "websiteFriendlyName": "Website",
+    "digitalBusinessCardFriendlyName": "Digital Business Card"
+  }
+}

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

@@ -1,24 +1,24 @@
-{
-  "publishBrandPageModal" : {
-    "firstTimePublishHeaderLabel" : "Defina o URL para {{brandPageDisplayName}}",
-    "sitePublishedLabel" : "Site publicado!",
-    "publishSuccessLabel" : "Seu {{brandPageDisplayName}} está ativo! Comece a usar seu link:",
-    "freePublishCardTitleLabel" : "Endereço gratuito",
-    "freePublishCardDescriptionLabel" : "Escolha um endereço gratuito para publicar agora. Você pode editar o URL depois",
-    "slugInputPlaceholderYourNameLabel" : "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 depois",
-    "selectDomainDropdownPlaceholder" : "Selecionar nome de domínio",
-    "websiteFriendlyName" : "Site",
-    "digitalBusinessCardFriendlyName" : "Cartão de visita digital"
-  }
-}
+{
+  "publishBrandPageModal" : {
+    "firstTimePublishHeaderLabel" : "Defina o URL para {{brandPageDisplayName}}",
+    "sitePublishedLabel" : "Site publicado!",
+    "publishSuccessLabel" : "Seu {{brandPageDisplayName}} está ativo! Comece a usar seu link:",
+    "freePublishCardTitleLabel" : "Endereço gratuito",
+    "freePublishCardDescriptionLabel" : "Escolha um endereço gratuito para publicar agora. Você pode editar o URL depois",
+    "slugInputPlaceholderYourNameLabel" : "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 depois",
+    "selectDomainDropdownPlaceholder" : "Selecionar nome de domínio",
+    "websiteFriendlyName" : "Site",
+    "digitalBusinessCardFriendlyName" : "Cartão de visita digital"
+  }
+}

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

@@ -1,24 +1,24 @@
-{
-  "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",
-    "websiteFriendlyName" : "Website",
-    "digitalBusinessCardFriendlyName" : "Cartão de visita digital"
-  }
-}
+{
+  "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",
+    "websiteFriendlyName" : "Website",
+    "digitalBusinessCardFriendlyName" : "Cartão de visita digital"
+  }
+}

package/src/experiences/components/SellDomainNameList/SellDomainNameList.fixtures.js

@@ -1,32 +1,32 @@
-// eslint-disable-next-line import/prefer-default-export
-export const domainNamesFixture = [...Array(3).keys()]
-  .map(() => [
-    {
-      domainName: 'notloic.fr',
-      price: '0.00',
-      currency: 'usd',
-      checkoutUrl: '#',
-    },
-    {
-      domainName: 'shadyloic.fr',
-      price: '18.00',
-      costPrice: '12.00',
-      currency: 'usd',
-      checkoutUrl: '#',
-    },
-    {
-      domainName: 'badloic.fr',
-      price: '18.00',
-      costPrice: '12.00',
-      currency: 'usd',
-      checkoutUrl: '#',
-    },
-    {
-      domainName: 'flirtyloic.fr',
-      price: '18.00',
-      costPrice: '12.00',
-      currency: 'usd',
-      checkoutUrl: '#',
-    },
-  ])
-  .reduce((prev, curr) => prev.concat(curr), []);
+// eslint-disable-next-line import/prefer-default-export
+export const domainNamesFixture = [...Array(3).keys()]
+  .map(() => [
+    {
+      domainName: 'notloic.fr',
+      price: '0.00',
+      currency: 'usd',
+      checkoutUrl: '#',
+    },
+    {
+      domainName: 'shadyloic.fr',
+      price: '18.00',
+      costPrice: '12.00',
+      currency: 'usd',
+      checkoutUrl: '#',
+    },
+    {
+      domainName: 'badloic.fr',
+      price: '18.00',
+      costPrice: '12.00',
+      currency: 'usd',
+      checkoutUrl: '#',
+    },
+    {
+      domainName: 'flirtyloic.fr',
+      price: '18.00',
+      costPrice: '12.00',
+      currency: 'usd',
+      checkoutUrl: '#',
+    },
+  ])
+  .reduce((prev, curr) => prev.concat(curr), []);

package/src/experiences/components/SellDomainNameList/SellDomainNameList.vue

@@ -1,157 +1,157 @@
-<template>
-  <div class="tw-flex tw-w-full tw-flex-col">
-    <ul :class="{ 'tw-ml-4': !hasBorderBoxListStyling }">
-      <li
-        v-for="(item, idx) in domainNameItems"
-        :key="`${item.domainName}-${idx}`"
-        class="tw-flex tw-w-full tw-items-center tw-border-grayscale-500"
-        :class="{
-          'tw-py-3': !hasBorderBoxListStyling,
-          'tw-border-solid tw-border-0 tw-border-t': idx > 0 && !hasBorderBoxListStyling,
-          'tw-border tw-bg-white tw-my-4 tw-py-5 tw-px-4 tw-drop-shadow-sm': hasBorderBoxListStyling,
-          'tw-rounded': isDesignCom && hasBorderBoxListStyling,
-        }"
-      >
-        <div class="tw-grow tw-flex tw-flex-col sm:tw-flex-row tw-justify-start">
-          <div
-            :class="{
-              'tw-text-lg': hasBorderBoxListStyling,
-            }"
-            class="tw-grow tw-font-bold tw-break-all"
-          >
-            {{ item.domainName }}
-          </div>
-          <div v-if="item.costPrice" class="tw-text-xs tw-text-grayscale-600 tw-flex tw-items-center">
-            <span class="tw-mr-2"> {{ costPriceLabel }} </span>
-            <Price
-              class="tw-font-bold"
-              :amount="getCostPrice(item)"
-              :always-show-fraction="true"
-              :currency="currency"
-              fraction="2"
-              :show-abbreviation="false"
-              :suffix="pricePerYearLabel"
-            />
-          </div>
-          <div v-if="!isFree(item) || item.costPrice" class="tw-px-0 tw-mt-4 sm:tw-px-4 sm:tw-mt-0">
-            <Price
-              class="tw-font-bold"
-              :amount="getPrice(item)"
-              :always-show-fraction="true"
-              :currency="currency"
-              fraction="2"
-              :show-abbreviation="false"
-              :suffix="pricePerYearLabel"
-            />
-          </div>
-        </div>
-        <Button
-          :label="getPurchaseLabel(item)"
-          class="c-sell-domain-name-list--button tw-flex tw-justify-end"
-          variant="outline-success"
-          @on-click="onBuyNowClick(item)"
-        />
-      </li>
-    </ul>
-    <Button
-      v-if="shouldShowLoadMoreDomainsButton"
-      :label="loadMoreDomainsButtonText"
-      class="tw-self-center"
-      variant="outline"
-      @on-click="$emit('load-more-domains')"
-    />
-  </div>
-</template>
-<script>
-import Button from '../../../atoms/components/Button/Button.vue';
-import Price from '../../../atoms/components/Price/Price.vue';
-import Events from '../../constants/event-constants';
-import { sellDomainNameListTr, getCurrentLocale } from '../../../useSharedLibTranslate';
-
-export default {
-  components: {
-    Button,
-    Price,
-  },
-  props: {
-    domainNameItems: {
-      type: Array,
-      required: true,
-    },
-    currency: {
-      type: Object,
-      required: true,
-    },
-    hasBorderBoxListStyling: {
-      type: Boolean,
-      default: false,
-    },
-    isUserAuthenticated: {
-      type: Boolean,
-      default: true,
-    },
-    isDesignCom: {
-      type: Boolean,
-      default: false,
-    },
-    shouldShowLoadMoreDomainsButton: {
-      type: Boolean,
-      default: false,
-    },
-    loadMoreDomainsButtonText: {
-      type: String,
-      default: 'Load more domains',
-    },
-    domainSearchLocation: {
-      type: String,
-      default: undefined,
-    },
-  },
-  emits: ['load-more-domains'],
-  setup() {
-    return {
-      freeDomainButtonLabel: sellDomainNameListTr('freeDomainButtonLabel'),
-      buyNowButtonLabel: sellDomainNameListTr('buyNowButtonLabel'),
-      pricePerYearLabel: sellDomainNameListTr('pricePerYearLabel'),
-      costPriceLabel: sellDomainNameListTr('costPriceLabel'),
-    };
-  },
-  methods: {
-    onBuyNowClick(domain) {
-      const request = domain;
-      if (typeof this.domainSearchLocation !== 'undefined') {
-        request.domainSearchLocation = this.domainSearchLocation;
-      }
-      this.$emit('on-buy-now-click');
-      window.dispatchEvent(
-        new CustomEvent(Events.DomainSelectedEvent, {
-          detail: request,
-        }),
-      );
-      if (this.isUserAuthenticated) {
-        const { checkoutUrl } = domain;
-        const url = new URL(checkoutUrl, window.location.origin);
-        url.searchParams.set('locale', getCurrentLocale());
-        window.location.href = url.toString();
-      }
-    },
-    getPrice(domain) {
-      return domain.price / (domain.recurringYears ?? 1);
-    },
-    getCostPrice(domain) {
-      return domain.costPrice / (domain.recurringYears ?? 1);
-    },
-    isFree(domain) {
-      return parseFloat(domain.price) === 0;
-    },
-    getPurchaseLabel(domain) {
-      return this.isFree(domain) ? this.freeDomainButtonLabel : this.buyNowButtonLabel;
-    },
-  },
-};
-</script>
-<style scoped>
-:deep(.c-sell-domain-name-list--button) {
-  min-width: 7rem;
-}
-</style>
+<template>
+  <div class="tw-flex tw-w-full tw-flex-col">
+    <ul :class="{ 'tw-ml-4': !hasBorderBoxListStyling }">
+      <li
+        v-for="(item, idx) in domainNameItems"
+        :key="`${item.domainName}-${idx}`"
+        class="tw-flex tw-w-full tw-items-center tw-border-grayscale-500"
+        :class="{
+          'tw-py-3': !hasBorderBoxListStyling,
+          'tw-border-solid tw-border-0 tw-border-t': idx > 0 && !hasBorderBoxListStyling,
+          'tw-border tw-bg-white tw-my-4 tw-py-5 tw-px-4 tw-drop-shadow-sm': hasBorderBoxListStyling,
+          'tw-rounded': isDesignCom && hasBorderBoxListStyling,
+        }"
+      >
+        <div class="tw-grow tw-flex tw-flex-col sm:tw-flex-row tw-justify-start">
+          <div
+            :class="{
+              'tw-text-lg': hasBorderBoxListStyling,
+            }"
+            class="tw-grow tw-font-bold tw-break-all"
+          >
+            {{ item.domainName }}
+          </div>
+          <div v-if="item.costPrice" class="tw-text-xs tw-text-grayscale-600 tw-flex tw-items-center">
+            <span class="tw-mr-2"> {{ costPriceLabel }} </span>
+            <Price
+              class="tw-font-bold"
+              :amount="getCostPrice(item)"
+              :always-show-fraction="true"
+              :currency="currency"
+              fraction="2"
+              :show-abbreviation="false"
+              :suffix="pricePerYearLabel"
+            />
+          </div>
+          <div v-if="!isFree(item) || item.costPrice" class="tw-px-0 tw-mt-4 sm:tw-px-4 sm:tw-mt-0">
+            <Price
+              class="tw-font-bold"
+              :amount="getPrice(item)"
+              :always-show-fraction="true"
+              :currency="currency"
+              fraction="2"
+              :show-abbreviation="false"
+              :suffix="pricePerYearLabel"
+            />
+          </div>
+        </div>
+        <Button
+          :label="getPurchaseLabel(item)"
+          class="c-sell-domain-name-list--button tw-flex tw-justify-end"
+          variant="outline-success"
+          @on-click="onBuyNowClick(item)"
+        />
+      </li>
+    </ul>
+    <Button
+      v-if="shouldShowLoadMoreDomainsButton"
+      :label="loadMoreDomainsButtonText"
+      class="tw-self-center"
+      variant="outline"
+      @on-click="$emit('load-more-domains')"
+    />
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import Price from '../../../atoms/components/Price/Price.vue';
+import Events from '../../constants/event-constants';
+import { sellDomainNameListTr, getCurrentLocale } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+    Price,
+  },
+  props: {
+    domainNameItems: {
+      type: Array,
+      required: true,
+    },
+    currency: {
+      type: Object,
+      required: true,
+    },
+    hasBorderBoxListStyling: {
+      type: Boolean,
+      default: false,
+    },
+    isUserAuthenticated: {
+      type: Boolean,
+      default: true,
+    },
+    isDesignCom: {
+      type: Boolean,
+      default: false,
+    },
+    shouldShowLoadMoreDomainsButton: {
+      type: Boolean,
+      default: false,
+    },
+    loadMoreDomainsButtonText: {
+      type: String,
+      default: 'Load more domains',
+    },
+    domainSearchLocation: {
+      type: String,
+      default: undefined,
+    },
+  },
+  emits: ['load-more-domains'],
+  setup() {
+    return {
+      freeDomainButtonLabel: sellDomainNameListTr('freeDomainButtonLabel'),
+      buyNowButtonLabel: sellDomainNameListTr('buyNowButtonLabel'),
+      pricePerYearLabel: sellDomainNameListTr('pricePerYearLabel'),
+      costPriceLabel: sellDomainNameListTr('costPriceLabel'),
+    };
+  },
+  methods: {
+    onBuyNowClick(domain) {
+      const request = domain;
+      if (typeof this.domainSearchLocation !== 'undefined') {
+        request.domainSearchLocation = this.domainSearchLocation;
+      }
+      this.$emit('on-buy-now-click');
+      window.dispatchEvent(
+        new CustomEvent(Events.DomainSelectedEvent, {
+          detail: request,
+        }),
+      );
+      if (this.isUserAuthenticated) {
+        const { checkoutUrl } = domain;
+        const url = new URL(checkoutUrl, window.location.origin);
+        url.searchParams.set('locale', getCurrentLocale());
+        window.location.href = url.toString();
+      }
+    },
+    getPrice(domain) {
+      return domain.price / (domain.recurringYears ?? 1);
+    },
+    getCostPrice(domain) {
+      return domain.costPrice / (domain.recurringYears ?? 1);
+    },
+    isFree(domain) {
+      return parseFloat(domain.price) === 0;
+    },
+    getPurchaseLabel(domain) {
+      return this.isFree(domain) ? this.freeDomainButtonLabel : this.buyNowButtonLabel;
+    },
+  },
+};
+</script>
+<style scoped>
+:deep(.c-sell-domain-name-list--button) {
+  min-width: 7rem;
+}
+</style>

package/src/experiences/components/SellDomainNameList/i18n/sell-domain-name-list.de-DE.json

@@ -1,8 +1,8 @@
-{
-  "sellDomainNameList" : {
-    "freeDomainButtonLabel" : "Kostenlose Domain",
-    "buyNowButtonLabel" : "Jetzt kaufen",
-    "pricePerYearLabel" : "/yr",
-    "costPriceLabel" : "Kostenpreis:"
-  }
+{
+  "sellDomainNameList" : {
+    "freeDomainButtonLabel" : "Kostenlose Domain",
+    "buyNowButtonLabel" : "Jetzt kaufen",
+    "pricePerYearLabel" : "/yr",
+    "costPriceLabel" : "Kostenpreis:"
+  }
 }