Implement Phase 9 & reusable components; skip Phase 8 (emails)

Phase 8 (Emails) skipped: WooCommerce email rendering uses
wc_get_template_html() which bypasses the Twig pipeline entirely.
Email customization deferred to plugins or block email editor.

Phase 9 - Supplementary (7 templates):
- Brand description with thumbnail, taxonomy archive delegate
- Brands A-Z shortcode with alphabetical index navigation
- Single brand thumbnail shortcode
- REST API OAuth login and grant-access forms
- Back-in-stock notification form with email input

Reusable Components (6 templates):
- price: product price display with sale handling
- rating: star rating with Bootstrap Icons (filled/half/empty)
- address-card: billing/shipping address card with edit link
- status-badge: contextual order status badges
- quantity-input: +/- input group widget
- form-field: universal form field renderer (text/select/textarea/checkbox)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

templates/components/address-card.html.twig

@@ -0,0 +1,58 @@
+{#
+ # Address Card Component (Bootstrap 5)
+ #
+ # Reusable address display card with optional edit link.
+ #
+ # Expected context:
+ #   title      - Card header title (e.g., "Billing address")
+ #   address    - Formatted address HTML string
+ #   phone      - Phone number (optional)
+ #   email      - Email address (optional)
+ #   edit_url   - URL to edit this address (optional)
+ #
+ # Usage:
+ #   {% include 'components/address-card.html.twig' with {
+ #       title: 'Billing address',
+ #       address: order.get_formatted_billing_address(),
+ #       phone: order.get_billing_phone(),
+ #       email: order.get_billing_email(),
+ #       edit_url: wc_get_endpoint_url('edit-address', 'billing')
+ #   } %}
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+<div class="card h-100">
+    <div class="card-header d-flex justify-content-between align-items-center">
+        <h3 class="h6 mb-0">{{ title|esc_html }}</h3>
+        {% if edit_url is defined and edit_url %}
+            <a href="{{ edit_url|esc_url }}" class="btn btn-sm btn-outline-primary">
+                <i class="bi bi-pencil me-1" aria-hidden="true"></i>{{ __('Edit') }}
+            </a>
+        {% endif %}
+    </div>
+    <div class="card-body">
+        <address class="mb-0" style="font-style: normal; line-height: 1.6;">
+            {% if address %}
+                {{ address|wp_kses_post }}
+            {% else %}
+                <span class="text-body-secondary">{{ __('N/A') }}</span>
+            {% endif %}
+
+            {% if phone is defined and phone %}
+                <p class="mt-2 mb-0">
+                    <i class="bi bi-telephone me-1" aria-hidden="true"></i>
+                    {{ phone|esc_html }}
+                </p>
+            {% endif %}
+
+            {% if email is defined and email %}
+                <p class="mt-1 mb-0">
+                    <i class="bi bi-envelope me-1" aria-hidden="true"></i>
+                    {{ email|esc_html }}
+                </p>
+            {% endif %}
+        </address>
+    </div>
+</div>

templates/components/form-field.html.twig

@@ -0,0 +1,114 @@
+{#
+ # Form Field Component (Bootstrap 5)
+ #
+ # Reusable form field wrapper with label, input, and validation.
+ # Renders different input types based on the field configuration.
+ #
+ # Expected context:
+ #   field_key  - Field name/key
+ #   field      - Field configuration array with:
+ #     .type        - Input type (text, email, password, tel, select, textarea, checkbox, radio)
+ #     .label       - Field label
+ #     .required    - Whether field is required (boolean)
+ #     .placeholder - Placeholder text (optional)
+ #     .options     - Array of options for select/radio (optional)
+ #     .value       - Current value (optional)
+ #     .description - Help text (optional)
+ #     .class       - Additional CSS classes (optional)
+ #
+ # Usage:
+ #   {% include 'components/form-field.html.twig' with {
+ #       field_key: 'billing_email',
+ #       field: { type: 'email', label: 'Email', required: true }
+ #   } %}
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{% set field_type = field.type|default('text') %}
+{% set field_id = field_key|replace({'_': '-', '[': '-', ']': ''}) %}
+{% set is_required = field.required|default(false) %}
+
+{% if field_type == 'checkbox' %}
+    <div class="form-check mb-3">
+        <input type="checkbox"
+               class="form-check-input {{ field.class|default('') }}"
+               name="{{ field_key|esc_attr }}"
+               id="{{ field_id|esc_attr }}"
+               value="1"
+               {% if field.value|default(false) %}checked{% endif %}
+               {% if is_required %}required aria-required="true"{% endif %} />
+        <label class="form-check-label" for="{{ field_id|esc_attr }}">
+            {{ field.label }}
+            {% if is_required %}<span class="text-danger" aria-hidden="true">*</span>{% endif %}
+        </label>
+    </div>
+{% elseif field_type == 'textarea' %}
+    <div class="mb-3">
+        <label for="{{ field_id|esc_attr }}" class="form-label">
+            {{ field.label }}
+            {% if is_required %}
+                &nbsp;<span class="text-danger" aria-hidden="true">*</span>
+                <span class="visually-hidden">{{ __('Required') }}</span>
+            {% endif %}
+        </label>
+        <textarea class="form-control {{ field.class|default('') }}"
+                  name="{{ field_key|esc_attr }}"
+                  id="{{ field_id|esc_attr }}"
+                  rows="{{ field.rows|default(3) }}"
+                  {% if field.placeholder is defined %}placeholder="{{ field.placeholder|esc_attr }}"{% endif %}
+                  {% if is_required %}required aria-required="true"{% endif %}>{{ field.value|default('')|esc_html }}</textarea>
+        {% if field.description is defined and field.description %}
+            <div class="form-text">{{ field.description }}</div>
+        {% endif %}
+    </div>
+{% elseif field_type == 'select' %}
+    <div class="mb-3">
+        <label for="{{ field_id|esc_attr }}" class="form-label">
+            {{ field.label }}
+            {% if is_required %}
+                &nbsp;<span class="text-danger" aria-hidden="true">*</span>
+                <span class="visually-hidden">{{ __('Required') }}</span>
+            {% endif %}
+        </label>
+        <select class="form-select {{ field.class|default('') }}"
+                name="{{ field_key|esc_attr }}"
+                id="{{ field_id|esc_attr }}"
+                {% if is_required %}required aria-required="true"{% endif %}>
+            {% if field.placeholder is defined %}
+                <option value="">{{ field.placeholder|esc_html }}</option>
+            {% endif %}
+            {% for option_value, option_label in field.options|default({}) %}
+                <option value="{{ option_value|esc_attr }}"
+                        {% if field.value|default('') == option_value %}selected{% endif %}>
+                    {{ option_label|esc_html }}
+                </option>
+            {% endfor %}
+        </select>
+        {% if field.description is defined and field.description %}
+            <div class="form-text">{{ field.description }}</div>
+        {% endif %}
+    </div>
+{% else %}
+    <div class="mb-3">
+        <label for="{{ field_id|esc_attr }}" class="form-label">
+            {{ field.label }}
+            {% if is_required %}
+                &nbsp;<span class="text-danger" aria-hidden="true">*</span>
+                <span class="visually-hidden">{{ __('Required') }}</span>
+            {% endif %}
+        </label>
+        <input type="{{ field_type|esc_attr }}"
+               class="form-control {{ field.class|default('') }}"
+               name="{{ field_key|esc_attr }}"
+               id="{{ field_id|esc_attr }}"
+               value="{{ field.value|default('')|esc_attr }}"
+               {% if field.placeholder is defined %}placeholder="{{ field.placeholder|esc_attr }}"{% endif %}
+               {% if field.autocomplete is defined %}autocomplete="{{ field.autocomplete|esc_attr }}"{% endif %}
+               {% if is_required %}required aria-required="true"{% endif %} />
+        {% if field.description is defined and field.description %}
+            <div class="form-text">{{ field.description }}</div>
+        {% endif %}
+    </div>
+{% endif %}

templates/components/price.html.twig

@@ -0,0 +1,20 @@
+{#
+ # Price Component (Bootstrap 5)
+ #
+ # Reusable price display with sale/regular price handling.
+ #
+ # Expected context:
+ #   product - WC_Product object
+ #
+ # Usage:
+ #   {% include 'components/price.html.twig' with { product: product } %}
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{% if product.get_price_html() %}
+    <span class="price">
+        {{ product.get_price_html()|raw }}
+    </span>
+{% endif %}

templates/components/quantity-input.html.twig

@@ -0,0 +1,52 @@
+{#
+ # Quantity Input Component (Bootstrap 5)
+ #
+ # Reusable quantity input with +/- buttons using Bootstrap input-group.
+ # Works with the quantity.js script for increment/decrement.
+ #
+ # Expected context:
+ #   input_name  - Input name attribute (default: 'quantity')
+ #   input_id    - Input id attribute (optional)
+ #   input_value - Current quantity value (default: 1)
+ #   min_value   - Minimum quantity (default: 1)
+ #   max_value   - Maximum quantity (default: '')
+ #   step        - Step increment (default: 1)
+ #   classes     - Additional CSS classes (optional)
+ #
+ # Usage:
+ #   {% include 'components/quantity-input.html.twig' with {
+ #       input_name: 'quantity',
+ #       input_value: 1,
+ #       min_value: 1,
+ #       max_value: product.get_max_purchase_quantity()
+ #   } %}
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{% set qty_name = input_name|default('quantity') %}
+{% set qty_id = input_id|default('quantity_' ~ random()) %}
+{% set qty_value = input_value|default(1) %}
+{% set qty_min = min_value|default(1) %}
+{% set qty_max = max_value|default('') %}
+{% set qty_step = step|default(1) %}
+
+<div class="quantity input-group input-group-sm {{ classes|default('') }}" style="max-width: 140px;">
+    <button type="button" class="btn btn-outline-secondary qty-minus" aria-label="{{ __('Decrease quantity') }}">
+        <i class="bi bi-dash" aria-hidden="true"></i>
+    </button>
+    <input type="number"
+           class="form-control text-center"
+           name="{{ qty_name|esc_attr }}"
+           id="{{ qty_id|esc_attr }}"
+           value="{{ qty_value|esc_attr }}"
+           min="{{ qty_min|esc_attr }}"
+           {% if qty_max %}max="{{ qty_max|esc_attr }}"{% endif %}
+           step="{{ qty_step|esc_attr }}"
+           inputmode="numeric"
+           aria-label="{{ __('Quantity') }}" />
+    <button type="button" class="btn btn-outline-secondary qty-plus" aria-label="{{ __('Increase quantity') }}">
+        <i class="bi bi-plus" aria-hidden="true"></i>
+    </button>
+</div>

templates/components/rating.html.twig

@@ -0,0 +1,37 @@
+{#
+ # Rating Component (Bootstrap 5)
+ #
+ # Reusable star rating display using Bootstrap Icons.
+ #
+ # Expected context:
+ #   rating       - Numeric rating (0-5)
+ #   review_count - Number of reviews (optional, for display)
+ #
+ # Usage:
+ #   {% include 'components/rating.html.twig' with { rating: 4.5, review_count: 12 } %}
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{% if rating is defined and rating > 0 %}
+    <div class="wc-star-rating d-inline-flex align-items-center gap-1"
+         role="img"
+         aria-label="{{ __('%s out of 5')|format(rating) }}">
+        {% for i in 1..5 %}
+            {% if rating >= i %}
+                <i class="bi bi-star-fill text-warning" aria-hidden="true"></i>
+            {% elseif rating >= (i - 0.5) %}
+                <i class="bi bi-star-half text-warning" aria-hidden="true"></i>
+            {% else %}
+                <i class="bi bi-star text-warning" aria-hidden="true"></i>
+            {% endif %}
+        {% endfor %}
+
+        {% if review_count is defined and review_count > 0 %}
+            <small class="text-body-secondary ms-1">
+                ({{ review_count }})
+            </small>
+        {% endif %}
+    </div>
+{% endif %}

templates/components/status-badge.html.twig

@@ -0,0 +1,30 @@
+{#
+ # Status Badge Component (Bootstrap 5)
+ #
+ # Reusable order/payment status badge with contextual colors.
+ #
+ # Expected context:
+ #   status - Status slug (e.g., 'completed', 'processing', 'on-hold', 'cancelled', 'failed', 'refunded', 'pending')
+ #   label  - Display label (optional, defaults to status name via wc_get_order_status_name)
+ #
+ # Usage:
+ #   {% include 'components/status-badge.html.twig' with { status: order.get_status() } %}
+ #   {% include 'components/status-badge.html.twig' with { status: 'completed', label: 'Done' } %}
+ #
+ # @package WcBootstrap
+ # @since 0.1.0
+ #}
+
+{% set display_label = label|default(wc_get_order_status_name(status)) %}
+
+{% if status == 'completed' %}
+    <span class="badge text-bg-success">{{ display_label|esc_html }}</span>
+{% elseif status == 'processing' %}
+    <span class="badge text-bg-primary">{{ display_label|esc_html }}</span>
+{% elseif status == 'on-hold' or status == 'pending' %}
+    <span class="badge text-bg-warning">{{ display_label|esc_html }}</span>
+{% elseif status == 'cancelled' or status == 'failed' or status == 'refunded' %}
+    <span class="badge text-bg-danger">{{ display_label|esc_html }}</span>
+{% else %}
+    <span class="badge text-bg-secondary">{{ display_label|esc_html }}</span>
+{% endif %}