23:10 27/12/2023

src/data.ts

@@ -0,0 +1,512 @@
+//---- dinh nghia
+type list_info = {
+    id: number,
+    name_category: string;
+}
+
+type ProductInfo = {
+    productId: number,
+    product_name: string;
+    productUrl: string;
+    image: string;
+    price: number;
+    retail_price: number;
+    quantity: number;
+    sale_quantity: number;
+    quantity_member: number;
+    from_time: number,
+    to_time: number;
+    status: string;
+    category_info: list_info[],
+    list_group: infoGroup[]
+};
+
+type UserInfo = {
+    leaderId: number;
+    leaderName: string;
+    leaderEmail: string;
+    list_group: infoGroup[];
+}
+
+type infoGroup = {
+    name_group: string,
+    group_id: number,
+    product_id: number,
+    productUrl: string,
+    product_image: string,
+    product_name: string,
+    price: number,
+    retail_price: number;
+    quantity: number;
+    sale_quantity: number;
+    quantity_member: number;
+    to_time: number;
+    list_member: infoMember[]
+}
+
+type infoMember = {
+    id_member: number,
+    name_member: string,
+    email_member: string
+}
+
+// 
+
+
+
+const List_product: ProductInfo[] = [
+    {
+        productId: 1,
+        product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea',
+        productUrl: '/',
+        image: 'https://mygear.vn/media/product/589-1.jpg',
+        price: 1250000,
+        retail_price: 500000,
+        quantity: 20,
+        sale_quantity: 10,
+        quantity_member: 5,
+        from_time: 1703213170286,
+        to_time: 1703955500000,
+        status: 'started',
+        category_info: [
+            {
+                id: 1,
+                name_category: 'Chuột'
+            },
+            {
+                id: 2,
+                name_category: 'Bàn phím'
+            },
+        ],
+        list_group: [
+            {
+                group_id: 1,
+                name_group: 'Hura săn sale',
+                product_id: 1,
+                productUrl: '/',
+                product_image: 'https://mygear.vn/media/product/589-1.jpg',
+                product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea',
+                price: 3190000,
+                quantity: 20,
+                sale_quantity: 10,
+                quantity_member: 5,
+                retail_price: 2190000,
+                to_time: 1703955600000,
+                list_member: [
+                    {
+                        id_member: 1,
+                        name_member: 'Hồng Vũ',
+                        email_member: 'hongvt@hurasoft.com'
+                    }, {
+                        id_member: 2,
+                        name_member: 'Ánh trần',
+                        email_member: 'anhtt@hurasoft.com'
+                    }, {
+                        id_member: 3,
+                        name_member: 'Đức Quân',
+                        email_member: 'ducnq@hurasoft.com'
+                    },
+                ]
+            }
+        ]
+    }, {
+        productId: 2,
+        product_name: 'Chuột không dây logitech M590 Wireless Bluetooth',
+        productUrl: '/',
+        image: 'https://mygear.vn/media/product/1634-chu---t-kh--ng-d--y-logitech-m590-wireless-bluetooth.jpg',
+        price: 570000,
+        retail_price: 300000,
+        quantity: 30,
+        sale_quantity: 10,
+        quantity_member: 5,
+        from_time: 1703213170286,
+        to_time: 1703955600000,
+        status: 'started',
+        category_info: [
+            {
+                id: 1,
+                name_category: 'Chuột'
+            },
+            {
+                id: 2,
+                name_category: 'Bàn phím'
+            },
+        ],
+        list_group: []
+    }, {
+        productId: 3,
+        product_name: 'Bàn phím cơ VGN VXE75 Trans Purple RGB (Bluetooth, 2.4GHz Wireless, Type-A)',
+        productUrl: '/',
+        image: 'https://mygear.vn/media/product/4793-vgn-vxe75-trans-purple.jpg',
+        price: 3190000,
+        retail_price: 2190000,
+        quantity: 30,
+        sale_quantity: 10,
+        quantity_member: 5,
+        from_time: 1703696400000,
+        to_time: 1703955600000,
+        status: 'coming',
+        category_info: [
+            {
+                id: 2,
+                name_category: 'Bàn phím'
+            },
+        ],
+        list_group: []
+    }, {
+        productId: 4,
+        product_name: 'Màn hình Gaming Samsung Odyssey G5 LS27CG510EEXXV 27" QHD VA 165Hz (HDMI,Displayport)',
+        productUrl: '/',
+        image: 'https://mygear.vn/media/product/3761-samsung-odyssey-g5-ls27cg510eexxv.jpg',
+        price: 4700000,
+        retail_price: 4500000,
+        quantity: 30,
+        sale_quantity: 30,
+        quantity_member: 5,
+        from_time: 1703213170286,
+        to_time: 1703955600000,
+        status: 'out_stock',
+        category_info: [
+            {
+                id: 5,
+                name_category: 'Màn hình'
+            },
+        ],
+        list_group: []
+    }, {
+        productId: 5,
+        product_name: 'Kit bàn phím cơ MonsGeek M1 QMK (Full Nhôm – Mạch xuôi – QMK / VIA – PCB Stab) - (Silver)',
+        productUrl: '/',
+        image: 'https://mygear.vn/media/product/3613-monsgeek-m1-qmk-6.jpg',
+        price: 2290000,
+        retail_price: 2000000,
+        quantity: 20,
+        sale_quantity: 20,
+        quantity_member: 5,
+        from_time: 1703213170286,
+        to_time: 1703955600000,
+        status: 'out_stock',
+        category_info: [
+            {
+                id: 2,
+                name_category: 'Bàn phím'
+            },
+        ],
+        list_group: [],
+    }
+];
+
+const User: UserInfo[] = [
+    {
+        leaderId: 1,
+        leaderName: 'Hiếu Nguyễn',
+        leaderEmail: 'hieunguyen@hurasoft.com',
+        list_group: [
+            {
+                group_id: 1,
+                name_group: 'Hura săn sale',
+                product_id: 1,
+                productUrl: '/',
+                product_image: 'https://mygear.vn/media/product/589-1.jpg',
+                product_name: 'Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea',
+                price: 3190000,
+                retail_price: 2190000,
+                quantity: 20,
+                sale_quantity: 10,
+                quantity_member: 5,
+                to_time: 1703955600000,
+                list_member: [
+                    {
+                        id_member: 1,
+                        name_member: 'Hồng Vũ',
+                        email_member: 'hongvt@hurasoft.com'
+                    }, {
+                        id_member: 2,
+                        name_member: 'Ánh trần',
+                        email_member: 'anhtt@hurasoft.com'
+                    }, {
+                        id_member: 3,
+                        name_member: 'Đức Quân',
+                        email_member: 'ducnq@hurasoft.com'
+                    }
+                ]
+            }
+        ]
+    }
+]
+
+
+function formatPrice(price: number) {
+    var b = price.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
+    var len = b.length;
+    b = b.substring(0, len - 3);
+    return b;
+}
+
+
+function countDown(iid: string, endTime: number): void {
+
+    const updateCountdown = () => {
+        const now: number = Date.now();
+        const distance: number = endTime - now;
+        if (distance > 0) {
+            const [days, hours, minutes, seconds] = getTimeComponents(distance);
+            displayCountdown(iid, days, hours, minutes, seconds);
+        } else {
+            clearInterval(timer);
+        }
+    };
+
+    // Initial update to avoid delay
+    updateCountdown();
+
+    const timer: NodeJS.Timeout = setInterval(updateCountdown, 1000);
+}
+
+function getTimeComponents(distance: number): [number, number, number, number] {
+
+    const days: number = Math.floor(distance / (1000 * 60 * 60 * 24));
+    const hours: number = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes: number = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds: number = Math.floor((distance % (1000 * 60)) / 1000);
+
+    return [days, hours, minutes, seconds];
+}
+
+function displayCountdown(iid: string, days: number, hours: number, minutes: number, seconds: number): void {
+    const element: HTMLElement | null = document.querySelector(`.${iid}`);
+    if (element) {
+        if (days > 0) {
+            element.innerHTML = `
+            <b>${formatTimeComponent(days)}</b>
+            <b>${formatTimeComponent(hours)}</b>
+            <b>${formatTimeComponent(minutes)}</b>
+            <b>${formatTimeComponent(seconds)}</b>`;
+        } else {
+            element.innerHTML = `
+                <b>${formatTimeComponent(hours)}</b>
+                <b>${formatTimeComponent(minutes)}</b>
+                <b>${formatTimeComponent(seconds)}</b>`;
+        }
+    }
+}
+
+function formatTimeComponent(component: number): string {
+    return component <= 9 ? '0' + component : component.toString();
+}
+
+function formatTime(timestamp: number) {
+    const date = new Date(timestamp);
+    const formattedTime = date.toLocaleString('en-US', { day: 'numeric', month: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' });
+    return formattedTime;
+}
+
+
+function formatName(name: string) {
+    // Extract the first letter and capitalize it
+    const formattedName = name.charAt(0).toUpperCase();
+
+    return formattedName;
+}
+
+
+
+
+
+const AddGroupTemplate = `
+    <a href="javascript:void(0)" class="btn-close"
+        onclick="$('.global-popup').removeClass('active');closeBackground()">
+        <i class="fa fa-times"></i>
+    </a>
+    <div class="content" id="js-load-add-group">
+        <h2 class="title">Đặt tên nhóm của bạn</h2>
+        <div class="note">
+            Chào Bạn, Hiện tại còn 6 sản phẩm Chuột máy tính. Nhanh chóng tạo nhóm ngay để được mua sản phẩm với
+            giá hấp dẫn.
+        </div>
+        <input type="text" class="name-group" placeholder="Nhập tên nhóm" />
+        <i class="vd">Vd: Hurasort săn sale Noel</i>
+        <a href="javascript:void(0)" class="btn-add-group" onclick="showContentPopup('share_group')">
+            <i class="fa fa-angle-double-right"></i>
+            <span>Tạo nhóm</span>
+            <i class="fa fa-angle-double-left"></i>
+        </a>
+    </div>
+`;
+
+const ShareGroupTemplate = `
+    <a href="javascript:void(0)" class="btn-close"
+        onclick="$('.global-popup').removeClass('active');closeBackground()">
+        <i class="fa fa-times"></i>
+    </a>
+    <div class="content">
+        <h2 class="title">Chúc mừng bạn!</h2>
+        <div class="note">
+            Nhóm được tạo thành công, vui lòng check mail để xem chi tiết thông tin nhóm của bạn!
+        </div>
+        <div class="box-share-link d-flex align-items">
+            <div class="info-link">
+                <span>Link nhóm:</span>
+                <a href="" class="blue" id="linkshare">https://adman.vn/group-order?id=2431177</a>
+            </div>
+            <a href="javascript:void(0)" onclick="copyLink()" class="btn-copy">
+                <i class="fa fa-copy"></i>
+                Copy
+            </a>
+        </div>
+        <div class="list-btn-share d-flex align-items">
+            <b>Share:</b>
+            <div class="d-flex align-items">
+                <a href="">
+                    <img src="./assets/images/icon-facebook.png" alt="icon facebook">
+                </a>
+                <a href="">
+                    <img src="./assets/images/icon-zalo.png" alt="icon zalo">
+                </a>
+                <a href="">
+                    <img src="./assets/images/icon-email.png" alt="icon email">
+                </a>
+            </div>
+        </div>
+        <div class="form-add-email">
+            <p>Hoặc bạn có thể mời bạn bè của bạn bằng cách nhập email</p>
+            <div class="content-email" id="list-email-share">
+                <input type="text" id="email1" placeholder="Email 1">
+                <input type="text" id="email2" placeholder="Email 2">
+            </div>
+            <a href="javascript:void(0)" class="add-email" onclick="addEmail()">
+                + Thêm email
+            </a>
+        </div>
+
+        <a href="javascript:void(0)" class="btn-add-member" onclick="showContentPopup('waiting_join')">
+            Gửi email thông báo
+        </a>
+    </div>
+`;
+
+
+const JoinProductTemplate = `
+<a href="javascript:void(0)" class="btn-close" onclick="closeBackground()">
+            <i class="fa fa-times"></i>
+        </a>
+        <div class="content">
+            <div class="avatar-leader">v</div>
+            <b class="title-member text-center">Hồng vừa mời bạn tham gia nhóm Hura săn sale Noel</b>
+            <div class="box-info-product">
+                <div class="product-item d-flex">
+                    <a href="" class="product-image">
+                        <img src="./assets/images/image-sp.png" alt="">
+                        <div class="box-qnt d-flex align-items space-center">
+                            <span class="sl">Sl: 30</span>
+                            <span class="conlai">Còn lại: 10</span>
+                        </div>
+                    </a>
+                    <div class="product-info">
+                        <a href="" class="product-name line-clamp-2">Combo Bàn phím và Chuột không dây MOFII CANDY
+                            Milk
+                            Tea/ Nâu Combo Bàn phím và Chuột không dây MOFII CANDY Milk Tea/ Nâu</a>
+                        <div class="box-price d-flex align-items">
+                            <div class="retail_price">
+                                199.000đ
+                            </div>
+                            <span class="red">Khi mua nhóm 5 người</span>
+                        </div>
+
+                        <div class="list-memeber d-flex align-items">
+                            <div class="box-memeber d-flex">
+                                <a href="javascript:void(0)" class="item">
+                                    v
+                                </a>
+                                <a href="javascript:void(0)" class="item add">
+                                    +
+                                </a>
+                            </div>
+                            <div class="note-member">
+                                Cần thêm <b style="color: var(--color-global);">02</b> thành viên
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="note-member text-center">
+                Bạn có 10 phút để tham gia nhóm, mau chóng ấn chọn
+                Tham gia nhóm để có cơ hội mua hàng với giá siêu ưu đãi nhé!
+            </div>
+            <a href="javascript:void(0)" class="btn-member-add-group">
+                <b>Tham gia nhóm</b>
+                <div class="product-time-holder d-flex" id="js-time-join">
+                    <b>20</b>
+                    <b>11</b>
+                    <b>30</b>
+                </div>
+            </a>
+    </div>
+`;
+
+
+const SuccessMemberTemplate = `
+    <a href="javascript:void(0)" class="btn-close"
+        onclick="$('.global-popup').removeClass('active');closeBackground()">
+        <i class="fa fa-times"></i>
+    </a>
+    <div class="content">
+        <h2 class="title">Chúc mừng bạn</h2>
+        <div class="note">
+            Đã tham gia nhóm thành công
+        </div>
+        <div class="txt">
+            Nhóm Hurasoft săn sale Noel đã đủ số lượng thành viên thành công mở khóa ưu đãi sản phẩm!
+        </div>
+        <b class="name-leader">
+            Người thanh toán: Hồng
+        </b>
+        <p>Thông tin thanh toán sẽ được gửi qua email của bạn.</p>
+        <a href="javascript:void(0)" class="btn-blue">
+            ok
+        </a>
+    </div>
+`;
+
+
+const InfoPayProductTemplate = `
+    <a href="javascript:void(0)" class="btn-close"
+        onclick="$('.global-popup').removeClass('active');closeBackground()">
+        <i class="fa fa-times"></i>
+    </a>
+    <div class="content">
+        <h2 class="title">Chúc mừng nhóm Hurasoft săn sale</h2>
+        <div class="note">Nhóm đã đủ số lượng thành viên để tham gia mua sản phẩm với giá ưu đãi</div>
+        <div class="info-pay">
+            <div class="title">Thông tin thanh toán</div>
+            <div class="cnt d-flex align-items">
+                <div class="left">
+                    <img src="./assets/images/qr-pay.png" alt="pay">
+                </div>
+                <div class="right">
+                    <span>NGUYỄN THỊ DUYÊN:</span>
+                    <span>Ngân hàng: ACB</span>
+                    <span>Số tài khoản: 7960888888</span>
+                    <span>Nội dung thanh toán: Tên nhóm của bạn + SĐT</span>
+                </div>
+            </div>
+        </div>
+        <div class="box-timeout-pay">
+            <div class="d-flex flex-wrap space-center">
+                <span>Bạn vui lòng thanh toán trước</span>
+                <div class="product-time-holder d-flex" id="js-time-join">
+                    <b>20</b>
+                    <b>11</b>
+                    <b>30</b>
+                </div>
+                <div style="width: 100%;text-align: center;">Để được hưởng ưu đãi nhóm</div>
+            </div>
+        </div>
+        <div class="box-cskh">
+            Thanh toán xong hãy chụp lại giao dịch. CSKH <b>19002223</b> sẽ liên hệ xác nhận lại với bạn
+        </div>
+        <a href="javascript:void(0)" class="btn-blue">
+            ok
+        </a>
+    </div>
+`;

src/main.ts

@@ -0,0 +1,422 @@
+async function goi_sp_tu_api(): Promise<ProductInfo[]> {
+    return new Promise((resolve, reject) => {
+        return resolve(List_product);
+    })
+}
+
+async function goi_sp_user_tu_api(): Promise<UserInfo[]> {
+    return new Promise((resolve, reject) => {
+        return resolve(User);
+    })
+}
+
+async function hienthi_nhomsp() {
+    const lay_sp_user_tu_api: UserInfo[] = await goi_sp_user_tu_api();
+
+    console.log(lay_sp_user_tu_api);
+    DisplayListProductGroup(lay_sp_user_tu_api, 'js-holder-product-group')
+}
+
+async function hienthi_sp() {
+    const lay_sp_tu_api: ProductInfo[] = await goi_sp_tu_api();
+
+    // code hien thi danh sach dang dien ra
+    console.log(lay_sp_tu_api)
+    showListProductHome(lay_sp_tu_api, 'out_stock', 'js-holder-list-out-stock')
+    showListProductHome(lay_sp_tu_api, 'started', 'js-holder-list-started')
+    showListProductHome(lay_sp_tu_api, 'coming', 'js-holder-list-coming');
+}
+
+function showListProductHome(lay_sp_tu_api: ProductInfo[], status: string, holderId: string) {
+    const html: string[] = [];
+    const holder = document.getElementById(holderId);
+
+    lay_sp_tu_api
+        .filter((product: ProductInfo) => product.status == status)
+        .forEach(function (product, keyIndex) {
+            html.push(
+                xayhtml(product)
+            );
+            if (status != 'out_stock' && product.to_time > product.from_time) {
+                const countdownTime = (status == 'started') ? product.to_time : product.from_time;
+                countDown(`js-deal-time-${product.productId}`, countdownTime);
+            }
+        });
+    if (holder) {
+        holder.innerHTML = html.join('');
+    }
+
+}
+
+function xayhtml(product: ProductInfo): string {
+    const quantity_sold = product.quantity - product.sale_quantity;
+    const line_sold = Math.ceil((quantity_sold / product.quantity) * 100);
+
+    const HtmlSl_nhom = product.quantity > product.quantity_member
+        ? `<span class="soluongnhom">${product.quantity / product.quantity_member} nhóm duy nhất</span>`
+        : '';
+
+    let HtmlProductItem = '';
+
+    if (product.status === 'started' && product.price > product.sale_quantity) {
+        let htmlCheckGroup = '';
+        let HtmlListMember = '';
+        let htmlBtnProduct = '';
+        let addMember = '';
+        let noteMember = '';
+
+        if (product.list_group.length > 0) {
+            product.list_group.forEach((item: infoGroup) => {
+                item.list_member.forEach((user: infoMember, index) => {
+                    var more_qnt_member = product.quantity_member - index - 1;
+                    const isLastMember = index > product.quantity_member;
+                    console.log(isLastMember)
+
+                    HtmlListMember += `
+                        <a href="javascript:void(0)" class="item${isLastMember ? 'add' : ''}">
+                            ${formatName(user.name_member)}
+                        </a>
+                    `;
+
+                    addMember = isLastMember ? `<a href="javascript:void(0)" class="item add">+</a>` : '';
+
+                    noteMember = isLastMember ? `Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên` : '';
+                });
+            });
+
+            htmlCheckGroup = `
+                <div class="box-price d-flex align-items">
+                    <div class="retail_price">${formatPrice(product.retail_price)}đ</div>
+                    <del class="price-old">${formatPrice(product.price)}đ</del>
+                </div>
+                <div class="list-memeber d-flex align-items">
+                    <div class="box-memeber d-flex">${HtmlListMember} ${addMember}</div>
+                    <div class="note">${noteMember}</div>
+                </div>
+            `;
+
+            htmlBtnProduct = `
+                <a href="javascript:void(0)" class="add-member" onclick="ShowPopupGlobal('AddMember')">
+                    <i class="fa fa-plus"></i>
+                    Mời thêm bạn
+                </a>
+            `;
+        } else {
+            htmlCheckGroup = `
+                <div class="box-price d-flex align-items">
+                    <div class="retail_price">${formatPrice(product.retail_price)}đ</div>
+                    <span class="red">Khi mua nhóm ${product.quantity_member} người</span>
+                </div>
+                <div class="price-banle">Giá bán lẻ: ${formatPrice(product.price)}đ</div>
+            `;
+
+            htmlBtnProduct = `
+                <a href="javascript:void(0)" class="add-group" onclick="ShowPopupGlobal('AddGroup')">
+                    <i class="fa fa-angle-double-right"></i>
+                    <span>Tạo nhóm ngay</span>
+                    <i class="fa fa-angle-double-left"></i>
+                </a>
+            `;
+        }
+
+        HtmlProductItem = `
+            <div class="product-item d-flex">
+                <a href="${product.productUrl}" class="product-image">
+                    <img src="${product.image}" alt="${product.product_name}">
+                    ${HtmlSl_nhom}
+                </a>
+                <div class="product-info">
+                    <a href="${product.productUrl}" class="product-name line-clamp-2">${product.product_name}</a>
+                    ${htmlCheckGroup}
+                    <div class="box-sold">
+                        <i class="icon_2023 hot"></i>
+                        <div class="line-deal" style="width: ${line_sold}%;"></div>
+                        <span class="quantity-sold">${quantity_sold} đã bán hết</span>
+                    </div>
+                    <div class="box-button d-flex align-items space-between">
+                        <div class="time d-flex align-items">
+                            <i class="icon_2023 time"></i>
+                            <div class="product-time-holder js-deal-time-${product.productId}" data-time="${product.to_time}"></div>
+                        </div>
+                        ${htmlBtnProduct}
+                    </div>
+                </div>
+            </div>
+        `;
+    } else if (product.status === 'coming') {
+        HtmlProductItem = `
+            <div class="product-item d-flex">
+                <a href="${product.productUrl}" class="product-image">
+                    <img src="${product.image}" alt="${product.product_name}">
+                    ${HtmlSl_nhom}
+                </a>
+                <div class="product-info">
+                    <a href="${product.productUrl}" class="product-name line-clamp-2">${product.product_name}</a>
+                    <div class="box-price d-flex align-items">
+                        <div class="retail_price">${formatPrice(product.retail_price)}đ</div>
+                        <span class="red">Khi mua nhóm ${product.quantity_member} người</span>
+                    </div>
+                    <div class="price-banle">Giá bán lẻ: ${formatPrice(product.price)}đ</div>
+                    <div class="box-time d-flex align-items">
+                        <i class="icon_2023 time"></i>
+                        <div class="product-time-holder js-deal-time-${product.productId}" data-time="${product.from_time}"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+    } else if (product.status === 'out_stock') {
+        HtmlProductItem = `
+            <div class="product-item d-flex">
+                <a href="${product.productUrl}" class="product-image sold">
+                    <img src="${product.image}" alt="${product.product_name}">
+                    ${HtmlSl_nhom}
+                    <span class="icon-sold"></span>
+                </a>
+                <div class="product-info">
+                    <a href="${product.productUrl}" class="product-name line-clamp-2">${product.product_name}</a>
+                    <div class="retail_price">${formatPrice(product.retail_price)}</div>
+                    <div class="total-group">
+                        <i class="icon_2023 group"></i>
+                        <span>5 Nhóm mua hàng thành công</span>
+                    </div>
+                    <div class="box-sold">
+                        <i class="icon_2023 hot"></i>
+                        <div class="line-deal" style="width: 100%;"></div>
+                        <span class="quantity-sold">${product.quantity} đã bán hết</span>
+                    </div>
+                    <div class="box-time d-flex align-items">
+                        <i class="icon_2023 time"></i>
+                        <div class="product-time-holder">
+                            <b>00</b><b>00</b><b>00</b>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    } else {
+        HtmlProductItem = `<div class="d-flex align-items space-center notproduct">Sản phẩm đang được cập nhật..!</div>`;
+    }
+
+    return HtmlProductItem;
+}
+
+
+
+
+function DisplayListProductGroup(ProductUser: UserInfo[], holderId: string) {
+    const html: string[] = [];
+    const holder = document.getElementById(holderId);
+
+    ProductUser.forEach(function (product, keyIndex) {
+        html.push(
+            xayhtmlProductGroup(product)
+        );
+    })
+
+    if (holder) {
+        holder.innerHTML = html.join('');
+    }
+}
+
+function xayhtmlProductGroup(product: UserInfo) {
+    var HtmlProductItem: string = '';
+    var HtmlListMember: string = '';
+    var addMember: string = '';
+    var noteMember: string = '';
+    if (product.list_group.length > 0) {
+        product.list_group.forEach((Item: infoGroup) => {
+            const quantity_sold = Item.quantity - Item.sale_quantity;
+            const line_sold = Math.ceil((Item.quantity - Item.sale_quantity) / Item.quantity * 100);
+
+            var HtmlSl_nhom: string = '';
+            if (Item.quantity > Item.quantity_member) {
+                HtmlSl_nhom = `<span class="soluongnhom">${Item.quantity / Item.quantity_member} nhóm duy nhất</span>`;
+            }
+
+            Item.list_member.forEach((user: infoMember, index) => {
+                if (index > Item.quantity_member) {
+                    HtmlListMember += `
+                            <a href="javascript:void(0)" class="item">
+                                ${formatName(user.name_member)}
+                            </a>
+                        `;
+                    addMember = ``;
+                    noteMember = ``;
+                } else {
+                    var more_qnt_member = Item.quantity_member - index - 1;
+                    HtmlListMember += `
+                            <a href="javascript:void(0)" class="item">
+                                ${formatName(user.name_member)}
+                            </a>
+                        `;
+                    addMember = `
+                            <a href="javascript:void(0)" class="item add">
+                                +
+                            </a>
+                        `;
+                    noteMember = `
+                            Cần thêm <b style="color: var(--color-global);">${more_qnt_member}</b> thành viên
+                        `;
+                }
+            })
+
+            HtmlProductItem += `
+                <div class="product-item d-flex">
+                    <a href="${Item.productUrl}" class="product-image">
+                        <img src="${Item.product_image}" alt="${Item.product_name}">
+                        ${HtmlSl_nhom}
+                    </a>
+                    <div class="product-info">
+                        <a href="${Item.productUrl}" class="product-name line-clamp-2">${Item.product_name}</a>
+                        <div class="box-price d-flex align-items">
+                            <div class="retail_price">
+                                ${formatPrice(Item.retail_price)}đ
+                            </div>
+                            <del class="price-old">${formatPrice(Item.price)}đ</del>
+                        </div>
+
+                        <div class="list-memeber d-flex align-items">
+                            <div class="box-memeber d-flex">
+                                ${HtmlListMember}${addMember}
+                            </div>
+                            <div class="note">
+                                ${noteMember}
+                            </div>
+                        </div>
+
+                        <div class="box-sold">
+                            <i class="icon_2023 hot"></i>
+                            <div class="line-deal" style="width: ${line_sold}%;"></div>
+                            <span class="quantity-sold">${quantity_sold} đã bán hết</span>
+                        </div>
+                        <div class="box-button d-flex align-items space-between">
+                            <div class="box-time d-flex align-items">
+                                <i class="icon_2023 time"></i>
+                                <div class="product-time-holder js-deal-time-${Item.product_id}" data-time="${Item.to_time}">
+                                </div>
+                            </div>
+                            <a href="javascript:void(0)" class="add-member">
+                                <i class="fa fa-plus"></i>
+                                Mời thêm bạn
+                            </a>
+                        </div>
+                        <div class="note-leader">
+                            <i class="icon_2023 bell"></i>
+                            <span>${product.leaderEmail} vừa tạo nhóm thành công</span>
+                        </div>
+                    </div>
+                </div>
+            `;
+        })
+    }
+    return HtmlProductItem;
+
+}
+
+
+function closeBackground() {
+    var eleBackground = document.getElementById('overlay');
+    eleBackground!.classList.remove('active');
+
+    var eleGlobalPopup = document.getElementById('js-global-popup');
+    eleGlobalPopup!.classList.remove('active');
+
+    document.body.classList.remove('active');
+
+}
+
+function copyLink() {
+    // Get the pre element
+    var preElement = document.getElementById("linkshare") as HTMLPreElement | null;
+
+    // Check if the element exists
+    if (preElement) {
+        // Create a textarea element
+        var textarea = document.createElement("textarea");
+
+        textarea.value = preElement.textContent || "";
+
+        document.body.appendChild(textarea);
+
+        textarea.select();
+
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+
+        alert("Copy link share thành công!");
+    }
+}
+
+// them o nhap email
+let emailCounter = 3;
+
+function addEmail() {
+
+    const contentEmail = document.getElementById('list-email-share');
+
+    const newEmailInput = document.createElement('input');
+
+    newEmailInput.type = 'text';
+    newEmailInput.id = 'email' + emailCounter;
+    newEmailInput.placeholder = 'Email ' + emailCounter;
+
+    contentEmail?.appendChild(newEmailInput);
+
+    emailCounter++;
+}
+
+function CountdownJoin() {
+    let countdown = 10 * 60;
+    const countdownElement = document.getElementById('js-time-join');
+
+    function updateCountdown() {
+        const minutes = Math.floor(countdown / 60);
+        const seconds = countdown % 60;
+        const formattedMinutes = minutes.toString().padStart(2, '0');
+        const formattedSeconds = seconds.toString().padStart(2, '0');
+        const formattedTime = `<b>${formattedMinutes}</b><b>${formattedSeconds}</b>`;
+        if (countdownElement) {
+            countdownElement.innerHTML = formattedTime;
+        }
+    }
+
+    function decrementCountdown() {
+        if (countdown > 0) {
+            countdown--;
+            updateCountdown();
+        } else {
+            clearInterval(intervalId);
+            closeBackground();
+        }
+    }
+
+    updateCountdown();
+    const intervalId = setInterval(decrementCountdown, 1000);
+}
+
+function ShowPopupGlobal(key: string) {
+    const globalPopup = document.getElementById('js-global-popup');
+    globalPopup?.classList.add('active')
+
+    const eleBackground = document.getElementById('overlay');
+    eleBackground!.classList.add('active');
+
+    document.body.classList.add('active');
+
+    const holderPupop = document.getElementById('js-content-popup');
+
+    if (key == 'AddGroup') {
+        holderPupop!.innerHTML = AddGroupTemplate;
+    } else if (key == 'AddMember') {
+        holderPupop!.innerHTML = ShareGroupTemplate;
+    }
+}
+
+
+//  run function
+hienthi_sp();
+hienthi_nhomsp();
+CountdownJoin();
+
+
+