@designcrowd/fe-shared-lib 1.2.11-ast-upsell-8 → 1.2.11-byo-modal-4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.11-ast-upsell-8",
+  "version": "1.2.11-byo-modal-4",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -719,9 +719,6 @@ 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;
 }
@@ -830,10 +827,6 @@ video {
 .theme-brandCrowd .tw-h-auto {
   height: auto;
 }
-.theme-brandCrowd .tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .theme-brandCrowd .tw-h-full {
   height: 100%;
 }
@@ -1020,9 +1013,6 @@ video {
 .theme-brandCrowd .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
-.\!tw-cursor-not-allowed {
-  cursor: not-allowed !important;
-}
 .theme-brandCrowd .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1456,17 +1446,6 @@ 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;
 }
@@ -2108,10 +2087,6 @@ 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,9 +719,6 @@ 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;
 }
@@ -830,10 +827,6 @@ video {
 .theme-brandPage .tw-h-auto {
   height: auto;
 }
-.theme-brandPage .tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .theme-brandPage .tw-h-full {
   height: 100%;
 }
@@ -1020,9 +1013,6 @@ video {
 .theme-brandPage .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
-.\!tw-cursor-not-allowed {
-  cursor: not-allowed !important;
-}
 .theme-brandPage .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1304,17 +1294,6 @@ 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;
 }
@@ -1812,10 +1791,6 @@ 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,9 +719,6 @@ 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;
 }
@@ -830,10 +827,6 @@ video {
 .theme-crazyDomains .tw-h-auto {
   height: auto;
 }
-.theme-crazyDomains .tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .theme-crazyDomains .tw-h-full {
   height: 100%;
 }
@@ -1020,9 +1013,6 @@ video {
 .theme-crazyDomains .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
-.\!tw-cursor-not-allowed {
-  cursor: not-allowed !important;
-}
 .theme-crazyDomains .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1456,17 +1446,6 @@ 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;
 }
@@ -2108,10 +2087,6 @@ 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,9 +719,6 @@ 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;
 }
@@ -830,10 +827,6 @@ video {
 .theme-designCom .tw-h-auto {
   height: auto;
 }
-.theme-designCom .tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .theme-designCom .tw-h-full {
   height: 100%;
 }
@@ -1020,9 +1013,6 @@ video {
 .theme-designCom .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
-.\!tw-cursor-not-allowed {
-  cursor: not-allowed !important;
-}
 .theme-designCom .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1456,17 +1446,6 @@ 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;
 }
@@ -2108,10 +2087,6 @@ 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,9 +719,6 @@ 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;
 }
