# Your WHC Meta upload package

Backend: https://api.jeftertokomere.me

1. Set WHATSAPP_APP_SECRET in backend/.env to the App Secret from the Meta app connected to your WABA. This is not your access token or webhook verify token. Get it at https://developers.facebook.com/apps/ → your app → Settings → Basic → App Secret. Do not paste it into chat.
2. Both database additions have already been applied to this workspace’s configured local PostgreSQL database. On another database, apply them with `bash scripts/apply-flow-schema.sh`. Deploy the updated backend/frontend before Meta endpoint tests. Docker Compose already mounts the private Flow key read-only. On another server, securely transfer the matching private key to backend/.secrets/whatsapp-flows/private.pem (it is intentionally excluded from this package and Git).
3. Open https://business.facebook.com/settings/whatsapp-business-accounts and select the correct WABA → WhatsApp Manager.
4. Register the included public.pem on your WhatsApp PHONE NUMBER ID using POST /<PHONE_NUMBER_ID>/whatsapp_business_encryption on the supported Graph API version, with bearer management token and form field business_public_key containing the entire public PEM. GET the same endpoint and check business_public_key_signature_status is VALID. Never upload private.pem.
5. Open https://business.facebook.com/wa/manage/flows/ (or WhatsApp Manager → Flows). Create WHC Shopping and import shopping-flow.json. Associate your Meta app. Endpoint URI: https://api.jeftertokomere.me/whatsapp/flows/data-exchange
6. Create WHC Card Payment Contact and import payment-contact-flow.json. Associate the same app. Endpoint URI: https://api.jeftertokomere.me/whatsapp/flows/payment-data-exchange
7. Validate the JSON and encrypted health checks. Test both Flows, publish and copy their separate Flow IDs. This package has not been validated by Meta. Layout previews: https://developers.facebook.com/docs/whatsapp/flows/playground
8. Keep the message webhook at https://api.jeftertokomere.me/webhooks/whatsapp and subscribe to messages. Use the existing WHATSAPP_VERIFY_TOKEN from backend/.env. Do not substitute the app secret for the verification token.
9. In WHC Dashboard → Integrations → WhatsApp, enter both published Flow IDs and enable the corresponding options. Fill in your approved terms summary, version, terms URL and privacy URL. Save.
10. Enable card acceptance in the existing payment integration only after your provider confirms Visa/Mastercard for your merchant account/currency. Card entry stays on the existing provider checkout page.
11. From a separate customer number, send shop flow. Complete shopping, return to the basket in chat, checkout, choose Visa/Mastercard, confirm the contact phone in the second Flow, return to chat and open Pay securely.

Product names, prices, stock and images come from WHC's synced database. The visual Search Flow shows selectable featured products and search results with thumbnails; the legacy full shopping Flow shows the selected product image. The local WHATSAPP_FLOWS_IMAGE_ORIGINS is configured as https://kioskoshop.quatrohaus.com from existing products; change it if your image CDN changes; JPEG/PNG thumbnails must be at most 250 KB. The contact phone is saved on the order; the existing provider link API has no phone argument.

Full repository instructions: docs/whatsapp-flows/META-SETUP.md.

Prepared locally: database tables and order contact column applied; matching RSA keypair generated; backend/.env contains key path, image origin and an empty Meta app-secret setting; Docker Compose has a read-only private-key mount. Meta account operations and service redeployment have not been performed.

Search fix: WHC Product Search is now a separate published Flow, ID 1791484795407520, using search-flow-visual.json and the shopping data-exchange endpoint. The dashboard stores it as searchFlowId. Keep the Terms-first Shopping Flow ID for consent. Meta does not allow SEARCH as the first screen of that Terms-first Flow.

Visual search: the active dedicated Search Flow uses `search-flow-visual.json` and `searchFlowVisual: true`. It launches with data exchange to load category chips and up to four featured products from the backend. Search results show up to eight selectable product rows with thumbnail, price and stock. Selecting a product returns to existing chatbot quantity/basket handling. Native Flow styling does not provide the mockup’s purple two-column cards or individual Add to Cart buttons. Images must also fit the 80 KB thumbnail limit; missing, oversized or unsupported images use a placeholder. Keep the legacy `search-flow.json` for older configurations only.

Category refresh: tapping a category chip sends `category_change` data exchange and refreshes the products on SEARCH immediately. The selected category is preserved; an empty category clears previous results. Select a displayed product and press Continue to return to chat. Product images are resized and converted to JPEG on the backend; source images can be JPEG, PNG or WebP, up to 5 MB. The existing HTTPS-origin allowlist and redirect restrictions still apply.