Add price from prefix

tjek · Jun 4, 2024 · ccd7d68 · ccd7d68
1 parent 45a152e
commit ccd7d68
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 7 deletions.
diff --git a/lib/kits/core-ui/components/common/offer-overview.styl b/lib/kits/core-ui/components/common/offer-overview.styl
@@ -188,8 +188,14 @@
         font-size 0.8rem
 
     .sgn-offer-price
-        font-size 2.5em
+        font-size 2.5rem
         font-weight 500
+        display flex
+        align-items baseline
+        font-variant-numeric inherit
+
+        .sgn-offer-price-from
+            font-size 1.25rem
 
     .sgn-offer-img
         padding 1.25rem

diff --git a/lib/kits/core-ui/components/common/offer-overview.ts b/lib/kits/core-ui/components/common/offer-overview.ts
@@ -96,6 +96,9 @@ const defaultTemplateV2 = `\
                             </div>
                         </div>
                         <div class="sgn-offer-price">
+                            {{#priceFrom}}
+                                <span class="sgn-offer-price-from">{{priceFrom}}</span>
+                            {{/priceFrom}}
                             <span>{{price}}</span>
                         </div>
                     </div>
@@ -166,7 +169,8 @@ const OfferOverview = ({
         localeCode: translate('locale_code'),
         currency: translate('publication_viewer_currency'),
         addToShoppingList: translate('publication_viewer_add_to_shopping_list'),
-        visitWebshopLink: translate('publication_viewer_visit_webshop_link')
+        visitWebshopLink: translate('publication_viewer_visit_webshop_link'),
+        priceFrom: translate('publication_viewer_offer_price_from')
     };
 
     const render = async () => {
@@ -206,6 +210,7 @@ const OfferOverview = ({
     };
 
     const transformProducts = (products) => {
+        const {localeCode, currency} = translations;
         const storedPublicationOffers =
             clientLocalStorage.get('publication-saved-offers') || [];
 
@@ -215,6 +220,7 @@ const OfferOverview = ({
             );
             return {
                 ...product,
+                price: formatPrice(product?.price, localeCode, currency),
                 quantity: matchingOffer ? matchingOffer.quantity : 0
             };
         });
@@ -226,14 +232,20 @@ const OfferOverview = ({
         publicationId,
         products
     }) => {
-        const {localeCode, currency} = translations;
+        const {localeCode, currency, priceFrom} = translations;
         const {offer: incitoOffer} = await fetchOffer({viewId, publicationId});
         offer = incitoOffer;
         offer.products = transformProducts(products);
 
+        const hasPriceFrom = products.some((product, i, arr) => {
+            if (i === 0) return false;
+            return product.price !== arr[i - 1].price;
+        });
+
         return {
             ...offer,
             heading: offer.name,
+            priceFrom: hasPriceFrom ? priceFrom : '',
             price: formatPrice(
                 offer?.price,
                 localeCode,

diff --git a/lib/kits/core-ui/components/helpers/component.ts b/lib/kits/core-ui/components/helpers/component.ts
@@ -65,6 +65,7 @@ export const formatPrice = (price, localeCode = 'en_US', currency = 'USD') => {
     })
         .format(price)
         .replace(currency, '')
+        .replace('kr.', '')
         .trim();
 };
 

diff --git a/locales/da_DK.ts b/locales/da_DK.ts
@@ -21,5 +21,6 @@ export default {
     publication_viewer_add_to_shopping_list: 'Tilføj til indkøbsliste',
     publication_viewer_visit_webshop_link: 'Besøg webshoplink',
     publication_viewer_upcoming: 'Kommende',
-    publication_viewer_hotspot_decoration_link: 'Læs mere'
+    publication_viewer_hotspot_decoration_link: 'Læs mere',
+    publication_viewer_offer_price_from: 'Fra'
 };
diff --git a/locales/en_US.ts b/locales/en_US.ts
@@ -21,5 +21,6 @@ export default {
     publication_viewer_add_to_shopping_list: 'Add to Shopping List',
     publication_viewer_visit_webshop_link: 'Visit Webshop Link',
     publication_viewer_upcoming: 'Upcoming',
-    publication_viewer_hotspot_decoration_link: 'Read more'
+    publication_viewer_hotspot_decoration_link: 'Read more',
+    publication_viewer_offer_price_from: 'From'
 };
diff --git a/locales/nb_NO.ts b/locales/nb_NO.ts
@@ -22,5 +22,6 @@ export default {
     publication_viewer_add_to_shopping_list: 'Legg til handleliste',
     publication_viewer_visit_webshop_link: 'Besøk nettbutikklink',
     publication_viewer_upcoming: 'Påkommende',
-    publication_viewer_hotspot_decoration_link: 'Les mer'
+    publication_viewer_hotspot_decoration_link: 'Les mer',
+    publication_viewer_offer_price_from: 'Fra'
 };
diff --git a/locales/sv_SE.ts b/locales/sv_SE.ts
@@ -21,5 +21,6 @@ export default {
     publication_viewer_add_to_shopping_list: 'Lägg till inköpslista',
     publication_viewer_visit_webshop_link: 'Besök webbshoplänk',
     publication_viewer_upcoming: 'Kommende',
-    publication_viewer_hotspot_decoration_link: 'Läs mer'
+    publication_viewer_hotspot_decoration_link: 'Läs mer',
+    publication_viewer_offer_price_from: 'Från'
 };