Skip to content

Commit

Permalink
New offer modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@jrlarano
jrlarano committed Apr 18, 2024
1 parent 3b23659 commit b3cc324
Show file tree
Hide file tree
Showing 3 changed files with 238 additions and 77 deletions.
93 changes: 60 additions & 33 deletions lib/kits/core-ui/components/common/offer-overview.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,69 +109,96 @@
animation spin 2s linear infinite

.sgn-offer-overview-popup-v2
max-width 100%
max-width 80vw
width 100%
border-radius unset
box-shadow unset
border-radius 0
background rgba(255,255,255, 0.9)
margin-top 0
max-height 100vh
height 100vh
max-height 80vh
height 100%
background #F3F3F9
padding 0
display flex

.sgn-popup-header
padding 10px 20px
margin-top 80px
padding 10px 0

.sgn-popup-content
padding 10px 20px
padding 0
width 100%

.sgn-popup-offer-container
display grid
grid-template-columns repeat(auto-fit, minmax(220px, 2fr))
gap 8px
display flex
width 100%
height 100%

.sgn-offer-texts-container
padding 10px 0
margin-bottom 10px

.sgn-products-container
border-radius 10px
max-height calc(100% - 1rem)
overflow-y auto
box-shadow rgba(0, 0, 0, 0.4) 0px 1px 4px, rgba(0, 0, 0, 0.2) 0px 0px 1px

.sgn-products-texts-container
margin-top 10px
height 100%
overflow-y auto
overflow-x hidden

.sgn-offer-heading
font-size 1.5em

.sgn-offer-img
background-color unset

.sgn-offer-img-v2
padding-top 40%
width 100%
padding 1.25rem
border-radius 0

.sgn-offer-details-container
display flex
width 100%
padding 1.25rem
max-height 100%
flex-flow column

.sgn-product-details
padding 16px 12px
box-shadow rgba(0, 0, 0, 0.3) 0px 1px 3px
margin-bottom 16px
border-radius 4px
background #ffffff
display flex
width 100%
border-top 1px solid rgba(0, 0, 0, .12)
padding .75rem
align-items center
gap: .5rem

&:first-child
border-top 0

&:hover
background-color #f3f3f3
.sgn-product-image
flex 0 0 80px

img
width 80px
height 80px

.sgn-product-heading
float left
width 77%
padding 6px 0
padding-right 2%
flex 1 1 auto
overflow hidden

.sgn-offer-product-quantity
float left
width 16%
flex 0 0 160px
justify-content flex-end

.sgn-offer-product-quantity-content

button
min-width 0
padding 0
padding 8px 9px
background transparent
color #4e4e4e
border-radius 100%
box-shadow rgba(0, 0, 0, 0.4) 0px 1px 4px, rgba(0, 0, 0, 0.2) 0px 0px 1px

svg
vertical-align middle
width 16px
height 16px

input
color #202020
Expand Down
117 changes: 75 additions & 42 deletions lib/kits/core-ui/components/common/offer-overview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,30 +61,9 @@ const defaultTemplate = `\
`;

