@designcrowd/fe-shared-lib 1.2.5-byo-3 → 1.2.5-ml-jj-2

package/src/experiences/components/SellDomainNameListModal/i18n/sell-domain-name-list-modal.pt-PT.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameListModal": {
+        "domainSearchHeaderTitle": "Pesquisar um nome de domínio",
+        "domainSearchHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca"
+    }
+}

package/src/experiences/components/SellDomainNameModalApplication/SellDomainNameModalApplication.vue

@@ -1,5 +1,5 @@
 <template>
-  <template v-if="!!this.$slots['header']">
+  <template v-if="!!$slots.header">
     <Modal
       classes="sell-domain-name-list-modal--modal tw-text-black"
       close-on-esc
@@ -49,8 +49,8 @@
         <SellDomainNameSearch
           v-if="visible"
           :is-design-com="isDesignCom"
-          :header-title="headerTitle"
-          :header-subtitle="headerSubtitle"
+          :header-title="headerTitle || domainSearchHeaderTitle"
+          :header-subtitle="headerSubtitle || domainSearchHeaderSubtitle"
           :initial-search-term="initialSearchTerm"
           @onSearch="onSearchDomainName"
           @onSearchTextInputChange="onSearchTextInputChange"
@@ -71,14 +71,12 @@
   </template>
 </template>
 <script>
-import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
+import Modal from '../../../atoms/components/Modal/Modal.vue';
 import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
 import SellDomainNameSearch from '../SellDomainNameSearch/SellDomainNameSearch.vue';
 import SellDomainNameSearchResult from '../SellDomainNameSearchResult/SellDomainNameListSearchResult.vue';
 import Events from '../../constants/event-constants';
-
-const headerSubtitle = 'Buy matching domain name for your brand';
-const headerTitle = 'Search a domain name';
+import { tr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -89,11 +87,11 @@ export default {
   props: {
     headerSubtitle: {
       type: String,
-      default: () => headerSubtitle,
+      default: null,
     },
     headerTitle: {
       type: String,
-      default: () => headerTitle,
+      default: null,
     },
     modelValue: {
       type: String,
@@ -122,6 +120,12 @@ export default {
       default: undefined,
     },
   },
+  setup() {
+    return {
+      domainSearchHeaderTitle: tr('sellDomainNameModalApplication.domainSearchHeaderTitle'),
+      domainSearchHeaderSubtitle: tr('sellDomainNameModalApplication.domainSearchHeaderTitle'),
+    };
+  },
   data: () => ({
     domainNameItems: [],
     userCurrency: {},

package/src/experiences/components/SellDomainNameModalApplication/i18n/sell-domain-name-modal-application.de-DE.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameModalApplication": {
+        "domainSearchHeaderTitle": "Domainname suchen",
+        "domainSearchHeaderSubtitle": "Kaufen Sie eine passende Domain für Ihre Marke"
+    }
+}

package/src/experiences/components/SellDomainNameModalApplication/i18n/sell-domain-name-modal-application.es-ES.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameModalApplication": {
+        "domainSearchHeaderTitle": "Busca un nombre de dominio",
+        "domainSearchHeaderSubtitle": "Compra un nombre de dominio que coincida con tu marca"
+    }
+}

package/src/experiences/components/SellDomainNameModalApplication/i18n/sell-domain-name-modal-application.fr-FR.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameModalApplication": {
+        "domainSearchHeaderTitle": "Rechercher un nom de domaine",
+        "domainSearchHeaderSubtitle": "Achetez un nom de domaine correspondant à votre marque"
+    }
+}

package/src/experiences/components/SellDomainNameModalApplication/i18n/sell-domain-name-modal-application.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameModalApplication": {
+        "domainSearchHeaderTitle": "Search a domain name",
+        "domainSearchHeaderSubtitle": "Buy matching domain name for your brand"
+    }
+}

package/src/experiences/components/SellDomainNameModalApplication/i18n/sell-domain-name-modal-application.pt-PT.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameModalApplication": {
+        "domainSearchHeaderTitle": "Pesquisar um nome de domínio",
+        "domainSearchHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca"
+    }
+}

package/src/experiences/components/SellDomainNameSearch/SellDomainNameSearch.vue

@@ -32,7 +32,7 @@
         <Button
           :classes="searchButtonClasses"
           variant="primary"
-          label="Search"
+          :label="searchButtonLabel"
           :disabled="false"
           @on-click="onSearchBarClick"
         />
