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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.0-kp-1",
+  "version": "1.2.0-ml-jj-2",
   "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,63 @@ export default {
   component: PublishBrandPageModal,
 };
 
+const locale = 'en-test';
+
+const localePublishBrandPageModalContent = {
+  'en-US': {
+    searchButtonLabel: 'Search',
+    publishBrandPageModalContent: {
+      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',
+    },
+    sellDomainNameListSearchResult: {
+      domainSearchEmptyMessage: 'Sorry, we couldn\'t find any domain for "{domainNameSearchTerm}".',
+      searchAnotherDomainMessage: 'Try searching with another domain name.',
+    },
+  },
+  'en-test': {
+    searchButtonLabel: '++Search',
+    publishBrandPageModalContent: {
+      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',
+    },
+    sellDomainNameListSearchResult: {
+      domainSearchEmptyMessage: '++Sorry, we couldn\'t find any domain for "{domainNameSearchTerm}".',
+      searchAnotherDomainMessage: '++Try searching with another domain name.',
+    },
+  },
+};
+
 export const NotPublishedWithPurchasedDomains = () => {
   return {
     components: {
@@ -15,6 +72,7 @@ export const NotPublishedWithPurchasedDomains = () => {
     data() {
       return {
         domains,
+        content: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {},
@@ -29,6 +87,7 @@ export const NotPublishedWithPurchasedDomains = () => {
         brand-page-base-url="https://brand.site/" 
         radio-value="slug"
         :show-radio-buttons="domains.length > 0"
+        :content="content"
       />
     `,
   };
@@ -51,6 +110,7 @@ export const PublishWithSelectedDomain = () => {
           isRegistrationComplete: false,
           status: 'Active',
         },
+        content: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {
@@ -69,6 +129,7 @@ export const PublishWithSelectedDomain = () => {
         brand-page-base-url="https://brand.site/"
         radio-value="purchased"
         :show-radio-buttons="domains.length > 0"
+        :content="content"
         @radio-button-changed="onRadioButtonChanged"
       />
     `,
@@ -83,6 +144,7 @@ export const SetSlug = () => {
     data() {
       return {
         domains,
+        content: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {},
@@ -97,6 +159,7 @@ export const SetSlug = () => {
         brand-page-base-url="https://brand.site/"
         brand-page-slug='test-slug' 
         :show-radio-buttons="domains.length > 0"
+        :content="content"
       />
     `,
   };
@@ -109,6 +172,7 @@ export const Published = () => {
     data() {
       return {
         domains,
+        content: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {},
@@ -122,6 +186,7 @@ export const Published = () => {
         brand-page-base-url="https://brand.site/" 
         radio-value="slug"
         brand-page-url="https://brand.site/brandname"
+        :content="content"
       />
     `,
   };
@@ -134,6 +199,7 @@ export const PublishedNoDomains = () => {
     data() {
       return {
         domains: [],
+        content: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {},
@@ -149,6 +215,7 @@ export const PublishedNoDomains = () => {
         brand-page-base-url="https://brand.site/" 
         radio-value="slug"
         brand-page-url="https://brand.site/test-slug"
+        :content="content"
       />
   `,
   };
@@ -164,6 +231,7 @@ export const Free = () => {
         domains: [],
         isSearchDomainListModalVisible: false,
         isDesignCom: false,
+        content: localePublishBrandPageModalContent[locale],
       };
     },
     methods: {
@@ -185,6 +253,7 @@ export const Free = () => {
         brand-page-url="https://brand.site/brandname"
         :show-radio-buttons="domains.length > 0"
         :is-search-domain-list-modal-visible="isSearchDomainListModalVisible"
+        :content="content"
         @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"
@@ -195,12 +195,12 @@
                 :currency="userCurrency"
                 :display-result-limit="4"
                 :domain-search-location="sitePublishedModal"
+                :content="content"
                 @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 +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,13 +248,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 +262,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 +400,11 @@ export default {
     brandPageType: {
       type: String,
       required: true,
-      default: false,
+      default: '',
+    },
+    content: {
+      type: Object,
+      required: true,
     },
   },
   emits: [
@@ -415,11 +419,30 @@ export default {
   ],
   data() {
     return {
+      firstTimePublishHeaderLabel: this.content.publishBrandPageModalContent.firstTimePublishHeaderLabel,
+      sitePublishedLabel: this.content.publishBrandPageModalContent.sitePublishedLabel,
+      publishSuccessLabel: this.content.publishBrandPageModalContent.publishSuccessLabel,
+      freePublishCardTitleLabel: this.content.publishBrandPageModalContent.freePublishCardTitleLabel,
+      freePublishCardDescriptionLabel: this.content.publishBrandPageModalContent.freePublishCardDescriptionLabel,
+      slugInputPlaceholderYourNameLabel:
+        this.content.publishBrandPageModalContent.slugInputPlaceholderYourNameLabel,
+      slugInputPlaceholderYourBusinessNameLabel:
+        this.content.publishBrandPageModalContent.slugInputPlaceholderYourBusinessNameLabel,
+      freeDomainLabel: this.content.publishBrandPageModalContent.freeDomainLabel,
+      purchasedDomainLabel: this.content.publishBrandPageModalContent.purchasedDomainLabel,
+      setUrlLabel: this.content.publishBrandPageModalContent.setUrlLabel,
+      publishLabel: this.content.publishBrandPageModalContent.publishLabel,
+      viewMoreDomainLabel: this.content.publishBrandPageModalContent.viewMoreDomainLabel,
+      viewMyWebsiteLabel: this.content.publishBrandPageModalContent.viewMyWebsiteLabel,
+      copyLabel: this.content.publishBrandPageModalContent.copyLabel,
+      copySuccessLabel: this.content.publishBrandPageModalContent.copySuccessLabel,
+      hasAlreadyPurchasedDomainCloseButtonLabel:
+        this.content.publishBrandPageModalContent.hasAlreadyPurchasedDomainCloseButtonLabel,
+      publishedSuccessDescriptionLabel: this.content.publishBrandPageModalContent.publishedSuccessDescriptionLabel,
       DOMAIN_TYPES,
       domainTypeValue: this.radioValue,
       internalSlug: this.brandPageSlug,
       selectedCustomDomain: this.customDomain,
-      headerSubtitle,
       userCurrency: undefined,
       isModalVisible: false,
       isLoading: false,
@@ -458,7 +481,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 +515,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 +535,6 @@ export default {
     },
     onSearchTextChanged(val) {
       this.searchText = val;
-      this.$emit('on-change-search', val);
     },
     onSelectPurchasedDomain(newVal) {
       this.selectedCustomDomain = newVal;
@@ -526,9 +550,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,