@designcrowd/fe-shared-lib 1.2.0-kp-1 → 1.2.0-ml-jj-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.0-kp-1",
+  "version": "1.2.0-ml-jj-1",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -719,6 +719,9 @@ video {
 .theme-brandCrowd .tw-ml-auto {
   margin-left: auto;
 }
+.theme-brandCrowd .tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .theme-brandCrowd .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -1450,6 +1453,17 @@ video {
 .theme-brandCrowd .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.theme-brandCrowd .tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.theme-brandCrowd .tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.theme-brandCrowd .tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .theme-brandCrowd .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2027,6 +2041,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 121 172 / var(--tw-bg-opacity));
 }
+.theme-brandCrowd .hover\:tw-bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 209 217 / var(--tw-bg-opacity));
+}
 .theme-brandCrowd .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(245 73 101 / var(--tw-bg-opacity));
@@ -2091,6 +2109,10 @@ video {
   --tw-shadow-color: #0097D7 !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.theme-brandCrowd .hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .theme-brandCrowd .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(194 22 50 / var(--tw-border-opacity));

package/public/css/tailwind-brandPage.css

@@ -719,6 +719,9 @@ video {
 .theme-brandPage .tw-ml-auto {
   margin-left: auto;
 }
+.theme-brandPage .tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .theme-brandPage .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -1298,6 +1301,17 @@ video {
 .theme-brandPage .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.theme-brandPage .tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.theme-brandPage .tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.theme-brandPage .tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .theme-brandPage .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -1795,6 +1809,10 @@ video {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.theme-brandPage .hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .theme-brandPage .focus\:tw-border-grayscale-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));

package/public/css/tailwind-crazyDomains.css

@@ -719,6 +719,9 @@ video {
 .theme-crazyDomains .tw-ml-auto {
   margin-left: auto;
 }
+.theme-crazyDomains .tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .theme-crazyDomains .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -1450,6 +1453,17 @@ video {
 .theme-crazyDomains .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.theme-crazyDomains .tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.theme-crazyDomains .tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.theme-crazyDomains .tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .theme-crazyDomains .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2027,6 +2041,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 129 191 / var(--tw-bg-opacity));
 }
+.theme-crazyDomains .hover\:tw-bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 238 213 / var(--tw-bg-opacity));
+}
 .theme-crazyDomains .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(140 189 89 / var(--tw-bg-opacity));
@@ -2091,6 +2109,10 @@ video {
   --tw-shadow-color: #00A1EF !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.theme-crazyDomains .hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .theme-crazyDomains .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(186 24 79 / var(--tw-border-opacity));

package/public/css/tailwind-designCom.css

@@ -719,6 +719,9 @@ video {
 .theme-designCom .tw-ml-auto {
   margin-left: auto;
 }
+.theme-designCom .tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .theme-designCom .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -1450,6 +1453,17 @@ video {
 .theme-designCom .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.theme-designCom .tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.theme-designCom .tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.theme-designCom .tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .theme-designCom .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2027,6 +2041,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(50 71 197 / var(--tw-bg-opacity));
 }
+.theme-designCom .hover\:tw-bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 238 254 / var(--tw-bg-opacity));
+}
 .theme-designCom .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(121 139 249 / var(--tw-bg-opacity));