@@ -830,10 +827,6 @@ video {
 .theme-designCrowd .tw-h-auto {
   height: auto;
 }
-.theme-designCrowd .tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .theme-designCrowd .tw-h-full {
   height: 100%;
 }
@@ -1020,9 +1013,6 @@ video {
 .theme-designCrowd .tw-animate-spin {
   animation: tw-spin 1s linear infinite;
 }
-.\!tw-cursor-not-allowed {
-  cursor: not-allowed !important;
-}
 .theme-designCrowd .tw-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1456,17 +1446,6 @@ 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;
 }
@@ -2108,10 +2087,6 @@ 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/bundles/bundled-translations.json

@@ -48,5 +48,33 @@
     "searchBarLabel": "Search",
     "searchBarPlaceholder": "Search domain names",
     "domainSearchOrConnectHeaderSubtitle": "Buy matching domain name for your brand or connect your existing domain"
+  },
+  "uploadYourLogo": {
+    "uploadYourLogoText": "Upload your logo-",
+    "disclaimerText": "Please ensure you have the right to use any image you upload.-",
+    "generatingDesigns": "Generating Designs...-",
+    "uploadingAndConverting": "Uploading and converting your logo...-",
+    "stepOf": "Step {{current}} of {{total}}-",
+    "uploadError": "Upload Error-",
+    "cancel": "Cancel-",
+    "continue": "Continue-",
+    "back": "Back-",
+    "no": "No-",
+    "yes": "Yes-",
+    "businessName": "Business Name-",
+    "businessNameDescription": "Enter your logo text or business name-",
+    "cropYourLogo": "Crop your logo-",
+    "cropDescription": "Crop your logo design to fit our logo maker canvas-",
+    "logoPreview": "Logo preview-",
+    "logoPreviewDescription": "Your logo looks great! Help us setup your logo by completing the next steps.-",
+    "primaryTextColor": "Primary text color-",
+    "primaryTextColorDescription": "Help us setup your logo by confirming the primary text color. Choose from the available colors or click the plus icon to add another.-",
+    "backgroundColor": "Background color-",
+    "backgroundColorDescription": "Help us setup your logo by confirming the background color. Choose from the available colors or click the plus icon to add another.-",
+    "colorsWarning": "Your text and background colors are too similar. Please choose a more distinct pairing to ensure they create quality designs.-",
+    "exitConfirmationTitle": "Are you sure you want to exit?-",
+    "exitConfirmationDescription": "Your logo upload progress in this session will be lost-",
+    "maxByoFileErrorMessage": "Your file exceeds the maximum size of 25MB. Please choose a smaller file.-",
+    "genericByoErrorMessage": "An unexpected error occured. Please try again.-"
   }
 }

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue

@@ -188,7 +188,7 @@
         </div>
         <div v-else class="tw-font-sans">
           <div v-if="!isCustomDomainActive && !hasPurchasedDomains" class="tw-mb-6 tw-text-left">
-            <!-- <div class="tw-mb-6">
+            <div class="tw-mb-6">
               <SellDomainNameSearchWithResults
                 :is-design-com="isDesignCom"
                 :initial-search-term="searchText"
@@ -205,7 +205,7 @@
               size="small-medium"
               class="tw-text-center"
               @on-click="onViewMore"
-            /> -->
+            />
           </div>
           <div class="tw-px-4 tw-text-center" :class="{ 'lg:tw-px-20': hasPurchasedDomains }">
             <TextCopyField
@@ -230,8 +230,6 @@
               @on-click="onBrandPageUrlClick"
             />
           </div>
-
-          <slot name="upsellContainer" />
         </div>
       </template>
     </Modal>

package/src/experiences/components/UploadYourLogoOnBoarding/LogoBusinessBrandColours.vue

@@ -4,13 +4,13 @@
       <HelloBar
         v-if="areColorsTooClose"
         label=""
-        description="Your text and background colors are too similar. Please choose a more distinct pairing to ensure they create quality designs."
+        :description="uploadYourLogoTr('colorsWarning')"
         variant="warning"
         class="tw-m-5 tw-mt-3"
       />
       <div class="tw-pb-8 tw-px-8 tw-text-center">
         <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
-          Step {{ activeStep.number }} of {{ totalNumSteps }}
+          {{ stepCounter }}
         </p>
         <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">
           {{ activeStep.title }}
@@ -80,7 +80,7 @@
     >
       <Button
         v-if="activeStep.index === 1"
-        label="Back"
+        :label="uploadYourLogoTr('back')"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -89,7 +89,7 @@
       />
       <Button
         v-if="activeStep.index === 2"
-        label="Back"
+        :label="uploadYourLogoTr('back')"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -98,7 +98,7 @@
       />
       <Button
         v-if="activeStep.index === 1"
-        label="Continue"
+        :label="uploadYourLogoTr('continue')"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -108,7 +108,7 @@
       />
       <Button
         v-if="activeStep.index === 2"