@@ -41,15 +41,10 @@
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import TextInput from '../../../../src/atoms/components/TextInput/TextInput.vue';
-
-import {
-  sellDomainNameMinSearchTextLength,
-  sellDomainNameSearchBarLabel,
-  sellDomainNameSearchBarPlaceholder,
-  sellDomainNameSearchBarPreText,
-} from '../../constants/sell-domain-name-constants';
+import Button from '../../../atoms/components/Button/Button.vue';
+import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
+import { sellDomainNameMinSearchTextLength } from '../../constants/sell-domain-name-constants';
+import { tr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -79,14 +74,24 @@ export default {
       type: Boolean,
       required: false,
     },
+    contentOverride: {
+      type: Object,
+      required: false,
+      default: null,
+    },
   },
   emits: ['onSearch', 'onSearchTextInputChange'],
+  setup() {
+    return {
+      searchButtonLabel: tr('sellDomainNameSearch.searchButtonLabel'),
+      searchBarLabel: tr('sellDomainNameSearch.searchBarLabel'),
+      searchBarPlaceholder: tr('sellDomainNameSearch.searchBarPlaceholder'),
+      searchBarPreText: tr('sellDomainNameSearch.searchBarPreText'),
+    };
+  },
   data() {
     return {
-      searchBarLabel: sellDomainNameSearchBarLabel,
-      searchBarPlaceholder: sellDomainNameSearchBarPlaceholder,
       searchText: this.initialSearchTerm ?? '',
-      searchBarPreText: sellDomainNameSearchBarPreText,
     };
   },
   computed: {

package/src/experiences/components/SellDomainNameSearch/i18n/sell-domain-name-search.de-DE.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameSearch": {
+        "searchButtonLabel": "Suche",
+        "searchBarLabel": "Suche",
+        "searchBarPlaceholder": "Domainnamen suchen",
+        "searchBarPreText": "Domainname"
+    }
+}

package/src/experiences/components/SellDomainNameSearch/i18n/sell-domain-name-search.es-ES.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameSearch": {
+        "searchButtonLabel": "Buscar",
+        "searchBarLabel": "Buscar",
+        "searchBarPlaceholder": "Busca nombres de dominio",
+        "searchBarPreText": "Nombre de dominio"
+    }
+}

package/src/experiences/components/SellDomainNameSearch/i18n/sell-domain-name-search.fr-FR.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameSearch": {
+        "searchButtonLabel": "Rechercher",
+        "searchBarLabel": "Rechercher",
+        "searchBarPlaceholder": "Rechercher des noms de domaine",
+        "searchBarPreText": "Nom de domaine"
+    }
+}

package/src/experiences/components/SellDomainNameSearch/i18n/sell-domain-name-search.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameSearch": {
+        "searchButtonLabel": "Search",
+        "searchBarLabel": "Search",
+        "searchBarPlaceholder": "Search domain names",
+        "searchBarPreText": "Domain name"
+    }
+}

package/src/experiences/components/SellDomainNameSearch/i18n/sell-domain-name-search.pt-PT.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameSearch": {
+        "searchButtonLabel": "Pesquisar",
+        "searchBarLabel": "Pesquisar",
+        "searchBarPlaceholder": "Pesquisar nomes de domínio",
+        "searchBarPreText": "Nome de domínio"
+    }
+}

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

@@ -28,20 +28,20 @@
       @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 }}".
+      {{ domainSearchEmptyMessageWithUserDomainName }}
       <br />
-      Try searching with another domain name.
+      {{ searchAnotherDomainMessage }}
     </div>
     <div v-else></div>
   </div>
 </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';
+import { tr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -101,12 +101,23 @@ export default {
       default: undefined,
     },
   },
+  setup() {
+    return {
+      tr,
+      searchAnotherDomainMessage: tr('sellDomainNameListSearchResult.searchAnotherDomainMessage'),
+    };
+  },
   data() {
     return {
       domainNameItemsInView: undefined,
     };
   },
   computed: {
+    domainSearchEmptyMessageWithUserDomainName() {
+      return tr('sellDomainNameListSearchResult.domainSearchEmptyMessage', {
+        domainNameSearchTerm: this.previousSearchText,
+      });
+    },
     shouldShowDomainNameNotFound() {
       return (
         !this.isBusy &&

package/src/experiences/components/SellDomainNameSearchResult/i18n/sell-domain-name-list-search-result.de-DE.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameListSearchResult": {
+        "domainSearchEmptyMessage": "Leider konnten wir keine Domain für \"{domainNameSearchTerm}\" finden.",
+        "searchAnotherDomainMessage": "Versuchen Sie, mit einer anderen Domain zu suchen."
+    }
+}

package/src/experiences/components/SellDomainNameSearchResult/i18n/sell-domain-name-list-search-result.es-ES.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameListSearchResult": {
+        "domainSearchEmptyMessage": "Lo siento, no hemos podido encontrar ningún dominio para \"{domainNameSearchTerm}\".",
+        "searchAnotherDomainMessage": "Prueba a buscar con otro nombre de dominio."
+    }
+}

