feat(portal): customer configurator wizard — upload, coating, estimate, submit

Three-step self-service quoting flow on the customer portal:
- Step 1: Upload part (STL/PDF) or enter manual measurements + material
- Step 2: Select coating config from card grid with specs and thickness
- Step 3: View estimated price range and submit quote request

Adds dependency on fusion_plating_configurator for fp.coating.config
and fp.pricing.rule models. Price estimation uses the same rule-matching
logic as the backend configurator with a +/-15-25% range.

Dashboard updated with prominent "Get a Quote" button and portal sidebar
entry. Breadcrumbs added for configurator pages.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-04-12 21:00:59 -04:00
parent 3db30339b5
commit 2af9d37f45
6 changed files with 854 additions and 1 deletions

View File

@@ -22,6 +22,13 @@
Dashboard
</li>
<!-- Configurator -->
<li t-if="page_name == 'fp_configurator'"
class="breadcrumb-item active"
aria-current="page">
Get a Quote
</li>
<!-- Quote Requests list -->
<li t-if="page_name == 'fp_quote_requests'"
class="breadcrumb-item active"

View File

@@ -0,0 +1,524 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright 2026 Nexa Systems Inc.
License OPL-1 (Odoo Proprietary License v1.0)
Part of the Fusion Plating product family.
Portal Configurator Templates -- 3-step self-service quoting wizard.
-->
<odoo>
<!-- ================================================================== -->
<!-- REUSABLE: Progress Bar (Step 1 / 2 / 3) -->
<!-- ================================================================== -->
<template id="portal_configurator_progress" name="Configurator Progress Bar">
<div class="d-flex align-items-center justify-content-center mb-4">
<t t-foreach="[('1', 'Upload Part'), ('2', 'Select Coating'), ('3', 'Review &amp; Submit')]" t-as="step_item">
<t t-set="step_num" t-value="step_item[0]"/>
<t t-set="step_label" t-value="step_item[1]"/>
<div class="d-flex align-items-center">
<div t-attf-class="rounded-circle d-flex align-items-center justify-content-center fw-bold
#{'bg-primary text-white' if current_step == step_num else
'bg-success text-white' if int(current_step) > int(step_num) else
'bg-body-tertiary text-muted'}"
style="width: 32px; height: 32px; font-size: 0.85rem;">
<t t-if="int(current_step) > int(step_num)">
<i class="fa fa-check"/>
</t>
<t t-else="">
<t t-out="step_num"/>
</t>
</div>
<span t-attf-class="ms-2 small fw-semibold
#{'text-primary' if current_step == step_num else
'text-success' if int(current_step) > int(step_num) else
'text-muted'}"
t-out="step_label"/>
</div>
<t t-if="step_num != '3'">
<div class="mx-3" style="width: 40px; height: 2px; background: var(--bs-border-color);"/>
</t>
</t>
</div>
</template>
<!-- ================================================================== -->
<!-- LANDING PAGE -->
<!-- ================================================================== -->
<template id="portal_configurator_landing" name="Configurator Landing">
<t t-call="portal.portal_layout">
<div class="o_fp_portal_form mt-3">
<!-- Hero card -->
<div class="card mb-4" style="border: 2px solid var(--bs-primary); border-radius: 12px;">
<div class="card-body text-center py-5">
<i class="fa fa-cog fa-3x mb-3" style="color: var(--bs-primary);"/>
<h3 class="mb-2">Get a Quote</h3>
<p class="text-muted mb-4" style="max-width: 500px; margin: 0 auto;">
Use our configurator to upload your part, select a coating, and
receive an estimated price range in minutes.
</p>
<a href="/my/configurator/new" class="btn btn-primary btn-lg px-5">
<i class="fa fa-play me-2"/>Start Configurator
</a>
</div>
</div>
<!-- Recent quote requests -->
<t t-if="quotes">
<h5 class="mb-3">Recent Quote Requests</h5>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Reference</th>
<th>Submitted</th>
<th>Quantity</th>
<th class="text-end">Status</th>
</tr>
</thead>
<tbody>
<tr t-foreach="quotes" t-as="qr">
<td>
<a t-att-href="'/my/quote_requests/%s' % qr.id"
t-out="qr.name"/>
</td>
<td>
<span t-field="qr.create_date" t-options='{"widget": "date"}'/>
</td>
<td t-out="qr.quantity"/>
<td class="text-end">
<span t-attf-class="badge #{
'text-bg-secondary' if qr.state == 'new' else
'text-bg-info' if qr.state == 'under_review' else
'text-bg-primary' if qr.state == 'quoted' else
'text-bg-success' if qr.state == 'accepted' else
'text-bg-danger' if qr.state == 'declined' else
'text-bg-warning'}"
t-out="dict(qr._fields['state']._description_selection(qr.env)).get(qr.state)"/>
</td>
</tr>
</tbody>
</table>
</div>
</t>
</div>
</t>
</template>
<!-- ================================================================== -->
<!-- STEP 1 — Upload Part / Manual Measurements -->
<!-- ================================================================== -->
<template id="portal_configurator_step1" name="Configurator Step 1 — Upload Part">
<t t-call="portal.portal_layout">
<div class="o_fp_portal_form mt-3" style="max-width: 720px; margin: 0 auto;">
<!-- Progress bar -->
<t t-set="current_step" t-value="'1'"/>
<t t-call="fusion_plating_portal.portal_configurator_progress"/>
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<i class="fa fa-cube me-2"/>Part Information
</h5>
</div>
<div class="card-body">
<form method="POST" action="/my/configurator/new"
enctype="multipart/form-data">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<!-- Part Name & Number -->
<div class="row mb-3">
<div class="col-md-6">
<label for="part_name" class="form-label">Part Name *</label>
<input type="text" id="part_name" name="part_name"
class="form-control" required="required"
placeholder="e.g. Bearing Housing"/>
</div>
<div class="col-md-6">
<label for="part_number" class="form-label">Part Number</label>
<input type="text" id="part_number" name="part_number"
class="form-control"
placeholder="e.g. BH-2024-001"/>
</div>
</div>
<!-- Substrate Material -->
<div class="mb-3">
<label for="substrate_material" class="form-label">Substrate Material *</label>
<select id="substrate_material" name="substrate_material"
class="form-select" required="required">
<t t-foreach="materials" t-as="mat">
<option t-att-value="mat[0]" t-out="mat[1]"/>
</t>
</select>
</div>
<!-- File Upload -->
<div class="mb-4">
<label class="form-label">Part Drawing or 3D Model</label>
<div class="o_fp_file_drop_zone p-4">
<i class="fa fa-cloud-upload"/>
<p class="mb-1 fw-semibold">
Drag and drop your file here, or click to browse
</p>
<p class="small text-muted mb-2">
Accepted: STL, STP, STEP, IGES, PDF (max 50 MB)
</p>
<input type="file" name="part_file" id="part_file"
class="form-control"
accept=".stl,.stp,.step,.iges,.igs,.pdf"/>
</div>
</div>
<hr class="my-4"/>
<!-- Manual Measurements -->
<h6 class="mb-3">
<i class="fa fa-ruler-combined me-2"/>Manual Measurements
<span class="text-muted small fw-normal ms-2">
(if no 3D model uploaded)
</span>
</h6>
<input type="hidden" name="geometry_source" value="manual"/>
<div class="row mb-3">
<div class="col-md-4">
<label for="dimensions_length" class="form-label">Length (in)</label>
<input type="number" step="0.001" min="0"
id="dimensions_length" name="dimensions_length"
class="form-control" placeholder="0.000"/>
</div>
<div class="col-md-4">
<label for="dimensions_width" class="form-label">Width (in)</label>
<input type="number" step="0.001" min="0"
id="dimensions_width" name="dimensions_width"
class="form-control" placeholder="0.000"/>
</div>
<div class="col-md-4">
<label for="dimensions_height" class="form-label">Height (in)</label>
<input type="number" step="0.001" min="0"
id="dimensions_height" name="dimensions_height"
class="form-control" placeholder="0.000"/>
</div>
</div>
<div class="mb-4">
<label for="surface_area" class="form-label">
Surface Area (sq in)
<span class="text-muted small fw-normal ms-1">
-- auto-calculated if STL uploaded
</span>
</label>
<input type="number" step="0.0001" min="0"
id="surface_area" name="surface_area"
class="form-control" placeholder="0.0000"/>
</div>
<!-- Navigation -->
<div class="d-flex justify-content-between">
<a href="/my/configurator" class="btn btn-outline-secondary">
<i class="fa fa-arrow-left me-1"/>Cancel
</a>
<button type="submit" class="btn btn-primary">
Next: Select Coating
<i class="fa fa-arrow-right ms-1"/>
</button>
</div>
</form>
</div>
</div>
</div>
</t>
</template>
<!-- ================================================================== -->
<!-- STEP 2 — Select Coating Configuration -->
<!-- ================================================================== -->
<template id="portal_configurator_step2" name="Configurator Step 2 — Select Coating">
<t t-call="portal.portal_layout">
<div class="o_fp_portal_form mt-3" style="max-width: 900px; margin: 0 auto;">
<!-- Progress bar -->
<t t-set="current_step" t-value="'2'"/>
<t t-call="fusion_plating_portal.portal_configurator_progress"/>
<form method="POST" action="/my/configurator/coating">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<input type="hidden" name="coating_config_id" id="coating_config_id" value="0"/>
<!-- Part summary -->
<div class="alert alert-info d-flex align-items-center mb-4" role="alert">
<i class="fa fa-cube me-3 fa-lg"/>
<div>
<strong t-out="session_data.get('part_name', 'Part')"/>
<span t-if="session_data.get('part_number')"
class="text-muted ms-2">
(<t t-out="session_data.get('part_number')"/>)
</span>
<span class="ms-3 badge text-bg-secondary" t-out="session_data.get('substrate_material', '')"/>
<span t-if="session_data.get('surface_area')" class="ms-2 small">
<t t-out="session_data.get('surface_area')"/> sq in
</span>
</div>
</div>
<!-- Coating cards grid -->
<h5 class="mb-3">Select a Coating Configuration</h5>
<t t-if="not coatings">
<div class="alert alert-warning">
No coating configurations are available. Please contact us directly.
</div>
</t>
<div class="row g-3 mb-4">
<t t-foreach="coatings" t-as="coat">
<div class="col-md-6 col-lg-4">
<div class="card h-100 o_fp_portal_card o_fp_coating_card"
style="cursor: pointer; transition: border-color 150ms, box-shadow 150ms;"
t-att-data-coating-id="coat.id"
t-attf-onclick="
document.querySelectorAll('.o_fp_coating_card').forEach(c => {
c.style.borderColor = '';
c.style.boxShadow = '';
});
this.style.borderColor = 'var(--bs-primary)';
this.style.boxShadow = '0 0 0 2px var(--bs-primary)';
document.getElementById('coating_config_id').value = this.dataset.coatingId;
">
<div class="card-body">
<h6 class="card-title mb-2" style="color: var(--bs-body-color);">
<t t-out="coat.name"/>
</h6>
<p t-if="coat.process_type_id" class="small text-muted mb-1">
<i class="fa fa-flask me-1"/>
<t t-out="coat.process_type_id.name"/>
</p>
<p t-if="coat.spec_reference" class="small text-muted mb-1">
<i class="fa fa-bookmark me-1"/>
<t t-out="coat.spec_reference"/>
</p>
<p t-if="coat.thickness_min or coat.thickness_max" class="small text-muted mb-1">
<i class="fa fa-arrows-v me-1"/>
<t t-if="coat.thickness_min" t-out="coat.thickness_min"/>
<t t-if="coat.thickness_min and coat.thickness_max"> - </t>
<t t-if="coat.thickness_max" t-out="coat.thickness_max"/>
<t t-out="coat.thickness_uom or 'mils'"/>
</p>
<p t-if="coat.certification_level and coat.certification_level != 'commercial'"
class="small mb-0">
<span class="badge text-bg-warning">
<t t-out="dict(coat._fields['certification_level']._description_selection(coat.env)).get(coat.certification_level)"/>
</span>
</p>
<p t-if="coat.description" class="small text-muted mt-2 mb-0"
t-out="coat.description"/>
</div>
</div>
</div>
</t>
</div>
<!-- Quantity -->
<div class="row mb-4">
<div class="col-md-4">
<label for="quantity" class="form-label fw-semibold">Quantity</label>
<input type="number" id="quantity" name="quantity"
class="form-control" min="1" value="1" required="required"/>
</div>
</div>
<!-- Navigation -->
<div class="d-flex justify-content-between">
<a href="/my/configurator/new" class="btn btn-outline-secondary">
<i class="fa fa-arrow-left me-1"/>Back
</a>
<button type="submit" class="btn btn-primary">
Next: View Estimate
<i class="fa fa-arrow-right ms-1"/>
</button>
</div>
</form>
</div>
</t>
</template>
<!-- ================================================================== -->
<!-- STEP 3 — Estimate & Submit -->
<!-- ================================================================== -->
<template id="portal_configurator_step3" name="Configurator Step 3 — Estimate &amp; Submit">
<t t-call="portal.portal_layout">
<div class="o_fp_portal_form mt-3" style="max-width: 720px; margin: 0 auto;">
<!-- Progress bar -->
<t t-set="current_step" t-value="'3'"/>
<t t-call="fusion_plating_portal.portal_configurator_progress"/>
<!-- Summary card -->
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0">
<i class="fa fa-clipboard me-2"/>Quote Summary
</h5>
</div>
<div class="card-body">
<!-- Part details -->
<div class="row mb-3">
<div class="col-sm-4 text-muted small fw-semibold">Part</div>
<div class="col-sm-8">
<strong t-out="session_data.get('part_name', '')"/>
<span t-if="session_data.get('part_number')" class="text-muted ms-1">
(<t t-out="session_data.get('part_number')"/>)
</span>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-4 text-muted small fw-semibold">Material</div>
<div class="col-sm-8" t-out="session_data.get('substrate_material', '')"/>
</div>
<div t-if="session_data.get('surface_area')" class="row mb-3">
<div class="col-sm-4 text-muted small fw-semibold">Surface Area</div>
<div class="col-sm-8">
<t t-out="session_data.get('surface_area')"/> sq in
<span t-if="session_data.get('auto_calculated')"
class="badge text-bg-info ms-2">Auto-calculated from STL</span>
</div>
</div>
<div t-if="session_data.get('attachment_name')" class="row mb-3">
<div class="col-sm-4 text-muted small fw-semibold">Uploaded File</div>
<div class="col-sm-8">
<i class="fa fa-paperclip me-1"/>
<t t-out="session_data.get('attachment_name')"/>
</div>
</div>
<hr/>
<!-- Coating details -->
<div class="row mb-3">
<div class="col-sm-4 text-muted small fw-semibold">Coating</div>
<div class="col-sm-8">
<strong t-out="coating.name"/>
</div>
</div>
<div t-if="coating.spec_reference" class="row mb-3">
<div class="col-sm-4 text-muted small fw-semibold">Spec</div>
<div class="col-sm-8" t-out="coating.spec_reference"/>
</div>
<div class="row mb-3">
<div class="col-sm-4 text-muted small fw-semibold">Quantity</div>
<div class="col-sm-8" t-out="session_data.get('quantity', 1)"/>
</div>
<hr/>
<!-- Estimated Price -->
<div class="text-center py-3">
<t t-if="estimated_price.get('available')">
<p class="text-muted small mb-2">Estimated Price Range</p>
<p class="display-6 fw-bold mb-1" style="color: var(--bs-primary);">
$<t t-out="'{:,.2f}'.format(estimated_price['min'])"/>
<span class="text-muted mx-2" style="font-size: 0.6em;">to</span>
$<t t-out="'{:,.2f}'.format(estimated_price['max'])"/>
</p>
<p class="text-muted small mb-0">
Final pricing depends on masking complexity, batch size, and inspection requirements.
</p>
</t>
<t t-else="">
<div class="alert alert-secondary mb-0">
<i class="fa fa-info-circle me-2"/>
We could not calculate an automatic estimate for this configuration.
Our team will provide a detailed quote after reviewing your request.
</div>
</t>
</div>
</div>
</div>
<!-- Submit form -->
<div class="card">
<div class="card-body">
<form method="POST" action="/my/configurator/submit">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<div class="mb-3">
<label for="special_instructions" class="form-label fw-semibold">
Special Instructions
<span class="text-muted small fw-normal">(optional)</span>
</label>
<textarea id="special_instructions" name="special_instructions"
class="form-control" rows="3"
placeholder="Masking requirements, delivery preferences, certifications needed, etc."/>
</div>
<div class="alert alert-light border small mb-4">
<i class="fa fa-clock-o me-1"/>
Our team will review your request and provide a detailed quote
within 24 hours (business days).
</div>
<!-- Navigation -->
<div class="d-flex justify-content-between">
<a href="/my/configurator/coating" class="btn btn-outline-secondary">
<i class="fa fa-arrow-left me-1"/>Back
</a>
<button type="submit" class="btn btn-primary btn-lg">
<i class="fa fa-paper-plane me-2"/>Submit Quote Request
</button>
</div>
</form>
</div>
</div>
</div>
</t>
</template>
<!-- ================================================================== -->
<!-- SUCCESS PAGE -->
<!-- ================================================================== -->
<template id="portal_configurator_success" name="Configurator — Quote Submitted">
<t t-call="portal.portal_layout">
<div class="o_fp_portal_form mt-3" style="max-width: 600px; margin: 0 auto;">
<div class="card text-center py-5">
<div class="card-body">
<div class="mb-3">
<i class="fa fa-check-circle fa-4x" style="color: var(--bs-success);"/>
</div>
<h3 class="mb-3">Quote Request Submitted</h3>
<p class="text-muted mb-1">
Your request has been received with reference:
</p>
<p class="fw-bold fs-5 mb-4" style="color: var(--bs-primary);">
<t t-out="quote.name"/>
</p>
<p class="text-muted small mb-4">
Our estimating team will review your part details and coating
selection, then send you a detailed quote within 24 hours
(business days). You can track the status from your portal.
</p>
<div class="d-flex justify-content-center gap-3">
<a t-att-href="'/my/quote_requests/%s' % quote.id"
class="btn btn-primary">
<i class="fa fa-eye me-1"/>View Quote Request
</a>
<a href="/my/configurator" class="btn btn-outline-secondary">
<i class="fa fa-plus me-1"/>Start Another
</a>
</div>
</div>
</div>
</div>
</t>
</template>
</odoo>

View File

@@ -26,7 +26,10 @@
<!-- Quick Actions bar -->
<div class="d-flex flex-wrap gap-2 mb-4">
<a href="/my/quote_requests/new" class="btn btn-primary">
<a href="/my/configurator" class="btn btn-primary">
<i class="fa fa-cog me-1"/>Get a Quote
</a>
<a href="/my/quote_requests/new" class="btn btn-outline-primary">
<i class="fa fa-plus me-1"/>Request Quote
</a>
<a href="/my/quote_requests" class="btn btn-outline-secondary">
@@ -354,6 +357,11 @@
customize_show="True"
priority="40">
<xpath expr="//div[hasclass('o_portal_docs')]" position="inside">
<t t-call="portal.portal_docs_entry">
<t t-set="title">Get a Quote</t>
<t t-set="url" t-value="'/my/configurator'"/>
<t t-set="placeholder_count" t-value="'fp_quote_request_count'"/>
</t>
<t t-call="portal.portal_docs_entry">
<t t-set="title">Quote Requests</t>
<t t-set="url" t-value="'/my/quote_requests'"/>