-        label="Continue"
+        :label="uploadYourLogoTr('continue')"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -126,6 +126,7 @@ import Icon from '../../../../src/atoms/components/Icon/Icon.vue';
 import HelloBar from '../../../../src/atoms/components/HelloBar/HelloBar.vue';
 import trackEvent from '../../helpers/tracking';
 import hexDiff from '../../helpers/hex-diff';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -153,6 +154,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
   data() {
     return {
       currentStep: null,
@@ -171,9 +177,8 @@ export default {
           index: 1,
           number: this.totalNumSteps - 1,
           active: false,
-          title: 'Primary text color',
-          description:
-            'Help us setup your logo by confirming the primary text color. Choose from the available colors or click the plus icon to add another.',
+          title: uploadYourLogoTr('primaryTextColor'),
+          description: uploadYourLogoTr('primaryTextColorDescription'),
           colourData: this.logoData.logoImageDetails.textColors,
           colours: [],
         },
@@ -181,9 +186,8 @@ export default {
           index: 2,
           number: this.totalNumSteps,
           active: false,
-          title: 'Background color',
-          description:
-            'Help us setup your logo by confirming the background color. Choose from the available colors or click the plus icon to add another.',
+          title: uploadYourLogoTr('backgroundColor'),
+          description: uploadYourLogoTr('backgroundColorDescription'),
           colourData: this.logoData.logoImageDetails.backgroundColors,
           colours: [],
         },
@@ -202,6 +206,12 @@ export default {
         this.activeStep.index === 2 && hexDiff(selectedTextColour.hex, selectedBackgroundColour.hex) !== 'Different'
       );
     },
+    stepCounter() {
+      return this.uploadYourLogoTr('stepOf', {
+        current: this.activeStep.number,
+        total: this.totalNumSteps,
+      });
+    },
   },
   mounted() {
     const keys = Object.keys(this.steps);

package/src/experiences/components/UploadYourLogoOnBoarding/LogoBusinessText.vue

@@ -5,8 +5,8 @@
         <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
           {{ progressLabel }}
         </p>
-        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">Business Name</h2>
-        <p class="tw-mt-0">Enter your logo text or business name</p>
+        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('businessName') }}</h2>
+        <p class="tw-mt-0">{{ uploadYourLogoTr('businessNameDescription') }}</p>
       </div>
 
       <div class="tw-pb-8 tw-px-8">
@@ -37,7 +37,7 @@
       class="tw-fixed tw-rounded-b tw-bottom-0 tw-left-0 tw-z-10 tw-bg-grayscale-200 lg:tw-static tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8 tw-box-border"
     >
       <Button
-        label="Back"
+        :label="uploadYourLogoTr('back')"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -45,7 +45,7 @@
         @on-click="back"
       />
       <Button
-        label="Continue"
+        :label="uploadYourLogoTr('continue')"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -57,8 +57,9 @@
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
 import trackEvent from '../../helpers/tracking';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -84,6 +85,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
   data() {
     return {
       businessText: null,

package/src/experiences/components/UploadYourLogoOnBoarding/LogoCropper.vue

@@ -5,8 +5,8 @@
         <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
           {{ progressLabel }}
         </p>
-        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">Crop your logo</h2>
-        <p class="tw-mt-0">Crop your logo design to fit our logo maker canvas</p>
+        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('cropYourLogo') }}</h2>
+        <p class="tw-mt-0">{{ uploadYourLogoTr('cropDescription') }}</p>
       </div>
 
       <div class="c-byo-cropper__container lg:tw-pb-8 tw-mx-auto" :class="{ 'tw-opacity-0': !cropperToolReady }">
@@ -27,7 +27,7 @@
       class="tw-fixed tw-rounded-b tw-bottom-0 tw-left-0 tw-z-10 tw-bg-grayscale-200 lg:tw-static tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8 tw-box-border"
     >
       <Button
-        label="Cancel"
+        :label="uploadYourLogoTr('cancel')"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -35,7 +35,7 @@
         @on-click="cancel"
       />
       <Button
