feat: shipping legal texts (#898)

plentymarkets · Dec 18, 2024 · 3affc25 · 3affc25
1 parent ccf8430
commit 3affc25
Show file tree

Hide file tree

Showing 12 changed files with 103 additions and 13 deletions.
diff --git a/apps/web/components/CategoryPageContent/CategoryPageContent.vue b/apps/web/components/CategoryPageContent/CategoryPageContent.vue
@@ -66,7 +66,17 @@
           <span>{{ $t('asterisk') }}</span>
           <span v-if="showNetPrices">{{ $t('itemExclVAT') }}</span>
           <span v-else>{{ $t('itemInclVAT') }}</span>
-          <span>{{ $t('excludedShipping') }}</span>
+          <i18n-t keypath="excludedShipping" scope="global">
+            <template #shipping>
+              <SfLink
+                :href="localePath(paths.shipping)"
+                target="_blank"
+                class="focus:outline focus:outline-offset-2 focus:outline-2 outline-secondary-600 rounded"
+              >
+                {{ $t('delivery') }}
+              </SfLink>
+            </template>
+          </i18n-t>
         </div>
         <UiPagination
           v-if="totalProducts > 0"
@@ -83,11 +93,13 @@
 
 <script setup lang="ts">
 import { productGetters, productImageGetters } from '@plentymarkets/shop-api';
-import { SfIconTune, useDisclosure } from '@storefront-ui/vue';
+import { SfIconTune, useDisclosure, SfLink } from '@storefront-ui/vue';
 import { type CategoryPageContentProps } from '~/components/CategoryPageContent/types';
+import { paths } from '~/utils/paths';
 
 const { title, totalProducts, itemsPerPage = 24, products = [] } = defineProps<CategoryPageContentProps>();
 
+const localePath = useLocalePath();
 const { getFacetsFromURL } = useCategoryFilter();
 const { addModernImageExtension } = useModernImage();
 

diff --git a/apps/web/components/OrderAgain/OrderAgain.vue b/apps/web/components/OrderAgain/OrderAgain.vue
@@ -193,7 +193,17 @@
           <span>{{ t('asterisk') }}</span>
           <span v-if="showNetPrices">{{ t('itemExclVAT') }}</span>
           <span v-else>{{ t('itemInclVAT') }}</span>
-          <span>{{ t('excludedShipping') }}</span>
+          <i18n-t keypath="excludedShipping" scope="global">
+            <template #shipping>
+              <SfLink
+                :href="localePath(paths.shipping)"
+                target="_blank"
+                class="focus:outline focus:outline-offset-2 focus:outline-2 outline-secondary-600 rounded"
+              >
+                {{ $t('delivery') }}
+              </SfLink>
+            </template>
+          </i18n-t>
         </div>
         <div class="ml-auto float-right">
           <UiButton class="mr-2" variant="secondary" @click="close()" size="lg">
@@ -223,9 +233,11 @@ import {
   SfIconArrowUpward,
   SfIconArrowDownward,
   SfListItem,
+  SfLink,
 } from '@storefront-ui/vue';
 import type { OrderAgainProps } from './types';
 import { orderGetters, productPropertyGetters } from '@plentymarkets/shop-api';
+import { paths } from '~/utils/paths';
 
 const props = defineProps<OrderAgainProps>();
 const { send } = useNotification();

diff --git a/apps/web/components/ProductSlider/ProductSlider.vue b/apps/web/components/ProductSlider/ProductSlider.vue
@@ -34,17 +34,29 @@
     <span>{{ $t('asterisk') }}</span>
     <span v-if="showNetPrices">{{ $t('itemExclVAT') }}</span>
     <span v-else>{{ $t('itemInclVAT') }}</span>
-    <span>{{ $t('excludedShipping') }}</span>
+    <i18n-t keypath="excludedShipping" scope="global">
+      <template #shipping>
+        <SfLink
+          :href="localePath(paths.shipping)"
+          target="_blank"
+          class="focus:outline focus:outline-offset-2 focus:outline-2 outline-secondary-600 rounded"
+        >
+          {{ $t('delivery') }}
+        </SfLink>
+      </template>
+    </i18n-t>
   </div>
 </template>
 
 <script setup lang="ts">
 import { productGetters, productImageGetters } from '@plentymarkets/shop-api';
-import { SfScrollable } from '@storefront-ui/vue';
+import { SfScrollable, SfLink } from '@storefront-ui/vue';
 import type { ProductSliderProps } from '~/components/ProductSlider/types';
+import { paths } from '~/utils/paths';
 
 const { addModernImageExtension } = useModernImage();
 const { showNetPrices } = useCustomer();
+const localePath = useLocalePath();
 
 defineProps<ProductSliderProps>();
 </script>
diff --git a/apps/web/components/QuickCheckout/QuickCheckout.vue b/apps/web/components/QuickCheckout/QuickCheckout.vue
@@ -56,7 +56,17 @@
           <span>{{ t('asterisk') }}</span>
           <span v-if="showNetPrices">{{ t('itemExclVAT') }}</span>
           <span v-else>{{ t('itemInclVAT') }}</span>
-          <span>{{ t('excludedShipping') }}</span>
+          <i18n-t keypath="excludedShipping" scope="global">
+            <template #shipping>
+              <SfLink
+                :href="localePath(paths.shipping)"
+                target="_blank"
+                class="focus:outline focus:outline-offset-2 focus:outline-2 outline-secondary-600 rounded"
+              >
+                {{ $t('delivery') }}
+              </SfLink>
+            </template>
+          </i18n-t>
         </div>
 
         <VariationProperties :product="lastUpdatedProduct" />
@@ -97,7 +107,7 @@
 </template>
 
 <script setup lang="ts">
-import { SfIconClose } from '@storefront-ui/vue';
+import { SfIconClose, SfLink } from '@storefront-ui/vue';
 import type { QuickCheckoutProps } from './types';
 import { cartGetters, Product, productGetters } from '@plentymarkets/shop-api';
 import ProductPrice from '~/components/ProductPrice/ProductPrice.vue';

diff --git a/apps/web/components/WishlistPageContent/WishlistPageContent.vue b/apps/web/components/WishlistPageContent/WishlistPageContent.vue
@@ -67,17 +67,29 @@
       <span>{{ $t('asterisk') }}</span>
       <span v-if="showNetPrices">{{ $t('itemExclVAT') }}</span>
       <span v-else>{{ $t('itemInclVAT') }}</span>
-      <span>{{ $t('excludedShipping') }}</span>
+      <i18n-t keypath="excludedShipping" scope="global">
+        <template #shipping>
+          <SfLink
+            :href="localePath(paths.shipping)"
+            target="_blank"
+            class="focus:outline focus:outline-offset-2 focus:outline-2 outline-secondary-600 rounded"
+          >
+            {{ $t('delivery') }}
+          </SfLink>
+        </template>
+      </i18n-t>
     </div>
   </NarrowContainer>
 </template>
 
 <script setup lang="ts">
 import { productGetters, productImageGetters } from '@plentymarkets/shop-api';
-import { SfLoaderCircular } from '@storefront-ui/vue';
+import { SfLoaderCircular, SfLink } from '@storefront-ui/vue';
 import type { WishlistPageContentProps } from '~/components/WishlistPageContent/types';
+import { paths } from '~/utils/paths';
 
 const { showNetPrices } = useCustomer();
+const localePath = useLocalePath();
 
 const { withHeader = true } = defineProps<WishlistPageContentProps>();
 

diff --git a/apps/web/components/ui/PurchaseCard/PurchaseCard.vue b/apps/web/components/ui/PurchaseCard/PurchaseCard.vue
@@ -117,7 +117,17 @@
             <div class="mt-4 typography-text-xs flex gap-1">
               <span>{{ t('asterisk') }}</span>
               <span>{{ showNetPrices ? t('itemExclVAT') : t('itemInclVAT') }}</span>
-              <span>{{ t('excludedShipping') }}</span>
+              <i18n-t keypath="excludedShipping" scope="global">
+                <template #shipping>
+                  <SfLink
+                    :href="localePath(paths.shipping)"
+                    target="_blank"
+                    class="focus:outline focus:outline-offset-2 focus:outline-2 outline-secondary-600 rounded"
+                  >
+                    {{ $t('delivery') }}
+                  </SfLink>
+                </template>
+              </i18n-t>
             </div>
             <template v-if="showPayPalButtons">
               <PayPalExpressButton type="SingleItem" @validation-callback="paypalHandleAddToCart" class="mt-4" />
@@ -132,9 +142,10 @@
 
 <script setup lang="ts">
 import { productGetters, reviewGetters, productBundleGetters } from '@plentymarkets/shop-api';
-import { SfCounter, SfRating, SfIconShoppingCart, SfLoaderCircular, SfTooltip } from '@storefront-ui/vue';
+import { SfCounter, SfRating, SfIconShoppingCart, SfLoaderCircular, SfTooltip, SfLink } from '@storefront-ui/vue';
 import { type PurchaseCardProps } from '~/components/ui/PurchaseCard/types';
 import { type PayPalAddToCartCallback } from '~/components/PayPal/types';
+import { paths } from '~/utils/paths';
 
 const { product, reviewAverage } = defineProps<PurchaseCardProps>();
 
@@ -157,6 +168,7 @@ const { isWishlistItem } = useWishlist();
 const { openQuickCheckout } = useQuickCheckout();
 const { crossedPrice } = useProductPrice(product);
 const { reviewArea } = useProductReviews(Number(productGetters.getId(product)));
+const localePath = useLocalePath();
 
 resetInvalidFields();
 resetAttributeFields();

diff --git a/apps/web/lang/de.json b/apps/web/lang/de.json
@@ -535,7 +535,7 @@
   },
   "estimatedTax": "MwSt.",
   "etaDelivery": "Voraussichtliche Lieferdauer",