package/src/experiences/components/SellDomainNameSearchResult/i18n/sell-domain-name-list-search-result.fr-FR.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameListSearchResult": {
+        "domainSearchEmptyMessage": "Désolé, nous n’avons pas trouvé de nom de domaine pour \"{domainNameSearchTerm}\".",
+        "searchAnotherDomainMessage": "Essayez de faire une recherche avec un autre nom de domaine."
+    }
+}

package/src/experiences/components/SellDomainNameSearchResult/i18n/sell-domain-name-list-search-result.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameListSearchResult": {
+        "domainSearchEmptyMessage": "Sorry, we couldn't find any domain for \"{domainNameSearchTerm}\".",
+        "searchAnotherDomainMessage": "Try searching with another domain name."
+    }
+}

package/src/experiences/components/SellDomainNameSearchResult/i18n/sell-domain-name-list-search-result.pt-PT.json

@@ -0,0 +1,6 @@
+{
+    "sellDomainNameListSearchResult": {
+        "domainSearchEmptyMessage": "Não conseguimos encontrar nenhum domínio para \"{domainNameSearchTerm}\".",
+        "searchAnotherDomainMessage": "Experimente pesquisar outro nome de domínio."
+    }
+}

package/src/experiences/components/SellDomainNameWidget/SellDomainNameWidget.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    Buy matching domain name for your brand or connect your existing domain
+    {{ domainSearchOrConnectHeaderSubtitle }}
     <div class="tw-flex tw-flex-col md:tw-flex-row tw-mt-4 tw-mb-4">
       <TextInput
         v-model="searchText"
@@ -18,7 +18,7 @@
       <Button
         classes="tw-w-full tw-mt-2 md:tw-rounded-l-none md:tw-mt-0"
         variant="primary"
-        label="Search"
+        :label="searchButtonLabel"
         :disabled="false"
         @on-click="onSearchBarClick"
       />
@@ -31,21 +31,18 @@
       :domain-name-items="domainNameItems"
       :previous-search-text="previousSearchText"
       :visible="isSearchDomainListModalVisible"
+      :search-button-label="searchButtonLabel"
       @close-modal="onSellDomainNameListCloseModal"
       @search="onSearchDomainName(true)"
     />
   </div>
 </template>
 <script>
-import Button from '../../../../src/atoms/components/Button/Button.vue';
-import TextInput from '../../../../src/atoms/components/TextInput/TextInput.vue';
-
+import { tr } from '../../../useSharedLibTranslate';
+import Button from '../../../atoms/components/Button/Button.vue';
+import TextInput from '../../../atoms/components/TextInput/TextInput.vue';
 import SellDomainNameListModal from '../SellDomainNameListModal/SellDomainNameListModal.vue';
-import {
-  sellDomainNameMinSearchTextLength,
-  sellDomainNameSearchBarLabel,
-  sellDomainNameSearchBarPlaceholder,
-} from '../../constants/sell-domain-name-constants';
+import { sellDomainNameMinSearchTextLength } from '../../constants/sell-domain-name-constants';
 import Events from '../../constants/event-constants';
 import brandCrowdApiClient from '../../clients/brand-crowd-api.client';
 
@@ -76,13 +73,19 @@ export default {
       default: false,
     },
   },
+  setup() {
+    return {
+      searchButtonLabel: tr('sellDomainNameWidget.searchButtonLabel'),
+      searchBarLabel: tr('sellDomainNameWidget.searchBarLabel'),
+      searchBarPlaceholder: tr('sellDomainNameWidget.searchBarPlaceholder'),
+      domainSearchOrConnectHeaderSubtitle: tr('sellDomainNameWidget.domainSearchOrConnectHeaderSubtitle'),
+    };
+  },
   data: () => ({
     domainNameItems: undefined,
     userCurrency: undefined,
     isBusy: false,
     isSearchDomainListModalVisible: false,
-    searchBarLabel: sellDomainNameSearchBarLabel,
-    searchBarPlaceholder: sellDomainNameSearchBarPlaceholder,
     searchText: '',
     previousSearchText: '',
   }),

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.de-DE.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameWidget": {
+        "searchButtonLabel": "Suche",
+        "searchBarLabel": "Suche",
+        "searchBarPlaceholder": "Domainnamen suchen",
+        "domainSearchOrConnectHeaderSubtitle": "Kaufen Sie passende Domains für Ihre Marke oder verknüpfen Sie Ihre bestehende Domain"
+    }
+}

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.es-ES.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameWidget": {
+        "searchButtonLabel": "Buscar",
+        "searchBarLabel": "Buscar",
+        "searchBarPlaceholder": "Busca nombres de dominio",
+        "domainSearchOrConnectHeaderSubtitle": "Compra un nombre de dominio que coincida con tu marca o conecta tu dominio existente"
+    }
+}

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.fr-FR.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameWidget": {
+        "searchButtonLabel": "Rechercher",
+        "searchBarLabel": "Rechercher",
+        "searchBarPlaceholder": "Rechercher des noms de domaine",
+        "domainSearchOrConnectHeaderSubtitle": "Achetez un nom de domaine correspondant à votre marque ou connectez votre domaine existant"
+    }
+}

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameWidget": {
+        "searchButtonLabel": "Search",
+        "searchBarLabel": "Search",
+        "searchBarPlaceholder": "Search domain names",
+        "domainSearchOrConnectHeaderSubtitle": "Buy matching domain name for your brand or connect your existing domain"
+    }
+}

