The simplest way for anyone to sell globally.

Customize the Ping Business merchant-store UI for Demo Store.

Authoritative public source:
- Repository: https://github.com/PingBusiness/PingBusiness
- Branch: main
- Kit root: /merchant-store-vibe-coding-kit
- Kit page: https://github.com/PingBusiness/PingBusiness/tree/main/merchant-store-vibe-coding-kit
- Agent instructions: https://raw.githubusercontent.com/PingBusiness/PingBusiness/main/merchant-store-vibe-coding-kit/AGENTS.md

Retrieve the public repository yourself and read AGENTS.md, design/DESIGN_AGENT.md, prompts/DESIGN_PROMPT.md, docs/ESTORE_APP_API_SPEC.md, docs/SECURITY.md, and the complete source/merchant-store tree under the kit root before editing. Never use the obsolete /estore-ui tree elsewhere in the monorepo.

If you cannot retrieve the kit yourself — no repository access, no file access, and no web access, which is normal for a chat-only assistant — say so before anything else and ask me to download https://github.com/PingBusiness/PingBusiness/archive/refs/heads/main.zip and attach it to this conversation. Name the specific files you need if the whole archive is too large to attach. Do not reconstruct the kit from memory: a plausible-looking answer that does not match the real source fails only after I have deployed it, which is far worse than telling me you need the files.

Brand inputs:
- Store name: Demo Store
- Primary colour: #181D27 (near-black, for text and primary buttons)
- Secondary/accent colours: #FD4912 for accents and calls to action, #FAFAFA surfaces on #FFFFFF, #F5F5F5 borders
- Typography: Inter for headings and interface, Poppins for body copy
- Logo/assets: none attached yet — set the store name as a plain wordmark until I send a logo
- Requirements: match the storefront demo on pingbusiness.org: light surfaces, one accent colour, generous spacing, responsive from 360px up, and WCAG AA contrast. Swap any of the values above for mine when I send them.

I will attach the actual brand assets separately. Use only assets I supply or assets with verified redistribution rights.

Return a complete downloadable customized merchant-store source package, not a mockup or patch fragment. Preserve same-origin /api runtime configuration, authentication and refresh, inventory-aware cart validation, ordinary and recurring checkout behavior, authoritative checkout-status verification, read-only orders/payments, SPA routing, /healthz, and the rule that no merchant API key, Keycloak client secret, server credential, or central biz-app call may appear in browser code.

Design-layer changes only — do NOT change component structure, data flow, or scroll/overflow behaviour. In particular:
- The store name must come only from the store API (bind store?.name, left empty until it loads). Do NOT add a hardcoded store-name constant or fallback value; a hardcoded name flashes on reload before the real name arrives.
- Do NOT change the overflow/scroll of list containers (e.g. the orders/subscriptions table wrapper). Keep any overflow scoped to the existing narrow-screen media query; never set overflow-x or overflow-y unconditionally — overflow-x: auto forces overflow-y to auto, which clips the row menu and adds a spurious vertical scrollbar.

Run npm ci, the production build, the frontend secret scan, and relevant tests. Include DESIGN_REPORT.md with changed files and actual results. Preserve LICENSE, NOTICE, TRADEMARKS.md, and THIRD_PARTY_NOTICES.md; identify modified Ping Business-originated files as required by Apache-2.0.

Package the customized source/merchant-store tree only. Do not vendor a copy of the kit into it — no deployment/, keycloak/, scripts/, prompts/, docs/, design/, website/, or source/estore-app. I clone the kit for those, and every platform adapter clones it from the published repository at deploy time, so a bundled copy would be ignored anyway.

If you can run commands in this session, show me the result as you go: run npm ci and npm start in the customized source/merchant-store, then give me the exact URL the dev server prints — normally http://localhost:4200, but report what it actually printed, because Angular moves to another port when 4200 is taken. Keep it running while I give feedback so I can refresh after each change. Tell me plainly what that view does and does not prove: it shows layout, branding, typography, and responsive behaviour, but there is no estore-app behind it, so the catalogue, login, and checkout will not work and API calls fall back to http://localhost:5000. If you cannot run commands, say so and go straight to the packaged preview below instead of implying you served anything.

That dev server is a fast look, not the approval step. I still need to see the whole stack running before anything is deployed. Follow the "Local preview" section of prompts/DESIGN_PROMPT.md and include HANDOFF.md in the package. Reproduce the git clone, prepare-deployment.py --local, and docker compose commands in HANDOFF.md so I can also run them myself.

Do not ask me for my merchant identifier, store identifier, or merchant API key in this conversation — the preview step collects those. If I do give them to you and you have a working Docker daemon, you may bring the stack up yourself and give me the http://localhost address; put those values only in the 0600 file the generator writes. If your session has no Docker daemon or no container-registry access, say so directly instead of skipping this or reporting checks you did not run.

Treat my feedback as a loop: I look at the store, come back with corrections, you rebuild and reissue the package. Only once I confirm I am happy with it should we move to a real deployment.

import json
import logging
import os
import re
import time
import uuid
from datetime import datetime, timedelta
from functools import wraps
from decimal import Decimal, InvalidOperation
from typing import Any, Dict, List, Optional, Tuple
from urllib.parse import urlparse
from zoneinfo import ZoneInfo

import requests
from dotenv import load_dotenv
from flask import Flask, Response, jsonify, render_template_string, request
from flask_cors import CORS
from werkzeug.middleware.proxy_fix import ProxyFix

load_dotenv()

# -----------------------------------------------------------------------------
# Configuration
# -----------------------------------------------------------------------------
APP_PORT = int(os.getenv("ESTORE_APP_PORT", "5000"))
DEV_MODE = os.getenv("DEV_MODE", "true").lower() == "true"

# This app calls the existing ping business Flask service over the Docker network.
BIZ_APP_BASE_URL = os.getenv("BIZ_APP_BASE_URL", "http://biz-app:5000").rstrip("/")

# PaymentAsia helper access is proxied through biz-app so t-hosted
# estore deployments do not need direct network access to pa-app.
ESTORE_PUBLIC_BASE_URL = os.getenv("ESTORE_PUBLIC_BASE_URL", "").rstrip("/")
ESTORE_CHECKOUT_LANG = os.getenv("ESTORE_CHECKOUT_LANG", "")
# Default to the real PaymentAsia hosted checkout flow. This makes /checkout
# contact biz-app's authenticated pa-app proxy for signed hosted-payment fields
# and then auto-submit the browser/iframe to PaymentAsia. Simulated checkout is available only when
# explicitly enabled for isolated local testing.
# Optional CSP frame-ancestors value, for example: "'self' http://localhost:4200".
# Empty by default because many dev deployments serve Angular and estore-app from
# different ports, and the checkout return page is intentionally iframe-friendly.
ESTORE_CHECKOUT_FRAME_ANCESTORS = os.getenv("ESTORE_CHECKOUT_FRAME_ANCESTORS", "").strip()