Day 30: Major Project 2: Cart, Checkout & Launch

const FREE_DELIVERY_FROM = 1500;
const DELIVERY_FEE = 60;

function stepFor(product) {
  return product.unit === 'box' ? 1 : 0.25;            // boxes in 1s, sweets in 250 g steps
}

function addToCart(id, qty) {
  const product = store.get().products.find((p) => p.id === id);
  if (!product || product.stock === 0) return;
  const amount = qty ?? (product.unit === 'box' ? 1 : 0.5);
  store.update((s) => {
    const existing = s.cart.find((line) => line.id === id);
    const cart = existing
      ? s.cart.map((line) => (line.id === id ? { ...line, qty: Math.min(50, line.qty + amount) } : line))
      : [...s.cart, { id, qty: amount }];
    return { cart };
  });
  const badge = $('#cart-count');
  badge.classList.remove('bump');
  void badge.offsetWidth;                               // restart the CSS animation
  badge.classList.add('bump');
  toast(`Added ${formatQty(amount, product.unit)} ${product.name} 🛒`);
}

function changeQty(id, direction) {
  const product = store.get().products.find((p) => p.id === id);
  if (!product) return;
  const step = stepFor(product) * direction;
  store.update((s) => ({
    cart: s.cart
      .map((line) => (line.id === id ? { ...line, qty: Math.round((line.qty + step) * 100) / 100 } : line))
      .filter((line) => line.qty > 0),                  // reaching 0 removes the line
  }));
}

function removeFromCart(id) {
  store.update((s) => ({ cart: s.cart.filter((line) => line.id !== id) }));
}

// joins cart ids with product data; unknown ids (product removed) are skipped
function cartLines({ cart, products }) {
  return cart
    .map((line) => ({ ...line, product: products.find((p) => p.id === line.id) }))
    .filter((line) => line.product);
}

function cartTotals(state) {
  const lines = cartLines(state);
  const subtotal = lines.reduce((sum, l) => sum + l.product.price * l.qty, 0);
  const delivery = subtotal === 0 || subtotal >= FREE_DELIVERY_FROM ? 0 : DELIVERY_FEE;
  const count = lines.length;
  return { lines, subtotal, delivery, total: subtotal + delivery, count };
}

function renderCart(state) {
  const { lines, subtotal, delivery, total, count } = cartTotals(state);
  $('#cart-count').textContent = count;

  const list = $('#cart-list');
  list.replaceChildren(...lines.map(({ id, qty, product }) => {
    const li = document.createElement('li');
    li.className = 'cart-item';
    li.dataset.id = id;
    const img = document.createElement('img');
    img.src = product.image;
    img.alt = '';
    const info = document.createElement('div');
    const name = document.createElement('div');
    name.className = 'cart-item__name';
    name.textContent = product.name;
    const stepper = document.createElement('div');
    stepper.className = 'stepper';
    stepper.innerHTML = '<button type="button" data-action="dec" aria-label="Less">−</button><span></span><button type="button" data-action="inc" aria-label="More">+</button>';
    stepper.querySelector('span').textContent = formatQty(qty, product.unit);
    const remove = document.createElement('button');
    remove.type = 'button';
    remove.className = 'remove';
    remove.dataset.action = 'remove';
    remove.textContent = 'Remove';
    info.append(name, stepper, ' ', remove);
    const amount = document.createElement('strong');
    amount.textContent = rupees(product.price * qty);
    li.append(img, info, amount);
    return li;
  }));

  $('#cart-empty').hidden = count > 0;
  $('#cart-totals').hidden = count === 0;
  $('#t-subtotal').textContent = rupees(subtotal);
  $('#t-delivery').textContent = delivery === 0 ? 'FREE' : rupees(delivery);
  $('#t-total').textContent = rupees(total);
  $('#t-hint').textContent = subtotal > 0 && subtotal < FREE_DELIVERY_FROM
    ? `Add ${rupees(FREE_DELIVERY_FROM - subtotal)} more for free delivery 🚚`
    : subtotal > 0 ? 'You get free delivery 🎉' : '';
}

import { test } from 'node:test';
import assert from 'node:assert/strict';

