@designcrowd/fe-shared-lib 1.0.8-ml-82-1d → 1.0.8-ml-i18n-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.0.8-ml-82-1d",
+  "version": "1.0.8-ml-i18n-1",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",
@@ -17,6 +17,7 @@
     "docker:publish": "docker build . --build-arg NPM_TOKEN=$NPM_TOKEN"
   },
   "dependencies": {
+    "@nuxtjs/i18n": "^9.2.1",
     "autoprefixer": "10.4.17",
     "axios": "1.6.7",
     "core-js": "3.35.1",

package/src/experiences/components/AuthFlow/AuthLegal.vue

@@ -1,5 +1,8 @@
 <template>
-  <p class="tw-text-center tw-text-sm tw-mt-4 tw-mb-2 tw-text-grayscale-600">
+  <div v-if="hasTermsAndConditionsSlot && !isPartnerTheme">
+    <slot name="termsAndConditions" />
+  </div>
+  <p v-else class="tw-text-center tw-text-sm tw-mt-4 tw-mb-2 tw-text-grayscale-600">
     <span v-if="isPartnerTheme">
       {{ legal.BY_PROCEEDING_TEXT[theme] }}
       <a :href="termsAndConditionsLink" target="_blank" :class="legal.LINK_CLASSES[theme]">
@@ -11,15 +14,17 @@
       </a>
     </span>
     <span v-if="isPartnerTheme"> and BrandCrowd's </span>
-    <span v-else>{{ termsAndConditionsContent?.byProceeding }} </span>
+    <span v-else>By proceeding you accept our </span>
     <a :href="termsOfUseUrl" target="_blank" class="tw-text-info-500" :class="{ 'hover:tw-underline': isDesignCom }"
-      >{{ termsAndConditionsContent?.termsOfUse }}</a
-    > 
-    <span> {{ termsAndConditionsContent?.and }} </span>
+      >Terms of Use</a
+    >
+    and
     <a :href="privacyPolicyUrl" target="_blank" class="tw-text-info-500" :class="{ 'hover:tw-underline': isDesignCom }"
-      >{{ termsAndConditionsContent?.privacyPolicy }}</a
+      >Privacy Policy</a
+    >
+    <span>
+      and agree to receive future updates from {{ isDesignCom ? 'Design.com' : 'BrandCrowd' }}.</span
     >
-    <span> {{ termsAndConditionsContent?.agreeToFutureUpdates }} {{ isDesignCom ? 'Design.com' : 'BrandCrowd' }}.</span>
   </p>
 </template>
 
@@ -51,6 +56,11 @@ export default {
   data() {
     return {
       legal: LEGAL,
+      termsAndConditionsLabel:
+        this.termsAndConditions?.label ??
+        'By proceeding you accept our {termsOfUseLabel} and {privacyPolicyLabel} and agree to receive future updates from',
+      termsOfUseLabel: this.termsAndConditions?.termsOfUseLabel ?? 'Terms of Use',
+      privacyPolicyLabel: this.termsAndConditions?.privacyPolicyLabel ?? 'Privacy Policy',
     };
   },
   computed: {
@@ -66,15 +76,9 @@ export default {
       }
       return this.privacyPolicyUrl;
     },
-    termsAndConditionsContent() {
-      return {
-        byProceeding: this.termsAndConditions?.byProceeding ? `${this.termsAndConditions?.byProceeding} ` : 'By proceeding you accept our ',
-        termsOfUse: this.termsAndConditions?.termsOfUse ?? 'Terms of Use',
-        and: this.termsAndConditions?.and ? ` ${this.termsAndConditions?.and} ` : ' and ',
-        privacyPolicy: this.termsAndConditions?.privacyPolicy ?? 'Privacy Policy',
-        agreeToFutureUpdates: this.termsAndConditions?.agreeToFutureUpdates ? ` ${this.termsAndConditions?.agreeToFutureUpdates}` : ' and agree to receive future updates from'
-      };
-    },
+    hasTermsAndConditionsSlot() {
+      return !!this.$slots.termsAndConditions;
+    }
   },
 };
 </script>