-  "excludedShipping": "zzgl. Versandkosten",
+  "excludedShipping": "zzgl. {shipping}",
   "failedInfoHeader": "Es tut uns wirklich leid.",
   "failedInfoMessage": "Ihre Bestellung konnte nicht abgeschlossen werden.",
   "filters": "Filter",

diff --git a/apps/web/lang/en.json b/apps/web/lang/en.json
@@ -535,7 +535,7 @@
   },
   "estimatedTax": "VAT",
   "etaDelivery": "Estimated delivery time",
-  "excludedShipping": "excl. Shipping",
+  "excludedShipping": "excl. {shipping}",
   "failedInfoHeader": "We are really sorry.",
   "failedInfoMessage": "Your order has not been completed.",
   "filters": "Filters",

diff --git a/apps/web/nuxt.config.ts b/apps/web/nuxt.config.ts
@@ -60,6 +60,7 @@ export default defineNuxtConfig({
       defaultItemsPerPage: Number(process.env.DEFAULT_FEEDBACK_ITEMS_PER_PAGE ?? 10),
       headerLogo: process.env.LOGO || '/images/logo.svg',
       homepageCategoryId: Number(process.env.HOMEPAGE) ?? null,
+      shippingTextCategoryId: Number(process.env.SHIPPINGTEXT) ?? null,
       storename: process.env.STORENAME || 'PLENTYSYSTEMS AG',
       noCache: process.env.NO_CACHE || '',
       configId: process.env.CONFIG_ID || '',

diff --git a/apps/web/pages/shipping.vue b/apps/web/pages/shipping.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="w-full p-5 overflow-x-auto no-preflight" v-html="text" />
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  pageType: 'static',
+});
+const { data, fetchCategoryTemplate } = useCategoryTemplate();
+const runtimeConfig = useRuntimeConfig();
+await fetchCategoryTemplate(Number(runtimeConfig.public.shippingTextCategoryId));
+
+const text = computed(() => data?.value?.data);
+</script>
diff --git a/apps/web/utils/paths.ts b/apps/web/utils/paths.ts
@@ -24,5 +24,6 @@ export const paths = {
   cancellationRights: '/cancellation-rights',
   legalDisclosure: '/legal-disclosure',
   privacyPolicy: '/privacy-policy',
+  shipping: '/shipping',
   cancellationForm: '/cancellation-form',
 };
diff --git a/docs/changelog/changelog_en.md b/docs/changelog/changelog_en.md
@@ -2,6 +2,10 @@
 
 ## v1.x.x (2025-xx-xx)
 
+### New
+
+- Added page for shipping legal text.
+
 ### 🩹 Fixed
 
 - Fix for max visible pages on mobile pagination.