const FREE_DELIVERY_FROM = 1500, DELIVERY_FEE = 60;
const products = [
  { id: 1, name: 'Kaju Katli', price: 900, unit: 'kg' },
  { id: 7, name: 'Classic Gift Box', price: 480, unit: 'box' },
];
function cartTotals({ cart, products }) {
  const lines = cart.map((l) => ({ ...l, product: products.find((p) => p.id === l.id) })).filter((l) => l.product);
  const subtotal = lines.reduce((sum, l) => sum + l.product.price * l.qty, 0);
  const delivery = subtotal === 0 || subtotal >= FREE_DELIVERY_FROM ? 0 : DELIVERY_FEE;
  return { subtotal, delivery, total: subtotal + delivery, count: lines.length };
}

test('empty cart costs nothing', () => {
  assert.deepEqual(cartTotals({ cart: [], products }), { subtotal: 0, delivery: 0, total: 0, count: 0 });
});
test('small order pays ₹60 delivery', () => {
  assert.equal(cartTotals({ cart: [{ id: 1, qty: 0.5 }], products }).total, 510);
});
test('exactly ₹1,500 gets free delivery', () => {
  const t = cartTotals({ cart: [{ id: 1, qty: 1 }, { id: 7, qty: 1.25 }], products });
  assert.equal(t.subtotal, 1500);
  assert.equal(t.delivery, 0);
});
test('a removed product in an old saved cart is ignored', () => {
  assert.equal(cartTotals({ cart: [{ id: 99, qty: 1 }, { id: 7, qty: 2 }], products }).count, 1);
});

const checkoutRules = {
  name: (v) => v.trim().length >= 2 || 'Please enter your full name.',
  phone: (v) => /^[6-9]\d{9}$/.test(v.replace(/\D/g, '').replace(/^(91|0)(?=\d{10}$)/, '')) || 'Enter a 10-digit mobile number starting with 6–9.',
  address: (v, form) => form.mode.value === 'pickup' || /\b[1-9]\d{5}\b/.test(v) || 'Add your full address including the 6-digit PIN code.',
  coupon: (v) => v.trim() === '' || /^[A-Za-z0-9]{4,12}$/.test(v.trim()) || 'Coupon codes have 4–12 letters or digits.',
};

function setFieldError(form, field, message) {
  const input = form.elements[field];
  input.setAttribute('aria-invalid', message ? 'true' : 'false');
  $(`#co-${field}-err`).textContent = message || '';
}

function validateCheckout(form) {
  let firstBad = null;
  for (const [field, rule] of Object.entries(checkoutRules)) {
    const result = rule(form.elements[field].value, form);
    setFieldError(form, field, result === true ? '' : result);
    if (result !== true && !firstBad) firstBad = field;
  }
  if (firstBad) form.elements[firstBad].focus();
  return !firstBad;
}

function openCheckout() {
  const { count } = cartTotals(store.get());
  if (count === 0) return;
  $('#cart-dialog').close();
  resetCheckoutForm();
  $('#checkout-dialog').showModal();
  $('#co-name').focus();
}

function resetCheckoutForm() {
  const body = $('#checkout-body');
  if (!$('#checkout-form')) body.replaceChildren(...checkoutFormNodes);   // after a successful order
  $('#co-form-err').textContent = '';
  updateAddressVisibility();
}

function updateAddressVisibility() {
  const form = $('#checkout-form');
  if (form) $('#address-field').hidden = form.mode.value === 'pickup';
}

async function submitCheckout(event) {
  event.preventDefault();
  const form = event.currentTarget;
  if (!validateCheckout(form)) return;

  const button = $('#place-order');
  button.disabled = true;                                   // no double orders
  button.textContent = 'Placing order…';
  $('#co-form-err').textContent = '';
  const data = Object.fromEntries(new FormData(form));
  const items = store.get().cart.map(({ id, qty }) => ({ id, qty }));

  try {
    const receipt = await placeOrder({ ...data, phone: data.phone.replace(/\D/g, '').slice(-10), coupon: data.coupon.trim(), items });
    store.update({ cart: [] });                              // empty the cart only after success
    showReceipt(receipt, data);
  } catch (err) {
    if (err.status === 422) {
      for (const [field, message] of Object.entries(err.fields)) {
        if (form.elements[field]) setFieldError(form, field, message);
        else $('#co-form-err').textContent = message;
      }
    } else {
      $('#co-form-err').textContent = err.message;
    }
  } finally {
    button.disabled = false;
    button.textContent = 'Place order';
  }
}

