Merge pull request #17 from Shchoholiev/feature/SA-213-create-top-deals-page

SA-213 Create Top Deals page and fix UI Amazon disclaimer
2025-04-04 16:49:36 +00:00 · 2023-11-28 16:05:36 +02:00 · 2023-11-28 16:05:36 +02:00 · 736e6159bc
commit 736e6159bc
parent 9a109d6ed5 eea8951c5b
8 changed files with 405 additions and 14 deletions
--- a/ShoppingAssistantWebClient.Web/Models/TopDealsProduct.cs
+++ b/ShoppingAssistantWebClient.Web/Models/TopDealsProduct.cs
@ -0,0 +1,20 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace ShoppingAssistantWebClient.Web.Models
+{
+        public class TopDealsProduct
+    {
+        public required string Id {get; set;}
+
+        public required string Name {get; set;}
+
+        public required double Price { get; set; }
+
+        public required string ImagesUrls {get; set;}
+
+        public required string Url {get; set;}
+    }
+}
--- a/ShoppingAssistantWebClient.Web/Pages/Index.razor.css
+++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor.css
@ -16,6 +16,10 @@
  left: 1.56em;
  cursor: pointer;
  visibility: hidden;
+
+  @media screen and (max-width: 900px) {
+    visibility: visible;
+  }
 }
 .loading {
  margin: 0 auto;
--- a/ShoppingAssistantWebClient.Web/Pages/TopDeals.razor
+++ b/ShoppingAssistantWebClient.Web/Pages/TopDeals.razor
@ -0,0 +1,93 @@
+@page "/top-deals"
+
+@inject NavigationManager navigationManager;
+
+<head>
+    <link rel="stylesheet" href="css/Cart.css" />
+</head>
+<div class="cart">
+    <div class="head">
+        <div id="button_open" class="open_menu">
+            <a class="button_open_menu">
+                <span></span>
+                <span></span>
+                <span></span>
+            </a>
+        </div>
+        <p class="header-text">Top Deals 🔥</p>
+
+        
+    </div>
+    <div class="container">
+
+            <div class="types-products">
+                    <p class="type-product-text">Shop best holiday gifts🎁</p>
+
+                        <div class="products">  
+                            @foreach (var product in TopDealsGift) {
+
+                                        <a href="@product.Url">
+                                            <div class="product-div">
+                                                @if(product.ImagesUrls != null) {
+                                                    <img class="product-img" src="@product.ImagesUrls" alt="product image">
+                                                }
+                                                else {
+                                                    <img class="product-img" alt="product image">
+                                                }
+                                                <label class="product-description">@product.Name</label>
+                                                <div class="button-row">
+                                                    <label class="price-label">$ @product.Price</label>
+                                                </div>
+                                                <button class="button-amazon">
+                                                    <img src="/images/amazon.svg" alt="amazon">
+                                                </button>
+                                            </div>
+                                        </a>
+                            }
+                        </div> 
+            </div>
+
+            
+            <div class="types-products">
+                    <p class="type-product-text">Deals in PCs and gaming accessories 🎧</p>
+
+                        <div class="products">  
+                                @foreach (var product in TopDealsGaming) {
+                                    <a href="@product.Url">
+                                            <div class="product-div">
+                                                @if(product.ImagesUrls != null) {
+                                                    <img class="product-img" src="@product.ImagesUrls" alt="product image">
+                                                }
+                                                else {
+                                                    <img class="product-img" alt="product image">
+                                                }
+                                                <label class="product-description">@product.Name</label>
+                                                <div class="button-row">
+                                                    <label class="price-label">$ @product.Price</label>
+                                                </div>
+                                                <button class="button-amazon">
+                                                    <img src="/images/amazon.svg" alt="amazon">
+                                                </button>
+                                            </div>
+                                        </a>
+                                }
+                        </div> 
+            </div>
+    </div>      
+</div>
+
+<script>
+    document.getElementById('button_open').addEventListener('click', changetyle);
+</script>
+
+@code 
+{
+    [Parameter] public string currentWishlistId {get; set; }
+
+    [Parameter] public string chatId {get; set; }
+
+    private void NavigateToMainPage()
+    {
+        navigationManager.NavigateTo($"/chat/{chatId}");
+    }
+}
--- a/ShoppingAssistantWebClient.Web/Pages/TopDeals.razor.cs
+++ b/ShoppingAssistantWebClient.Web/Pages/TopDeals.razor.cs
@ -0,0 +1,81 @@
+using GraphQL;
+using Newtonsoft.Json;
+using Microsoft.AspNetCore.Components;
+using ShoppingAssistantWebClient.Web.Models;
+using ShoppingAssistantWebClient.Web.Network;
+namespace ShoppingAssistantWebClient.Web.Pages;
+
+
+public partial class TopDeals : ComponentBase
+{
+
+    [Inject]
+    private ApiClient _apiClient { get; set; }
+
+    public List<TopDealsProduct> TopDealsGift { get; set; } = new List<TopDealsProduct>();
+
+    public List<TopDealsProduct> TopDealsGaming { get; set; } = new List<TopDealsProduct>();
+    protected override async Task OnInitializedAsync()
+    {
+
+        TopDealsGift.Add(new TopDealsProduct
+        {
+            Id = "1",
+            Name = "Belkin USB C to VGA + Charge Adapter...",
+            Price = 19.91,
+            ImagesUrls = "https://m.media-amazon.com/images/I/51AhAbvnQ1L._AC_SL1000_.jpg",
+            Url = "https://www.amazon.com/Belkin-Resolution-Passthrough-Connected-AVC001btBK/dp/B088ZWJHHP?th=1"
+        });
+
+        TopDealsGift.Add(new TopDealsProduct
+        {
+            Id = "2",
+            Name = "Playmobil A-Team Van",
+            Price = 45.99,
+            ImagesUrls = "https://m.media-amazon.com/images/I/81x-2k0wQPL._AC_SL1500_.jpg",
+            Url = "https://www.amazon.com/dp/B095KP2T5V/ref=cm_gf_adjq_d_p0_e0_qd0_wDMrpoirWfFUdKIYB3rB"
+        });
+
+
+        TopDealsGift.Add(new TopDealsProduct
+        {
+            Id = "3",
+            Name = "Amazfit GTS 3 Smart",
+            Price = 70.21,
+            ImagesUrls = "https://m.media-amazon.com/images/I/61v3RM+Y9-L._AC_SL1500_.jpg",
+            Url = "https://www.amazon.com/Amazfit-Android-Fitness-Display-Tracking/dp/B09H5TWZQT?pf_rd_r=F00JZCSF46A9QDAJQ16B&pf_rd_t=Events&pf_rd_i=cybermonday&pf_rd_p=b5d7c894-3da1-49e6-8e23-1993d3fa6730&pf_rd_s=slot-6&ref=dlx_cyber_gd_dcl_img_4_d2b1e900_dt_sl6_30&th=1"
+        });
+
+        TopDealsGaming.Add(new TopDealsProduct
+        {
+            Id = "4",
+            Name = "Biolage Color Last Conditioner",
+            Price = 15.72,
+            ImagesUrls = "https://m.media-amazon.com/images/I/51DwIN83TqL._SL1500_.jpg",
+            Url = "https://www.amazon.com/BIOLAGE-Colorlast-Conditioner-Color-Treated-Hair/dp/B00ILBUG40?ref_=Oct_DLandingS_D_f9985aa4_0"
+        });
+
+        TopDealsGaming.Add(new TopDealsProduct
+        {
+            Id = "5",
+            Name = "GAP Men's Logo Fleece Hoodie",
+            Price = 23.29,
+            ImagesUrls = "https://m.media-amazon.com/images/I/71cWXbl8PoL._AC_SY741_.jpg",
+            Url = "https://www.amazon.com/dp/B09R2LRRLN/?pf_rd_r=PG3YVRHHJ9KBPM271AHQ&pf_rd_t=Events&pf_rd_i=cybermonday&pf_rd_p=b5d7c894-3da1-49e6-8e23-1993d3fa6730&pf_rd_s=slot-6&ref=dlx_cyber_gd_dcl_img_5_51d0c142_dt_sl6_30&th=1&psc=1"
+        });
+
+        TopDealsGaming.Add(new TopDealsProduct
+        {
+            Id = "6",
+            Name = "Baseus Power Bank, 65W 20000mAh",
+            Price = 45.99,
+            ImagesUrls = "https://m.media-amazon.com/images/I/71yLzSKcWmL._AC_SL1500_.jpg",
+            Url = "https://www.amazon.com/Portable-Charger-Baseus-20000mAh-Charging/dp/B08THCNNCS?pd_rd_w=dXZn8&content-id=amzn1.sym.adeb688d-35a7-4952-bbb3-fcbab0fec4f0&pf_rd_p=adeb688d-35a7-4952-bbb3-fcbab0fec4f0&pf_rd_r=EVGJXF4CV6XX9W7N5B0Z&pd_rd_wg=AAlho&pd_rd_r=379bd4e7-b04b-4752-873a-c3badfe748ff&pd_rd_i=B08THCNNCS&ref_=pd_bap_d_grid_rp_0_2_t&th=1"
+        });
+
+    }
+
+
+
+
+}
--- a/ShoppingAssistantWebClient.Web/Pages/TopDeals.razor.css
+++ b/ShoppingAssistantWebClient.Web/Pages/TopDeals.razor.css
@ -0,0 +1,179 @@
+.cart {
+  border-radius: 0.6em;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  padding: 20px;
+  border: 1px solid #0052CC;
+  overflow: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.cart::-webkit-scrollbar {
+  display: none;
+}
+
+.head {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: large;
+}
+
+.header-text {
+  text-align: center;
+  font-size: 12;
+  color: rgba(0, 82, 204, 0.8);
+}
+
+.back-button {
+  width: 15px;
+  height: 15px;
+  background-image: url("/images/back-button.svg");
+  background-size: cover;
+  border: none;
+  background-color: transparent;
+  position: absolute;
+  left: 20px;
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+  overflow: auto;
+}
+
+.product-div {
+  height: 320px;
+  width: 240px;
+  border-radius: 10px;
+  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
+  position: relative;
+  padding: 0 10px 0 10px;
+  margin: 15px 15px 15px 15px;
+}
+
+.types-products {
+  width: 64%;
+  height: 100%;
+}
+
+.products {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+}
+
+.type-product-text {
+  margin-left: 20px;
+  font-size: 15;
+  color: rgba(0, 82, 204, 0.8);
+
+}
+
+.products a {
+  text-decoration: none;
+  color: black;
+}
+
+.product-img {
+  height: 65%;
+  width: 100%;
+  align-self: center;
+  display: block;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.product-description {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 14px;
+}
+
+.button-amazon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #009FFF;
+  border: none;
+  border-radius: 10px;
+  position: absolute;
+  margin-left: 3.5%;
+  width: 85%;
+  height: 35px;
+  bottom: 10px;
+}
+
+.button-row {
+  display: flex;
+}
+
+.price-label {
+  position: absolute;
+  right: 10px;
+  font-weight: bold;
+  font-size: 18px;
+  height: 16px;
+  bottom: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.error {
+  font-size: x-large;
+  color: darkgrey;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.error br {
+  display: block;
+  content: " ";
+  margin-bottom: 1em;
+}
+
+.right-frame {
+  position: absolute;
+  right: 1.25em;
+  left: 23.25em;
+  top: 1.25em;
+  bottom: 1.25em;
+  transition: 1s;
+}
+
+.button_open_menu {
+  z-index: 2;
+  width: 1.43em;
+  height: 1.23em;
+  position: absolute;
+  top: 1.56em;
+  left: 1.56em;
+  cursor: pointer;
+  visibility: hidden;
+}
+
+.button_open_menu span {
+  width: 20px;
+  height: 1.5px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #4E4E4E;
+}
+
+.button_open_menu span:nth-of-type(2) {
+  top: calc(50% - 5px);
+}
+
+.button_open_menu span:nth-of-type(3) {
+  top: calc(50% + 5px);
+}
--- a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor
+++ b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor
@ -12,5 +12,7 @@
    <div class="right-frame">
        @Body
    </div>
-    <span class="amazon-associate">As an Amazon Associate we earn from qualifying purchases.</span>
 </div>
+<footer>
+    <span class="amazon-associate">As an Amazon Associate we earn from qualifying purchases.</span>
+</footer>
--- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
+++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
@ -79,13 +79,13 @@
            left_frame.style.transform = 'translateX(-110%)';
            button_open.style.visibility = 'visible';
            right_frame.style.left = '1.25em';
-            amazonAssociate.style.left='50%'
+            amazonAssociate.style.left ='calc(50% - 12.5em)';

        } else {
            left_frame.style.transform = 'translateX(0)';
            button_open.style.visibility = 'hidden';
-            right_frame.style.left = '23.25em';
-            amazonAssociate.style.left='calc(50% + 20em)'
+            right_frame.style. left = '23.25em';
+            amazonAssociate.style.left ='50%';
        }
    }
    document.getElementById('button_close').addEventListener('click', changetyle);
--- a/ShoppingAssistantWebClient.Web/wwwroot/css/MainLayout.css
+++ b/ShoppingAssistantWebClient.Web/wwwroot/css/MainLayout.css
@ -1,7 +1,7 @@
 .page {
    position: relative;
    width: 100%;
-    height: 100vh;
+    height: calc(100vh - 1.5em);
    border: 1.5% solid;
    padding: 1.25em;
 }
@ -10,9 +10,13 @@
    position: absolute;
    width: 20em;
    top: 1.25em;
-    bottom: 1.25em;
+    bottom: 0em;
    margin-right: 1.5em;
    transition: 1s;
+
+    @media screen and (max-width: 900px) {
+        transform: translateX(-110%);
+    }
 }

 .right-frame {
@ -20,20 +24,28 @@
    right: 1.25em;
    left: 23.25em;
    top: 1.25em;
-    bottom: 1.25em;
+    bottom: 0em;
    transition: 1s;
+
+    @media screen and (max-width: 900px) {
+        left: 1.25em;
+    }
 }
+
 .amazon-associate {
-    position: fixed;
-    bottom: 0;
-    left: calc(50% + 20em);
+    position: relative;
+    left: 50%;
    transform: translateX(-50%);
+    bottom: 0;
    font-size: 0.7em;
    color: #000;
    text-decoration: none;
-    cursor: none;
-    display: flex;
    align-items: center;
    justify-content: center;
-    transition: 1s;
+    transition: 0.5s;
+
+    @media screen and (max-width: 900px) {
+        left: calc(50% - 12.5em);
+    }
+
 }