-        label="Continue"
+        :label="uploadYourLogoTr('continue')"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -51,6 +51,7 @@ import Button from '../../../../src/atoms/components/Button/Button.vue';
 import VueCropper from 'vue-cropperjs';
 
 import trackEvent from '../../helpers/tracking';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -72,6 +73,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
   data() {
     return {
       cropperToolReady: false,

package/src/experiences/components/UploadYourLogoOnBoarding/LogoPreview.vue

@@ -5,8 +5,8 @@
         <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
           {{ progressLabel }}
         </p>
-        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">Logo preview</h2>
-        <p class="tw-mt-0">Your logo looks great! Help us setup your logo by completing the next steps.</p>
+        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('logoPreview') }}</h2>
+        <p class="tw-mt-0">{{ uploadYourLogoTr('logoPreviewDescription') }}</p>
       </div>
 
       <div class="lg:tw-pb-8 lg:tw-px-8">
@@ -24,7 +24,7 @@
       class="tw-fixed tw-rounded-b tw-bottom-0 tw-left-0 tw-z-10 tw-bg-grayscale-200 lg:tw-static tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8 tw-box-border"
     >
       <Button
-        label="Cancel"
+        :label="uploadYourLogoTr('cancel')"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -32,7 +32,7 @@
         @on-click="cancel"
       />
       <Button