package/src/experiences/components/SellDomainNameWidget/i18n/sell-domain-name-widget.pt-PT.json

@@ -0,0 +1,8 @@
+{
+    "sellDomainNameWidget": {
+        "searchButtonLabel": "Pesquisar",
+        "searchBarLabel": "Pesquisar",
+        "searchBarPlaceholder": "Pesquisar nomes de domínio",
+        "domainSearchOrConnectHeaderSubtitle": "Compre um nome de domínio que corresponda à sua marca ou associe ao domínio que já tem"
+    }
+}

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

@@ -4,13 +4,13 @@
       <HelloBar
         v-if="areColorsTooClose"
         label=""
-        :description="uploadYourLogoTr('colorsWarning')"
+        description="Your text and background colors are too similar. Please choose a more distinct pairing to ensure they create quality designs."
         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">
-          {{ stepCounter }}
+          Step {{ activeStep.number }} of {{ totalNumSteps }}
         </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="uploadYourLogoTr('back')"
+        label="Back"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -89,7 +89,7 @@
       />
       <Button
         v-if="activeStep.index === 2"
-        :label="uploadYourLogoTr('back')"
+        label="Back"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -98,7 +98,7 @@
       />
       <Button
         v-if="activeStep.index === 1"
-        :label="uploadYourLogoTr('continue')"
+        label="Continue"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -108,7 +108,7 @@
       />
       <Button
         v-if="activeStep.index === 2"
-        :label="uploadYourLogoTr('continue')"
+        label="Continue"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -126,7 +126,6 @@ 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: {
@@ -154,11 +153,6 @@ export default {
       required: true,
     },
   },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
   data() {
     return {
       currentStep: null,
@@ -177,8 +171,9 @@ export default {
           index: 1,
           number: this.totalNumSteps - 1,
           active: false,
-          title: uploadYourLogoTr('primaryTextColor'),
-          description: uploadYourLogoTr('primaryTextColorDescription'),
+          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.',
           colourData: this.logoData.logoImageDetails.textColors,
           colours: [],
         },
@@ -186,8 +181,9 @@ export default {
           index: 2,
           number: this.totalNumSteps,
           active: false,
-          title: uploadYourLogoTr('backgroundColor'),
-          description: uploadYourLogoTr('backgroundColorDescription'),
+          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.',
           colourData: this.logoData.logoImageDetails.backgroundColors,
           colours: [],
         },
@@ -206,12 +202,6 @@ 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">{{ uploadYourLogoTr('businessName') }}</h2>
-        <p class="tw-mt-0">{{ uploadYourLogoTr('businessNameDescription') }}</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>
       </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="uploadYourLogoTr('back')"
+        label="Back"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -45,7 +45,7 @@
         @on-click="back"
       />
       <Button
-        :label="uploadYourLogoTr('continue')"
+        label="Continue"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -57,9 +57,8 @@
   </div>
 </template>
 <script>
-import Button from '../../../atoms/components/Button/Button.vue';
+import Button from '../../../../src/atoms/components/Button/Button.vue';
 import trackEvent from '../../helpers/tracking';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
 
 export default {
   components: {
@@ -85,11 +84,6 @@ 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">{{ uploadYourLogoTr('cropYourLogo') }}</h2>
-        <p class="tw-mt-0">{{ uploadYourLogoTr('cropDescription') }}</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>
       </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="uploadYourLogoTr('cancel')"
+        label="Cancel"
         size="large"
         variant="outline"
         container-classes="tw-mx-2"
@@ -35,7 +35,7 @@
         @on-click="cancel"
       />
       <Button
-        :label="uploadYourLogoTr('continue')"
+        label="Continue"
         size="large"
         variant="primary-with-icon"
         icon="chevron-right-wide"
@@ -51,7 +51,6 @@ 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: {
@@ -73,11 +72,6 @@ export default {
       required: true,
     },
   },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
   data() {
     return {
       cropperToolReady: false,