Add booking stack, client deploys, and back-office updates
- deploy/booking: shared Easy!Appointments stack with brand-matched wizard (flatpickr recolor, single-tenant provider hide, iframe auto-fit height reporter) - deploy/clients: per-client isolated nginx compose stacks with _template scaffold, new-client.sh, and happynails live site - deploy/backup: smb-db backup script - n8n: booking-sync workflow; onboarding tweaks - playbooks: lead-to-customer lifecycle + outreach - templates: nail-studio landing previews - backoffice: app/db/init/compose updates Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
# Copy to .env on the homelab and fill with strong secrets (gitignored).
|
||||
EA_DB_PASSWORD=change-me
|
||||
EA_DB_ROOT_PASSWORD=change-me-too
|
||||
@@ -0,0 +1,93 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Booking layout.
|
||||
*
|
||||
* This module implements the booking layout functionality.
|
||||
*/
|
||||
window.App.Layouts.Booking = (function () {
|
||||
const $selectLanguage = $('#select-language');
|
||||
|
||||
/**
|
||||
* Initialize the module.
|
||||
*/
|
||||
function initialize() {
|
||||
App.Utils.Lang.enableLanguageSelection($selectLanguage);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {};
|
||||
})();
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* SMB customisation — auto-fit iframe embed.
|
||||
*
|
||||
* EA doesn't report its rendered height, so when embedded in a fixed-height
|
||||
* iframe the wizard overflows and gets its own scrollbar. Here we measure the
|
||||
* wizard card and post its height to the parent page, which resizes the iframe
|
||||
* to fit exactly (see the .booking-embed listener on the client site). Fires on
|
||||
* load, on step changes, when available hours load, and on resize.
|
||||
* ---------------------------------------------------------------------------- */
|
||||
(function () {
|
||||
function reportHeight() {
|
||||
var el = document.getElementById('book-appointment-wizard');
|
||||
var h;
|
||||
if (el) {
|
||||
h = Math.ceil(el.getBoundingClientRect().height) + 40; // breathing room
|
||||
} else if (document.body) {
|
||||
h = document.body.scrollHeight;
|
||||
}
|
||||
if (h && h > 0) {
|
||||
try {
|
||||
window.parent.postMessage({ eaBookingHeight: h }, '*');
|
||||
} catch (e) { /* not embedded / blocked — ignore */ }
|
||||
}
|
||||
}
|
||||
|
||||
function start() {
|
||||
if (window.parent === window) {
|
||||
return; // not in an iframe, nothing to report
|
||||
}
|
||||
|
||||
reportHeight();
|
||||
|
||||
var target = document.getElementById('book-appointment-wizard') || document.body;
|
||||
|
||||
if (window.ResizeObserver) {
|
||||
new ResizeObserver(reportHeight).observe(target);
|
||||
}
|
||||
if (window.MutationObserver) {
|
||||
new MutationObserver(reportHeight).observe(target, {
|
||||
subtree: true,
|
||||
childList: true,
|
||||
attributes: true,
|
||||
});
|
||||
}
|
||||
window.addEventListener('resize', reportHeight);
|
||||
|
||||
// Catch late async renders (available hours, fade transitions) for a few seconds.
|
||||
var ticks = 0;
|
||||
var iv = setInterval(function () {
|
||||
reportHeight();
|
||||
if (++ticks > 25) {
|
||||
clearInterval(iv);
|
||||
}
|
||||
}, 250);
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', start);
|
||||
} else {
|
||||
start();
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,70 @@
|
||||
# booking/ — self-hosted appointment scheduler (Easy!Appointments) + its DB.
|
||||
#
|
||||
# One shared instance serves all clients; each client = a provider/service with
|
||||
# its own booking-page URL. Lightweight (PHP + MariaDB) to fit the 16 GB box.
|
||||
# Booking events fire a webhook -> n8n "booking-sync" -> CRM `bookings` + notify.
|
||||
# Routed by Caddy: booking.mivanchenko.de { reverse_proxy easyappointments:80 }
|
||||
name: smb-booking
|
||||
|
||||
services:
|
||||
ea-db:
|
||||
image: mariadb:11
|
||||
container_name: ea-db
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
MARIADB_DATABASE: easyappointments
|
||||
MARIADB_USER: ea
|
||||
MARIADB_PASSWORD: ${EA_DB_PASSWORD}
|
||||
MARIADB_ROOT_PASSWORD: ${EA_DB_ROOT_PASSWORD}
|
||||
volumes:
|
||||
- ea-db-data:/var/lib/mysql
|
||||
networks: [booking-net]
|
||||
mem_limit: 512m
|
||||
healthcheck:
|
||||
test: ["CMD", "healthcheck.sh", "--connect", "--innodb_initialized"]
|
||||
interval: 10s
|
||||
timeout: 5s
|
||||
retries: 6
|
||||
|
||||
easyappointments:
|
||||
image: alextselegidis/easyappointments:latest
|
||||
container_name: easyappointments
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
BASE_URL: https://booking.mivanchenko.de
|
||||
DEBUG_MODE: "FALSE"
|
||||
DB_HOST: ea-db
|
||||
DB_NAME: easyappointments
|
||||
DB_USERNAME: ea
|
||||
DB_PASSWORD: ${EA_DB_PASSWORD}
|
||||
# Email is optional — booking notifications go via webhook -> n8n. Fill to
|
||||
# also send customers EA's own confirmation emails.
|
||||
MAIL_PROTOCOL: mail
|
||||
MAIL_FROM_ADDRESS: info@booking.mivanchenko.de
|
||||
MAIL_FROM_NAME: Buchung
|
||||
volumes:
|
||||
# Brand-matched booking wizard: recolours the flatpickr datepicker to the
|
||||
# client's --bs-primary and compacts the layout so the embed fits its
|
||||
# iframe without an outer scrollbar. (Wizard chrome colour itself comes
|
||||
# from the EA "company colour" setting.) Re-sync from upstream on EA upgrade.
|
||||
# NOTE: production (DEBUG_MODE=FALSE) serves the .min.* bundles, so those
|
||||
# are the ones that must be overridden — the plain files are dev-only.
|
||||
- ./frontend.css:/var/www/html/assets/css/frontend.css:ro
|
||||
- ./frontend.css:/var/www/html/assets/css/frontend.min.css:ro
|
||||
# Reports the wizard's rendered height to the embedding page so the iframe
|
||||
# auto-fits to its content (no inner scrollbar). Re-sync on EA upgrade.
|
||||
- ./booking_layout.js:/var/www/html/assets/js/layouts/booking_layout.js:ro
|
||||
- ./booking_layout.js:/var/www/html/assets/js/layouts/booking_layout.min.js:ro
|
||||
depends_on:
|
||||
ea-db:
|
||||
condition: service_healthy
|
||||
networks: [booking-net, proxy] # proxy: reached by Caddy as easyappointments:80
|
||||
mem_limit: 256m
|
||||
|
||||
volumes:
|
||||
ea-db-data:
|
||||
|
||||
networks:
|
||||
booking-net:
|
||||
proxy:
|
||||
external: true
|
||||
@@ -0,0 +1,155 @@
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Easy!Appointments - Online Appointment Scheduler
|
||||
*
|
||||
* @package EasyAppointments
|
||||
* @author A.Tselegidis <alextselegidis@gmail.com>
|
||||
* @copyright Copyright (c) Alex Tselegidis
|
||||
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
|
||||
* @link https://easyappointments.org
|
||||
* @since v1.5.0
|
||||
* ---------------------------------------------------------------------------- */
|
||||
/* Responsive booking wizard styles (rounded corners and shadow on md+ screens) */
|
||||
@media (min-width: 768px) {
|
||||
#book-appointment-wizard {
|
||||
border-radius: var(--bs-border-radius) !important;
|
||||
box-shadow: var(--bs-box-shadow-sm) !important;
|
||||
}
|
||||
}
|
||||
/* Active step indicator - dynamic state that changes via JavaScript */
|
||||
#book-appointment-wizard .book-step.active-step {
|
||||
height: 45px !important;
|
||||
width: 45px !important;
|
||||
background: var(--bs-white) !important;
|
||||
padding: 7px !important;
|
||||
margin-right: 13px !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .book-step.active-step strong {
|
||||
color: var(--bs-primary) !important;
|
||||
font-size: 21px !important;
|
||||
}
|
||||
|
||||
/* Inactive step indicator - ensures consistent styling when step becomes inactive */
|
||||
#book-appointment-wizard .book-step:not(.active-step) {
|
||||
height: 35px !important;
|
||||
width: 35px !important;
|
||||
background: rgba(0, 0, 0, 0.2) !important;
|
||||
padding: 8px !important;
|
||||
margin-right: 12px !important;
|
||||
margin-top: 6px !important;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .book-step:not(.active-step) strong {
|
||||
color: rgba(255, 255, 255, 0.5) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* Selected hour button state */
|
||||
#book-appointment-wizard #available-hours .available-hour {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #available-hours .selected-hour {
|
||||
background-color: var(--bs-primary) !important;
|
||||
border-color: var(--bs-primary) !important;
|
||||
color: var(--bs-white) !important;
|
||||
}
|
||||
|
||||
/* Captcha refresh icon hover effect */
|
||||
#book-appointment-wizard .captcha-title .fa-sync-alt {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .captcha-title .fa-sync-alt:hover {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
/* Language popover list */
|
||||
.popover .popover-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.popover .popover-content #language-list .language {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .flatpickr-calendar.inline {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
* SMB customisation — match the client's landing-page brand (rose/blush) and
|
||||
* make the embed fit its iframe without an outer scrollbar.
|
||||
* The brand colour follows --bs-primary, which is set per-instance by the EA
|
||||
* "company colour" setting (Settings → Business → Company colour), so this file
|
||||
* stays client-agnostic. Only the flatpickr datepicker + compact sizing live here.
|
||||
* ============================================================================ */
|
||||
|
||||
/* --- Flatpickr datepicker: recolour the green (material_green) theme to brand --- */
|
||||
.flatpickr-calendar .flatpickr-months .flatpickr-month,
|
||||
.flatpickr-calendar .flatpickr-weekdays,
|
||||
.flatpickr-calendar span.flatpickr-weekday,
|
||||
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
|
||||
background: var(--bs-primary) !important;
|
||||
color: #fff !important;
|
||||
fill: #fff !important;
|
||||
}
|
||||
|
||||
.flatpickr-calendar .flatpickr-day.selected,
|
||||
.flatpickr-calendar .flatpickr-day.selected:hover,
|
||||
.flatpickr-calendar .flatpickr-day.selected:focus,
|
||||
.flatpickr-calendar .flatpickr-day.startRange,
|
||||
.flatpickr-calendar .flatpickr-day.endRange {
|
||||
background: var(--bs-primary) !important;
|
||||
border-color: var(--bs-primary) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.flatpickr-calendar .flatpickr-day.today {
|
||||
border-color: var(--bs-primary) !important;
|
||||
}
|
||||
|
||||
.flatpickr-calendar .flatpickr-day.today:hover,
|
||||
.flatpickr-calendar .flatpickr-day.today:focus {
|
||||
background: var(--bs-primary) !important;
|
||||
border-color: var(--bs-primary) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* --- Single-tenant embed: the provider is pinned per site via ?provider=<id>,
|
||||
* so the customer must never see or switch it (booking a different studio on
|
||||
* e.g. happynails.mivanchenko.de would be wrong). EA's JS un-hides the
|
||||
* provider control when a service is chosen, so we force it hidden here.
|
||||
* The <select> keeps its value (set from the URL param), so booking works. --- */
|
||||
#book-appointment-wizard #select-provider,
|
||||
#book-appointment-wizard label[for="select-provider"] {
|
||||
display: none !important;
|
||||
}
|
||||
#book-appointment-wizard .mb-3:has(> #select-provider) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* --- Compact vertical rhythm so the wizard fits the embed height (no scroll) --- */
|
||||
#book-appointment-wizard #header {
|
||||
padding-top: 1rem !important;
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
#book-appointment-wizard .frame-title {
|
||||
margin-top: 1.25rem !important;
|
||||
margin-bottom: 1.25rem !important;
|
||||
}
|
||||
|
||||
#book-appointment-wizard #available-hours {
|
||||
max-height: 232px;
|
||||
}
|
||||
|
||||
/* Trim the outer wizard container padding a touch on larger screens */
|
||||
@media (min-width: 768px) {
|
||||
#book-appointment-wizard .frame-content {
|
||||
padding-top: 0.5rem !important;
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user