@designcrowd/fe-shared-lib 1.1.11 → 1.1.12-ml-jj-1

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">
@@ -138,6 +138,7 @@
                   :element-classes="{
                     'tw-h-12': true,
                   }"
+                  menu-element-classes="tw-w-full"
                   :disabled="domainTypeValue === DOMAIN_TYPES.slug"
                   :class="{
                     'tw-text-grayscale-600 tw-font-normal': !selectedCustomDomain,
@@ -166,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"
@@ -176,7 +177,7 @@
               @on-click="onPublish"
             />
             <Button
-              label="No thanks, maybe later"
+              :label="hasAlreadyPurchasedDomainCloseButtonLabel"
               variant="no-border"
               size="large"
               class="tw-my-4"
@@ -198,7 +199,7 @@
               />
             </div>
             <Button
-              label="VIEW MORE DOMAINS"
+              :label="viewMoreDomainLabel"
               variant="no-border"
               size="small-medium"
               class="tw-text-center"
@@ -209,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"
@@ -244,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';
@@ -258,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',
@@ -398,7 +399,11 @@ export default {
     brandPageType: {
       type: String,
       required: true,
-      default: false,
+      default: '',
+    },
+    publishBrandPageModalContent: {
+      type: Object,
+      required: true,
     },
   },
   emits: [
@@ -413,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,
@@ -456,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: {

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

@@ -36,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';