|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Project Overview |
| 6 | + |
| 7 | +Magento 2 extension (`Idealpostcodes_Ukaddresssearch`) providing UK address search via the Ideal Postcodes API. Supports postcode lookup and address autocomplete for checkout, customer accounts, and admin order management. |
| 8 | + |
| 9 | +## Development Commands |
| 10 | + |
| 11 | +### Docker Environment (Magento) |
| 12 | + |
| 13 | +```bash |
| 14 | +make up # Build and initialize Magento (includes init) |
| 15 | +make down # Shutdown services |
| 16 | +make shell # Bash into web container |
| 17 | +make cache-flush # Clear Magento cache |
| 18 | +make fix-session-expire # Fix session timeout (sets base URL to 127.0.0.1) |
| 19 | +make logs # Tail all Docker logs |
| 20 | +``` |
| 21 | + |
| 22 | +PHP version selection: `PHP=81 make up` or `PHP=82 make up` |
| 23 | + |
| 24 | +### JavaScript/TypeScript Build |
| 25 | + |
| 26 | +```bash |
| 27 | +npm run build # Production build (Rollup) |
| 28 | +npm run watch # Watch mode for development |
| 29 | +npm run lint # ESLint check |
| 30 | +npm run lint-fix # Auto-fix linting |
| 31 | +``` |
| 32 | + |
| 33 | +### Testing |
| 34 | + |
| 35 | +```bash |
| 36 | +npm test # Run snapshot tests (Cypress against static fixtures) |
| 37 | +npm test:open # Interactive snapshot testing |
| 38 | +npm test:e2e # E2E tests against live Magento (requires `make up`) |
| 39 | +npm test:e2e:open # Interactive E2E testing |
| 40 | +``` |
| 41 | + |
| 42 | +Tests use Cypress. Snapshot tests run against HTML fixtures; E2E tests require the Docker environment running on localhost:3000. |
| 43 | + |
| 44 | +## Architecture |
| 45 | + |
| 46 | +### TypeScript Source (`lib/`) |
| 47 | + |
| 48 | +Core extension logic compiled to minified bundles: |
| 49 | +- `extension.ts` - Main logic: `setupPostcodeLookup()`, `setupAutocomplete()`, `hoistCountry()`, field binding |
| 50 | +- `store.ts` → `view/base/web/binding.min.js` (frontend bundle) |
| 51 | +- `admin.ts` → `view/base/web/admin.min.js` (admin bundle) |
| 52 | + |
| 53 | +Form bindings: `billing.ts`, `shipping.ts`, `customer.ts`, `multishipping.ts`, `admin-orders.ts`, `admin-orders-edit.ts`, `admin-customers.ts` |
| 54 | + |
| 55 | +### PHP Components |
| 56 | + |
| 57 | +- `Helper/Data.php` - Configuration retrieval (API key, enabled flags, field mappings) |
| 58 | +- `ViewModel/StoreConfig.php` - Frontend JSON config for `x-magento-init` |
| 59 | +- `ViewModel/AdminConfig.php` - Admin panel config |
| 60 | +- `Plugin/Customer/SanitizeAddressPlugin.php` - Input sanitization for customer addresses |
| 61 | +- `Plugin/Quote/SanitizeAddressPlugin.php` - Input sanitization for quote addresses |
| 62 | + |
| 63 | +### Magento Integration Flow |
| 64 | + |
| 65 | +1. `layout/*.xml` injects config blocks |
| 66 | +2. Templates (`store.phtml`, `admin.phtml`) initialize JS via `x-magento-init` |
| 67 | +3. ViewModels serialize configuration to JSON |
| 68 | +4. RequireJS modules (`store-init.js`, `admin-init.js`) call `window.idpcStart()` |
| 69 | +5. Compiled TypeScript attaches to DOM elements |
| 70 | +6. Plugins sanitize address input before save |
| 71 | + |
| 72 | +### Configuration |
| 73 | + |
| 74 | +Admin config form: `etc/adminhtml/system.xml` |
| 75 | +Default values: `etc/config.xml` |
| 76 | +CSP whitelist: `etc/csp_whitelist.xml` (allows `*.ideal-postcodes.co.uk`) |
| 77 | + |
| 78 | +### Dependencies |
| 79 | + |
| 80 | +Runtime: `@ideal-postcodes/address-finder`, `@ideal-postcodes/postcode-lookup` |
| 81 | + |
| 82 | +Build output targets ES5 for IE11 compatibility. |
0 commit comments