POST https://codingeasily.in/api/sweets/
{ "name": "Aarti Gupta", "phone": "9829012345", "mode": "delivery",
  "address": "12 MI Road, Jaipur 302001", "coupon": "SWEET10",
  "items": [ { "id": 1, "qty": 0.75 }, { "id": 2, "qty": 1 } ] }

← 201 Created
{ "orderId": "SS2610258370",
  "items": [ { "id": 1, "name": "Kaju Katli", "qty": 0.75, "amount": 675 },
             { "id": 2, "name": "Malai Ghewar", "qty": 1, "amount": 650 } ],
  "subtotal": 1325, "discount": 133, "delivery": 60, "total": 1252,
  "message": "Order received (practice API – nothing was stored)." }

← 422 (wrong coupon)
{ "error": "Please fix the highlighted fields.",
  "fields": { "coupon": "Coupon not valid (SWEET10 works on orders of ₹500+)." } }

function showReceipt(receipt, data) {
  const box = document.createElement('div');
  box.className = 'success';
  const unitOf = (id) => (store.get().products.find((p) => p.id === id) || {}).unit;
  const rows = receipt.items.map((i) => [`${i.name} – ${formatQty(i.qty, unitOf(i.id))}`, rupees(i.amount)]);
  rows.push(['Subtotal', rupees(receipt.subtotal)]);
  if (receipt.discount) rows.push(['Coupon discount', '−' + rupees(receipt.discount)]);
  rows.push([data.mode === 'pickup' ? 'Pick-up' : 'Delivery', receipt.delivery ? rupees(receipt.delivery) : 'FREE']);
  rows.push(['Total to pay', rupees(receipt.total)]);

  const table = document.createElement('table');
  for (const [label, value] of rows) {
    const tr = table.insertRow();
    tr.insertCell().textContent = label;
    tr.insertCell().textContent = value;
  }
  const big = document.createElement('p');
  big.className = 'big';
  big.textContent = '🎉';
  const title = document.createElement('h2');
  title.textContent = `Order ${receipt.orderId} placed!`;
  const note = document.createElement('p');
  note.textContent = `Thank you, ${data.name.trim()}. We will call you shortly to confirm. (${receipt.message})`;

  const text = [`Namaste Sharma Sweets 🙏`, `Order ${receipt.orderId}`, ...receipt.items.map((i) => `• ${i.name} – ${formatQty(i.qty, unitOf(i.id))}`), `Total ${rupees(receipt.total)}`].join('\n');
  const wa = document.createElement('a');
  wa.className = 'btn btn--block';
  wa.href = 'https://wa.me/919829012345?text=' + encodeURIComponent(text);
  wa.target = '_blank';
  wa.rel = 'noopener';
  wa.textContent = 'Send order on WhatsApp';

  box.append(big, title, note, table, wa);
  $('#checkout-body').replaceChildren(box);
  toast('Order placed successfully ✅');
}

let checkoutFormNodes = [];       // the original form, kept to restore it after a receipt

# Sharma Sweets – Online Shop (Vanilla JavaScript)

Live demo: https://<your-username>.github.io/sharma-shop/

A mobile-first sweet-shop store for a real Jaipur business, built without frameworks.

## Features
- Live product API with loading skeleton, offline/timeout errors and retry
- Debounced search, category/price/stock filters, sorting, shareable URL filters
- Cart with 250 g steps, saved in localStorage and synced across tabs
- Checkout validation (Indian mobile, PIN code), server-side coupon and totals
- Order receipt + one-tap WhatsApp confirmation
- Accessible dialogs, keyboard shortcuts ("/" to search), dark mode

## Tech
HTML5, CSS (Grid, custom properties, :has, dialog), JavaScript (ES2022, fetch,
AbortController, URLSearchParams, Intl.NumberFormat), node:test, Playwright

## Structure
js/utils.js · api.js · store.js · catalogue.js · cart.js · checkout.js · app.js