@@ -2091,6 +2109,10 @@ video {
   --tw-shadow-color: #3f59f6 !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.theme-designCom .hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .theme-designCom .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(182 58 42 / var(--tw-border-opacity));

package/public/css/tailwind-designCrowd.css

@@ -719,6 +719,9 @@ video {
 .theme-designCrowd .tw-ml-auto {
   margin-left: auto;
 }
+.theme-designCrowd .tw-mr-1 {
+  margin-right: 0.25rem;
+}
 .theme-designCrowd .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -1450,6 +1453,17 @@ video {
 .theme-designCrowd .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
+.theme-designCrowd .tw-bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+.theme-designCrowd .tw-from-\[\#d946ef\] {
+  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.theme-designCrowd .tw-to-\[\#8b5cf6\] {
+  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
+}
 .theme-designCrowd .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2027,6 +2041,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
+.theme-designCrowd .hover\:tw-bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(207 234 251 / var(--tw-bg-opacity));
+}
 .theme-designCrowd .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(65 172 239 / var(--tw-bg-opacity));
@@ -2091,6 +2109,10 @@ video {
   --tw-shadow-color: #1197EB !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
+.theme-designCrowd .hover\:tw-brightness-\[0\.85\]:hover {
+  --tw-brightness: brightness(0.85);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .theme-designCrowd .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(195 50 48 / var(--tw-border-opacity));

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

@@ -7,6 +7,49 @@ export default {
   component: PublishBrandPageModal,
 };
 
+const locale = 'en-test';
+
+const localePublishBrandPageModalContent = {
+  'en-US': {
+    firstTimePublishHeaderLabel: `Set the URL for your Website`,
+    sitePublishedLabel: `Site published!`,
+    publishSuccessLabel: `Your Website 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 Website',
+    copyLabel: 'Copy',
+    copySuccessLabel: 'Copied!',
+    publishedSuccessDescriptionLabel: 'Buy matching domain name for your brand',
+    hasAlreadyPurchasedDomainCloseButtonLabel: 'No thanks, maybe later',
+  },
+  'en-test': {
+    firstTimePublishHeaderLabel: `++Set the URL for your Website`,
+    sitePublishedLabel: `++Site published!`,
+    publishSuccessLabel: `++Your Website 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 Website',
+    copyLabel: '++Copy',
+    copySuccessLabel: '++Copied!',
+    publishedSuccessDescriptionLabel: '++Buy matching domain name for your brand',
+    hasAlreadyPurchasedDomainCloseButtonLabel: '++No thanks, maybe later',
+  },
+};
+
 export const NotPublishedWithPurchasedDomains = () => {
   return {
     components: {
@@ -15,6 +58,7 @@ export const NotPublishedWithPurchasedDomains = () => {
     data() {
       return {
         domains,
+        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {},
@@ -29,6 +73,7 @@ export const NotPublishedWithPurchasedDomains = () => {
         brand-page-base-url="https://brand.site/" 
         radio-value="slug"
         :show-radio-buttons="domains.length > 0"
+        :publishBrandPageModalContent="publishBrandPageModalContent"
       />
     `,
   };
@@ -51,6 +96,7 @@ export const PublishWithSelectedDomain = () => {
           isRegistrationComplete: false,
           status: 'Active',
         },
+        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {
@@ -69,6 +115,7 @@ export const PublishWithSelectedDomain = () => {
         brand-page-base-url="https://brand.site/"
         radio-value="purchased"
         :show-radio-buttons="domains.length > 0"
+        :publishBrandPageModalContent="publishBrandPageModalContent"
         @radio-button-changed="onRadioButtonChanged"
       />
     `,
@@ -83,6 +130,7 @@ export const SetSlug = () => {
     data() {
       return {
         domains,
+        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {},
@@ -97,6 +145,7 @@ export const SetSlug = () => {
         brand-page-base-url="https://brand.site/"
         brand-page-slug='test-slug' 
         :show-radio-buttons="domains.length > 0"
+        :publishBrandPageModalContent="publishBrandPageModalContent"
       />
     `,
   };
@@ -109,6 +158,7 @@ export const Published = () => {
     data() {
       return {
         domains,
+        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {},
@@ -122,6 +172,7 @@ export const Published = () => {
         brand-page-base-url="https://brand.site/" 
         radio-value="slug"
         brand-page-url="https://brand.site/brandname"
+        :publishBrandPageModalContent="publishBrandPageModalContent"
       />
     `,
   };
@@ -134,6 +185,7 @@ export const PublishedNoDomains = () => {
     data() {
       return {
         domains: [],
+        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {},
@@ -149,6 +201,7 @@ export const PublishedNoDomains = () => {
         brand-page-base-url="https://brand.site/" 
         radio-value="slug"
         brand-page-url="https://brand.site/test-slug"
+        :publishBrandPageModalContent="publishBrandPageModalContent"
       />
   `,
   };
@@ -164,6 +217,7 @@ export const Free = () => {
         domains: [],
         isSearchDomainListModalVisible: false,
         isDesignCom: false,
+        publishBrandPageModalContent: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {
@@ -185,6 +239,7 @@ export const Free = () => {
         brand-page-url="https://brand.site/brandname"
         :show-radio-buttons="domains.length > 0"
         :is-search-domain-list-modal-visible="isSearchDomainListModalVisible"
+        :publishBrandPageModalContent="publishBrandPageModalContent"
         @on-hide-domain-modal="onHideDomainListModal"
       >
         <template #recommended>

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,15 +44,15 @@
               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"
-              :imgUrl="iconUrl"
-              title="Free Address"
-              description="Choose a free address to publish now. You can always edit the URL later"
+              :img-url="iconUrl"
+              :title="freePublishCardTitleLabel"
+              :description="freePublishCardDescriptionLabel"
               :is-design-com="isDesignCom"
               :has-search-button="false"
             >
@@ -78,17 +78,17 @@
                     </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"
                     data-test-brand-page-publish-button
                     variant="primary"
                     size="small-medium"
-                    @on-click="onPublish"
                     :full-width="isMobile"
                     :class="{
                       'tw-uppercase': !isDesignCom,
                     }"
+                    @on-click="onPublish"
                   />
                 </div>
               </template>
@@ -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">
@@ -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"
@@ -196,11 +196,10 @@
                 :display-result-limit="4"
                 :domain-search-location="sitePublishedModal"
                 @on-change-search="onSearchTextChanged"
-                @on-buy-now-click="onBuyNowClick"
               />
             </div>
             <Button
-              label="VIEW MORE DOMAINS"
+              :label="viewMoreDomainLabel"
               variant="no-border"
               size="small-medium"
               class="tw-text-center"
@@ -211,11 +210,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,13 +247,13 @@
   </div>
 </template>
 <script>
-import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
+import Modal from '../../../atoms/components/Modal/Modal.vue';
 import PublishBrandPageCard from './PublishBrandPageCard.vue';
-import TextInput from '../../../../src/atoms/components/TextInput/TextInput.vue';
-import Dropdown from '../../../../src/atoms/components/Dropdown/Dropdown.vue';
-import DropdownItem from '../../../../src/atoms/components/Dropdown/DropdownItem.vue';
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import TextCopyField from '../../../../src/atoms/components/TextCopyField/TextCopyField.vue';
+import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
+import Dropdown from '../../../atoms/components/Dropdown/Dropdown.vue';
+import DropdownItem from '../../../atoms/components/Dropdown/DropdownItem.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import TextCopyField from '../../../atoms/components/TextCopyField/TextCopyField.vue';
 
 import SellDomainNameSearchWithResults from '../SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue';
 import SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameListModal.vue';
@@ -260,8 +261,6 @@ import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
 import Events, { sitePublishedModal } from '../../constants/event-constants';
 import mediaQueryMixin from '../../mixins/mediaQueryMixin';
 
-const headerSubtitle = 'Buy matching domain name for your brand';
-
 const DOMAIN_TYPES = {
   slug: 'slug',
   purchased: 'purchased',
@@ -400,7 +399,11 @@ export default {
     brandPageType: {
       type: String,
       required: true,
-      default: false,
+      default: '',
+    },
+    publishBrandPageModalContent: {
+      type: Object,
+      required: true,
     },
   },
   emits: [
@@ -415,11 +418,30 @@ export default {
   ],
   data() {
     return {
+      firstTimePublishHeaderLabel: this.publishBrandPageModalContent.firstTimePublishHeaderLabel,
+      sitePublishedLabel: this.publishBrandPageModalContent.sitePublishedLabel,
+      publishSuccessLabel: this.publishBrandPageModalContent.publishSuccessLabel,
+      freePublishCardTitleLabel: this.publishBrandPageModalContent.freePublishCardTitleLabel,
+      freePublishCardDescriptionLabel: this.publishBrandPageModalContent.freePublishCardDescriptionLabel,
+      slugInputPlaceholderYourNameLabel: this.publishBrandPageModalContent.slugInputPlaceholderYourNameLabel,
+      slugInputPlaceholderYourBusinessNameLabel:
+        this.publishBrandPageModalContent.slugInputPlaceholderYourBusinessNameLabel,
+      freeDomainLabel: this.publishBrandPageModalContent.freeDomainLabel,
+      purchasedDomainLabel: this.publishBrandPageModalContent.purchasedDomainLabel,
+      setUrlLabel: this.publishBrandPageModalContent.setUrlLabel,
+      publishLabel: this.publishBrandPageModalContent.publishLabel,
+      viewMoreDomainLabel: this.publishBrandPageModalContent.viewMoreDomainLabel,
+      viewMyWebsiteLabel: this.publishBrandPageModalContent.viewMyWebsiteLabel,
+      copyLabel: this.publishBrandPageModalContent.copyLabel,
+      copySuccessLabel: this.publishBrandPageModalContent.copySuccessLabel,
+      hasAlreadyPurchasedDomainCloseButtonLabel:
+        this.publishBrandPageModalContent.hasAlreadyPurchasedDomainCloseButtonLabel,
+      publishedSuccessDescriptionLabel: this.publishBrandPageModalContent.publishedSuccessDescriptionLabel,
+
       DOMAIN_TYPES,
       domainTypeValue: this.radioValue,
       internalSlug: this.brandPageSlug,
       selectedCustomDomain: this.customDomain,
-      headerSubtitle,
       userCurrency: undefined,
       isModalVisible: false,
       isLoading: false,
@@ -458,7 +480,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: {
@@ -490,7 +514,7 @@ export default {
       this.$emit('on-hide-domain-modal');
     },
     onCopyUrlClick() {
-      this.$emit('copy-url-clicked');
+      this.$emit('copy-url-click');
     },
     onSlugChanged(e) {
       this.searchText = e;
@@ -510,7 +534,6 @@ export default {
     },
     onSearchTextChanged(val) {
       this.searchText = val;
-      this.$emit('on-change-search', val);
     },
     onSelectPurchasedDomain(newVal) {
       this.selectedCustomDomain = newVal;
@@ -526,9 +549,6 @@ 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/SellDomainNameList/SellDomainNameList.vue

@@ -114,7 +114,6 @@ export default {
       if (typeof this.domainSearchLocation !== 'undefined') {
         request.domainSearchLocation = this.domainSearchLocation;
       }
-      this.$emit('on-buy-now-click');
       window.dispatchEvent(
         new CustomEvent(Events.DomainSelectedEvent, {
           detail: request,

package/src/experiences/components/SellDomainNameSearchResult/SellDomainNameListSearchResult.vue

@@ -25,7 +25,6 @@
       :load-more-domains-button-text="loadMoreDomainsButtonText"
       :domain-search-location="domainSearchLocation"
       @load-more-domains="onLoadMoreDomains"
-      @on-buy-now-click="onBuyNowClick"
     />
     <div v-else-if="shouldShowDomainNameNotFound" class="tw-flex tw-justify-center tw-text-center">
       Sorry, we couldn't find any domain for "{{ previousSearchText }}".
@@ -37,8 +36,8 @@
 </template>
 
 <script>
-import Loader from '../../../../src/atoms/components/Loader/Loader.vue';
-import Picture from '../../../../src/atoms/components/Picture/Picture.vue';
+import Loader from '../../../atoms/components/Loader/Loader.vue';
+import Picture from '../../../atoms/components/Picture/Picture.vue';
 
 import SellDomainNameList from '../SellDomainNameList/SellDomainNameList.vue';
 import Events from '../../constants/event-constants';
@@ -146,9 +145,6 @@ export default {
       window.dispatchEvent(new CustomEvent(Events.DomainLoadMoreEvent));
       this.domainNameItemsInView += this.domainNameItemsPerPage;
     },
-    onBuyNowClick() {
-      this.$emit('on-buy-now-click');
-    },
     resetDomainNameItemsInView() {
       this.domainNameItemsInView = this.domainNameItemsPerPage;
     },

package/src/experiences/components/SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue

@@ -20,7 +20,6 @@
       :domain-name-items-per-page="domainNameItemsPerPage"
       :load-more-domains-button-text="loadMoreDomainsButtonText"
       :domain-search-location="domainSearchLocation"
-      @on-buy-now-click="onBuyNowClick"
     />
   </div>
 </template>
@@ -171,9 +170,6 @@ export default {
         this.isBusy = false;
       }
     },
-    onBuyNowClick() {
-      this.$emit('on-buy-now-click');
-    },
     cleanText(inputText) {
       // In this function, we use the Unicode property escapes \p{L} and \p{N} to match any Unicode letters (characters from various scripts) and Unicode numbers, respectively.
       const cleanedText = inputText.replace(/[^\p{L}\p{N}\-.]+/gu, '');