-        label="Continue"
+        :label="uploadYourLogoTr('continue')"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -44,8 +44,9 @@
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
 import trackEvent from '../../helpers/tracking';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -66,6 +67,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
   methods: {
     cropImage() {
       if (!this.$refs.preview.complete) return;

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploadError.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tw-w-full">
     <div class="tw-px-8 tw-pb-8">
-      <h2 class="tw-mb-8 tw-text-4xl tw-font-bold">Upload Error</h2>
+      <h2 class="tw-mb-8 tw-text-4xl tw-font-bold">{{ uploadYourLogoTr('uploadError') }}</h2>
       <p class="tw-mt-0 tw-text-grayscale-600 tw-text-base tw-text-center">
         {{ errorMessage }}
       </p>
@@ -11,7 +11,7 @@
       class="tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8"
     >
       <Button
-        label="Cancel"
+        :label="uploadYourLogoTr('cancel')"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -28,7 +28,7 @@
       />
 
       <Button
-        label="Upload your logo"
+        :label="uploadYourLogoTr('uploadYourLogoText')"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -39,7 +39,8 @@
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -52,6 +53,11 @@ export default {
       default: null,
     },
   },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
   methods: {
     cancel() {
       this.$emit('on-cancel');

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploadExitConfirmation.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="tw-w-full">
     <div class="tw-px-8 tw-pb-8">
-      <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">Are you sure you want to exit?</h2>
+      <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('exitConfirmationTitle') }}</h2>
       <p class="tw-mt-0 tw-text-grayscale-600 tw-text-base tw-text-center">
-        Your logo upload progress in this session will be lost
+        {{ uploadYourLogoTr('exitConfirmationDescription') }}
       </p>
     </div>
 
@@ -11,7 +11,7 @@
       class="tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8"
     >
       <Button
-        label="No"
+        :label="uploadYourLogoTr('no')"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -19,7 +19,7 @@
         @on-click="goBack"
       />
       <Button
-        label="Yes"
+        :label="uploadYourLogoTr('yes')"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -31,12 +31,18 @@
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
+import Button from '../../../atoms/components/Button/Button.vue';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
     Button,
   },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
   methods: {
     goBack() {
       this.$emit('on-go-back');

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploader.vue

@@ -1,5 +1,5 @@
 <template>
-  <LogoUploadingLoader loading-text="Uploading and converting your logo..." />
+  <LogoUploadingLoader :loading-text="uploadYourLogoTr('uploadingAndConverting')" />
 </template>
 <script>
 import brandCrowdClient from '../../clients/brand-crowd-api.client';
@@ -7,6 +7,7 @@ import LogoUploadingLoader from './LogoUploadingLoader.vue';
 
 import trackEvent from '../../helpers/tracking';
 import hexDiff from '../../helpers/hex-diff';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -23,6 +24,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
   data() {
     return {
       isRunning: false,

package/src/experiences/components/UploadYourLogoOnBoarding/UploadYourLogoOnBoarding.vue

@@ -12,8 +12,8 @@
           <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
             {{ currentStepProgressLabel }}
           </p>
-          <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">Upload your logo</h2>
-          <p class="tw-mt-0 tw-pb-8">Please ensure you have the right to use any image you upload.</p>
+          <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('uploadYourLogoText') }}</h2>
+          <p class="tw-mt-0 tw-pb-8">{{ uploadYourLogoTr('disclaimerText') }}</p>
           <UploadYourLogoDropzone :is-modal="true" @on-upload-success="onLogoFileChange"> </UploadYourLogoDropzone>
         </div>
 
@@ -70,7 +70,7 @@
           @on-logo-file-change="onLogoFileChange"
         />
 
-        <LogoUploadingLoader v-if="isCurrentlySaving" loading-text="Generating Designs..." />
+        <LogoUploadingLoader v-if="isCurrentlySaving" :loading-text="uploadYourLogoTr('generatingDesigns')" />
 
         <LogoUploadExitConfirmation
           v-if="isAttemptingToExit && currentStep > 1"
@@ -85,6 +85,7 @@
 import brandCrowdClient from '../../clients/brand-crowd-api.client';
 import Errors from '../../constants/error-constants';
 import trackEvent from '../../helpers/tracking';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 import LogoUploadModal from './LogoUploadModal.vue';
 import UploadYourLogoDropzone from '../UploadYourLogoDropzone/UploadYourLogoDropzone.vue';
@@ -127,6 +128,11 @@ export default {
       default: false,
     },
   },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
   data() {
     return {
       currentStep: this.useDropzone ? 0 : 1,
@@ -145,9 +151,9 @@ export default {
     currentStepProgressLabel() {
       if (this.includeDropzoneInModal) {
         const currentStepDisplay = this.currentStep === 0 ? 1 : this.currentStep;
-        return `Step ${currentStepDisplay} of 5`;
+        return this.uploadYourLogoTr('stepOf', { current: currentStepDisplay, total: 5 });
       }
-      return `Step ${this.currentStep - 1} of 4`;
+      return this.uploadYourLogoTr('stepOf', { current: this.currentStep - 1, total: 4 });
     },
     hasError() {
       return !!this.errorMessage;
@@ -175,7 +181,7 @@ export default {
       handler() {
         if (this.logoFile) {
           this.errorMessage =
-            this.logoFile.file.size > Errors.MAX_BYO_FILE_SIZE ? Errors.MAX_BYO_FILE_SIZE_EXCEEDED_MSG : null;
+            this.logoFile.file.size > Errors.MAX_BYO_FILE_SIZE ? uploadYourLogoTr('maxByoFileErrorMessage') : null;
         }
       },
     },
@@ -191,7 +197,7 @@ export default {
       if (typeof err.response?.data?.errorMessage === 'string' && err.response?.data?.errorMessage !== '') {
         this.errorMessage = err.response.data.errorMessage;
       } else {
-        this.errorMessage = Errors.GENERIC_BYO_ERROR;
+        this.errorMessage = uploadYourLogoTr('genericByoErrorMessage');
       }
       this.currentStep = null;
     },

package/src/experiences/components/UploadYourLogoOnBoarding/i18n/upload-your-logo.json

@@ -0,0 +1,30 @@
+{
+  "uploadYourLogo": {
+    "uploadYourLogoText": "Upload your logo-",
+    "disclaimerText": "Please ensure you have the right to use any image you upload.-",
+    "generatingDesigns": "Generating Designs...-",
+    "uploadingAndConverting": "Uploading and converting your logo...-",
+    "stepOf": "Step {{current}} of {{total}}-",
+    "uploadError": "Upload Error-",
+    "cancel": "Cancel-",
+    "continue": "Continue-",
+    "back": "Back-",
+    "no": "No-",
+    "yes": "Yes-",
+    "businessName": "Business Name-",
+    "businessNameDescription": "Enter your logo text or business name-",
+    "cropYourLogo": "Crop your logo-",
+    "cropDescription": "Crop your logo design to fit our logo maker canvas-",
+    "logoPreview": "Logo preview-",
+    "logoPreviewDescription": "Your logo looks great! Help us setup your logo by completing the next steps.-",
+    "primaryTextColor": "Primary text color-",
+    "primaryTextColorDescription": "Help us setup your logo by confirming the primary text color. Choose from the available colors or click the plus icon to add another.-",
+    "backgroundColor": "Background color-",
+    "backgroundColorDescription": "Help us setup your logo by confirming the background color. Choose from the available colors or click the plus icon to add another.-",
+    "colorsWarning": "Your text and background colors are too similar. Please choose a more distinct pairing to ensure they create quality designs.-",
+    "exitConfirmationTitle": "Are you sure you want to exit?-",
+    "exitConfirmationDescription": "Your logo upload progress in this session will be lost-",
+    "maxByoFileErrorMessage": "Your file exceeds the maximum size of 25MB. Please choose a smaller file.-",
+    "genericByoErrorMessage": "An unexpected error occured. Please try again.-"
+  }
+}

package/src/useSharedLibTranslate.js

@@ -35,6 +35,8 @@ const tr = (key, valuesToInterpolate = {}) => {
   return translated;
 };
 
+const uploadYourLogoTr = (key, valuesToInterpolate = {}) => tr(`uploadYourLogo.${key}`, valuesToInterpolate);
+
 const publishBrandPageModalTr = (key, valuesToInterpolate = {}) =>
   tr(`publishBrandPageModal.${key}`, valuesToInterpolate);
 
@@ -70,5 +72,5 @@ export {
   sellDomainNameModalApplicationTr,
   sellDomainNameListModalTr,
   sellDomainNameListTr,
+  uploadYourLogoTr,
 };
-

package/src/experiences/components/UpsellComponents/BusinessCardUpsell.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="tw-m-5">
-    <h3 class="tw-text-center tw-text-2xl tw-font-bold tw-mb-5">
-      {{ digitalBusinessCardProps.makerUrl ? titleVariation2 : title }}
-    </h3>
-    <div class="tw-flex tw-justify-center tw-items-center">
-      <figure
-        class="tw-relative tw-block tw-border tw-border-solid tw-rounded-lg tw-bg-white tw-border-secondary-300 tw-p-1.5 tw-overflow-hidden tw-max-h-full group-hover:tw-scale-105 tw-transition-all tw-h-full group-hover:tw-shadow"
-        style="width: 98px"
-      >
-        <img
-          :src="digitalBusinessCardProps.previewImage"
-          alt=""
-          style="aspect-ratio: 1080 / 1920"
-          loading="lazy"
-          class="tw-w-full tw-rounded-md tw-h-full"
-        />
-        <div
-          class="tw-absolute tw-top-0 tw-left-1/2 tw-transform tw--translate-x-1/2 tw--translate-y-1 tw-mt-2"
-          style="width: 40px"
-        >
-          <img
-            loading="lazy"
-            src="https://bcassetcdn.com/assets/images/carousel/preview-artifacts/carousel-stories-element.png"
-            alt=""
-          />
-        </div>
-      </figure>
-    </div>
-    <div class="tw-text-center tw-mb-5 tw-text-grayscale-600 tw-mt-5">
-      {{ subtitle }}
-    </div>
-    <div v-if="digitalBusinessCardProps.checkoutUrl" class="tw-flex tw-gap-4 tw-mt-5">
-      <Button
-        :full-width="true"
-        variant="info"
-        :label="tryNowLabel"
-        classes="tw-flex-1"
-        :url="digitalBusinessCardProps.makerUrl"
-      />
-      <Button
-        :full-width="true"
-        variant="primary"
-        :label="upgradeNowLabel"
-        classes="tw-flex-1"
-        :url="digitalBusinessCardProps.checkoutUrl"
-      />
-    </div>
-    <div v-else class="tw-flex tw-justify-center tw-items-center tw-mt-5">
-      <Button
-        :full-width="true"
-        variant="success"
-        :label="getStartedLabel"
-        classes="tw-w-full"
-        :url="digitalBusinessCardProps.makerUrl"
-      />
-    </div>
-  </div>
-</template>
-<script>
-import { Button } from '@designcrowd/fe-shared-lib';
-
-export default {
-  name: 'BusinessCardUpsell',
-  components: {
-    Button,
-  },
-  props: {
-    digitalBusinessCardProps: {
-      type: Object,
-      required: true,
-      default: () => ({
-        makerUrl: 'https://example.com/maker',
-        previewImage: 'https://example.com/preview-image.png',
-        checkoutUrl: 'https://example.com/checkout',
-      }),
-    },
-  },
-  data() {
-    const { t, te } = useI18n();
-
-    return {
-      title: te('BusinessCardUpsellTitle')
-        ? t('BusinessCardUpsellTitle')
-        : 'Create your digital business card for free',
-      titleVariation2: te('BusinessCardUpsellTitleVariation2')
-        ? t('BusinessCardUpsellTitleVariation2')
-        : 'Create your digital business card',
-      subtitle: te('BusinessCardUpsellSubtitle')
-        ? t('BusinessCardUpsellSubtitle')
-        : 'Launch a digital business card that drives connections and elevates your brand.',
-      tryNowLabel: te('BusinessCardTryNowLabel') ? t('BusinessCardTryNowLabel') : 'Try Now',
-      upgradeNowLabel: te('BusinessCardUpgradeNowLabel') ? t('BusinessCardUpgradeNowLabel') : 'Upgrade Now',
-      getStartedLabel: te('BusinessCardGetStartedLabel') ? t('BusinessCardGetStartedLabel') : 'Get Started',
-    };
-  },
-};
-</script>
-<i18n locale="en-US" src="../i18n/AssetDownloadUpsellModal.json" />
-<i18n locale="fr-FR" src="../i18n/AssetDownloadUpsellModal.fr-FR.json" />
-<i18n locale="de-DE" src="../i18n/AssetDownloadUpsellModal.de-DE.json" />
-<i18n locale="es-ES" src="../i18n/AssetDownloadUpsellModal.es-ES.json" />
-<i18n locale="pt-PT" src="../i18n/AssetDownloadUpsellModal.pt-PT.json" />

package/src/experiences/components/UpsellComponents/DomainNameUpsell.vue

@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <h3 class="tw-text-center tw-text-2xl tw-font-bold tw-mb-0">
-      {{ domainNameUpsellTitle }}
-    </h3>
-    <div class="tw-text-center tw-mb-8 tw-text-grayscale-600">
-      {{ domainNameUpsellSubtitle }}
-    </div>
-    <SellDomainNameSearchWithResults
-      :initial-search-term="domainProps.initialSearchTerm"
-      :logo-draft-token="domainProps.logoDraftToken"
-      :is-design-com="domainProps.isDesignCom"
-      :currency="() => ({})"
-      @on-search-results-loaded="() => $emit('domain-search-results-loaded')"
-    />
-  </div>
-</template>
-<script>
-import SellDomainNameSearchWithResults from '@designcrowd/fe-shared-lib/src/experiences/components/SellDomainNameSearchWithResults/SellDomainNameSearchWithResults.vue';
-
-export default {
-  name: 'DomainNameUpsell',
-  components: {
-    SellDomainNameSearchWithResults,
-  },
-  props: {
-    domainProps: {
-      type: Object,
-      required: false,
-      default: () => ({
-        initialSearchTerm: 'BrandCrowd',
-        isDesignCom: true,
-        logoDraftToken: '00000000-0000-0000-0000-000000000000',
-      }),
-    },
-  },
-  emits: ['domain-search-results-loaded'],
-  data() {
-    const { t, te } = useI18n();
-
-    return {
-      domainNameUpsellSubtitle: te('domainNameUpsellSubtitle')
-        ? t('domainNameUpsellSubtitle')
-        : 'Buy matching domain name for your brand',
-      domainNameUpsellTitle: te('domainNameUpsellTitle') ? t('domainNameUpsellTitle') : 'Secure a domain name',
-    };
-  },
-};
-</script>
-<i18n locale="en-US" src="../i18n/AssetDownloadUpsellModal.json" />
-<i18n locale="fr-FR" src="../i18n/AssetDownloadUpsellModal.fr-FR.json" />
-<i18n locale="de-DE" src="../i18n/AssetDownloadUpsellModal.de-DE.json" />
-<i18n locale="es-ES" src="../i18n/AssetDownloadUpsellModal.es-ES.json" />
-<i18n locale="pt-PT" src="../i18n/AssetDownloadUpsellModal.pt-PT.json" />

package/src/experiences/components/UpsellComponents/LegalZoomUpsell.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="tw-flex tw-flex-col tw-items-center tw-gap-4">
-    <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
-    <h3 class="tw-text-2xl tw-font-bold tw-text-center tw-whitespace-pre-line">{{ legalZoomProps.title }}</h3>
-    <img :src="legalZoomProps.imageUrl" alt="LegalZoom Upsell" class="tw-h-[40px] tw-mb-4" />
-    <p class="tw-text-grayscale-600 tw-text-md tw-text-center">
-      {{ legalZoomProps.description }}
-    </p>
-    <Button
-      class="tw-mt-4 tw-w-full"
-      variant="primary"
-      size="medium"
-      full-width="true"
-      :label="legalZoomProps.buttonLabel"
-      @click="clickLegalZoomButton"
-    />
-  </div>
-</template>
-<script lang="ts">
-import { Button } from '@designcrowd/fe-shared-lib';
-import type { PropType } from 'vue';
-import { MIXPANEL_EVENT_NAME, MIXPANEL_EVENT_PROPERTY_VALUE } from '../../../../../constants/mp-constants';
-import mpMixin from '../../../../../mixins/mixpanel/mpMixin';
-import type { legalZoomUpsellProps } from './upsellTypes';
-
-export default {
-  name: 'LegalZoomUpsell',
-  components: {
-    Button,
-  },
-  mixins: [mpMixin],
-  props: {
-    legalZoomProps: {
-      type: Object as PropType<legalZoomUpsellProps>,
-      required: true,
-    },
-    mixPanelEventLocation: {
-      type: String,
-      required: false,
-      default: MIXPANEL_EVENT_PROPERTY_VALUE.ASSET_DOWNLOAD.PAGE_SECTION.LOGO_DOWNLOAD_MODAL,
-    },
-  },
-  mounted() {
-    // Track the component mount event for analytics
-    this.pushMixpanelEvent(MIXPANEL_EVENT_NAME.LEGALZOOM_OFFER, {
-      location: this.mixPanelEventLocation,
-    });
-  },
-  methods: {
-    clickLegalZoomButton() {
-      // Track the click event for analytics
-      this.pushMixpanelEvent(MIXPANEL_EVENT_NAME.LEGALZOOM_CLICK, {
-        location: this.mixPanelEventLocation,
-      });
-      window.open(this.legalZoomProps.url, '_blank', 'noopener,noreferrer');
-    },
-  },
-};
-</script>