const defaultTemplateV2 = `\
<div class="sgn-offer-overview-popup sgn-offer-overview-popup-v2" style="width:{{layoutWidth}}px;">
<div class="sgn-offer-overview-popup sgn-offer-overview-popup-v2">
{{#offer}}
<div class="sgn-popup-header">
<div class="sgn-menu-popup-labels">
<div class="sgn-menu-label">
<span>{{label}}&nbsp;</span>
</div>
<div class="sgn-menu-date">
<span data-validity-state="{{status}}">{{dateRange}}&nbsp;</span>
</div>
</div>
</div>
<div class="sgn-popup-content">
<div class="sgn-offer-texts-container">
<div class="sgn-offer-heading">
<span>{{heading}}&nbsp;</span>
</div>
<div class="sgn-offer-description">
<span>{{description}}&nbsp;</span>
</div>
<div class="sgn-offer-price">
<span>{{price}}&nbsp;</span>
</div>
</div>
<div class="sgn-popup-offer-container">
{{#loader}}
<div class="sgn-offer-img sgn-offer-img-v2">
Expand All @@ -95,28 +74,48 @@ const defaultTemplateV2 = `\
<div class="sgn-offer-img">
<img src="{{images.zoom}}" alt="{{heading}}">
</div>
<div class="sgn-products-container">
<div class="sgn-products-texts-container">
{{#products}}
<div id="sgn-offer-product-{{id}}" data-offer-product-id="{{id}}" class="sgn-product-details">
<div class="sgn-product-heading">{{title}}</div>
<div id="sgn-offer-product-quantity-{{id}}" class="sgn-offer-product-quantity">
<button id="sgn-offer-product-quantity-minus-{{id}}" class="sgn-offer-product-quantity-minus">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-minus-circle-fill" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M128,24A104,104,0,1,0,232,128,104.2,104.2,0,0,0,128,24Zm40,112H88a8,8,0,0,1,0-16h80a8,8,0,0,1,0,16Z"/></svg>
</button>
<input type="text" id="sgn-offer-product-quantity-text-{{id}}" class="sgn-offer-product-quantity-text" value="1" />
<button id="sgn-offer-product-quantity-plus-{{id}}" class="sgn-offer-product-quantity-plus">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16"> <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/> </svg>
</button>
<div class="sgn-offer-details-container">
<div class="sgn-popup-header">
<div class="sgn-menu-popup-labels">
<div class="sgn-menu-label">
<span>{{label}}&nbsp;</span>
</div>
<div class="sgn-offer-product-basket">
<button id="sgn-offer-product-add-basket-{{id}}" class="sgn-offer-product-add-basket">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-basket" viewBox="0 0 16 16"> <path d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1v4.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 13.5V9a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h1.217L5.07 1.243a.5.5 0 0 1 .686-.172zM2 9v4.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V9H2zM1 7v1h14V7H1zm3 3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 4 10zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 6 10zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 8 10zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5z"/> </svg>
</button>
<div class="sgn-menu-date">
<span data-validity-state="{{status}}">{{dateRange}}&nbsp;</span>
</div>
<div class="sgn-clearfix"></div>
</div>
{{/products}}
</div>
<div class="sgn-offer-texts-container">
<div class="sgn-offer-heading">
<span>{{heading}}&nbsp;</span>
</div>
<div class="sgn-offer-description">
<span>{{description}}&nbsp;</span>
</div>
<div class="sgn-offer-price">
<span>{{price}}&nbsp;</span>
</div>
</div>
<div class="sgn-products-container">
<div class="sgn-products-texts-container">
{{#products}}
<div id="sgn-offer-product-{{id}}" data-offer-product-id="{{id}}" class="sgn-product-details">
<div class="sgn-product-image"><img src="{{images.zoom}}" alt="{{heading}}"></div>
<div class="sgn-product-heading">{{title}}</div>
<div id="sgn-offer-product-quantity-{{id}}" class="sgn-offer-product-quantity">
<div class="sgn-offer-product-quantity-content">
<button id="sgn-offer-product-quantity-minus-{{id}}" class="sgn-offer-product-quantity-minus">
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-minus-circle-fill" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
</button>
<input type="text" id="sgn-offer-product-quantity-text-{{id}}" class="sgn-offer-product-quantity-text" value="1" />
<button id="sgn-offer-product-quantity-plus-{{id}}" class="sgn-offer-product-quantity-plus">
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-plus-circle-fill" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
</button>
</div>
</div>
</div>
{{/products}}
</div>
</div>
</div>
{{/loader}}
Expand All @@ -133,7 +132,8 @@ const OfferOverview = ({
sgnData,
offer,
type,
addToShoppingList
addToShoppingList,
updateShoppingList
}) => {
template =
template?.innerHTML ||
Expand Down Expand Up @@ -185,17 +185,28 @@ const OfferOverview = ({
addEventListeners();
};

const transformIncitoProducts = (products) =>
products.map(({product}) => product);

const transformIncitoOffer = async ({
fetchOffer,
fetchProducts,
viewId,
publicationId,
products
}) => {
const {localeCode, currency} = translations;
const {offer: incitoOffer} = await fetchOffer({viewId, publicationId});
offer = incitoOffer;
const {offer_products} = await fetchProducts(offer.id);
const products1 = transformIncitoProducts(offer_products);
offer.products = products;

console.log('incitoOffer', incitoOffer);

console.log('products', products);
console.log('products1', products1);

return {
...offer,
heading: offer.name,
Expand Down Expand Up @@ -312,10 +323,32 @@ const OfferOverview = ({

plusBtn?.addEventListener('click', () => {
if (quantityTxt) quantityTxt.value = `${++quantity}`;

updateShoppingList(
{
...offer,
basket: {
productId,
quantity
}
},
'add'
);
});
minusBtn?.addEventListener('click', () => {
if (quantityTxt && quantity > 1)
quantityTxt.value = `${--quantity}`;

updateShoppingList(
{
...offer,
basket: {
productId,
quantity
}
},
'minus'
);
});

basketBtn?.addEventListener('click', () => {
Expand Down
Loading

0 comments on commit b3cc324

Please sign in to comment.