Files
project_v19/odoo_subscription/views/trial_signup.xml
T
2026-07-01 14:41:49 +07:00

390 lines
27 KiB
XML

<?xml version="1.0" encoding="utf-8"?>
<odoo>
<!-- Flow 1: Trial Signup Page -->
<template id="trial_signup_page" name="Free Trial - App Selection">
<t t-call="website.layout">
<div id="wrap" class="trial-signup-page oe_structure">
<div class="container py-5">
<!-- Header -->
<div class="row mb-5">
<div class="col-12 text-center">
<h1 class="display-4 mb-3">Start Your Free 15-Day Trial</h1>
<p class="lead">No credit card required • Select up to 10 apps • Get started in 60 seconds</p>
</div>
</div>
<form id="trial-registration-form" t-attf-action="/trial/register" method="post">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<div class="row">
<!-- Left Column: App Selection -->
<div class="col-lg-8">
<div class="card mb-4">
<div class="card-header bg-primary text-white">
<h3 class="mb-0"><i class="fa fa-th me-2"/>Step 1: Select Your Apps</h3>
</div>
<div class="card-body">
<p class="text-muted mb-4">Choose the apps you want to try (Maximum 10 apps)</p>
<!-- Sales Category -->
<div class="mb-4">
<h4 class="h5 mb-3 text-primary">Sales &amp; CRM</h4>
<div class="row">
<t t-foreach="apps" t-as="app" t-key="app['name']">
<t t-if="app['category'] == 'sales'">
<div class="col-md-6 col-lg-4 mb-3">
<div class="app-selection-card card h-100"
t-att-data-app="app['technical_name']">
<div class="card-body text-center p-3">
<i t-attf-class="fa #{app['icon']} fa-2x mb-2 text-primary"/>
<h6 class="card-title mb-1" t-esc="app['name']"/>
</div>
<div class="card-footer bg-transparent text-center">
<div class="form-check form-switch d-inline-block">
<input class="form-check-input app-checkbox"
type="checkbox"
t-att-id="'app_' + app['technical_name']"
t-att-name="'selected_apps'"
t-att-value="app['name']"
t-att-data-technical="app['technical_name']"/>
<label class="form-check-label"
t-att-for="'app_' + app['technical_name']">
Select
</label>
</div>
</div>
</div>
</div>
</t>
</t>
</div>
</div>
<!-- Finance Category -->
<div class="mb-4">
<h4 class="h5 mb-3 text-success">Finance &amp; Accounting</h4>
<div class="row">
<t t-foreach="apps" t-as="app" t-key="app['name']">
<t t-if="app['category'] == 'finance'">
<div class="col-md-6 col-lg-4 mb-3">
<div class="app-selection-card card h-100"
t-att-data-app="app['technical_name']">
<div class="card-body text-center p-3">
<i t-attf-class="fa #{app['icon']} fa-2x mb-2 text-success"/>
<h6 class="card-title mb-1" t-esc="app['name']"/>
</div>
<div class="card-footer bg-transparent text-center">
<div class="form-check form-switch d-inline-block">
<input class="form-check-input app-checkbox"
type="checkbox"
t-att-id="'app_' + app['technical_name']"
t-att-name="'selected_apps'"
t-att-value="app['name']"
t-att-data-technical="app['technical_name']"/>
<label class="form-check-label"
t-att-for="'app_' + app['technical_name']">
Select
</label>
</div>
</div>
</div>
</div>
</t>
</t>
</div>
</div>
<!-- Services Category -->
<div class="mb-4">
<h4 class="h5 mb-3 text-info">Services &amp; Projects</h4>
<div class="row">
<t t-foreach="apps" t-as="app" t-key="app['name']">
<t t-if="app['category'] == 'services'">
<div class="col-md-6 col-lg-4 mb-3">
<div class="app-selection-card card h-100"
t-att-data-app="app['technical_name']">
<div class="card-body text-center p-3">
<i t-attf-class="fa #{app['icon']} fa-2x mb-2 text-info"/>
<h6 class="card-title mb-1" t-esc="app['name']"/>
</div>
<div class="card-footer bg-transparent text-center">
<div class="form-check form-switch d-inline-block">
<input class="form-check-input app-checkbox"
type="checkbox"
t-att-id="'app_' + app['technical_name']"
t-att-name="'selected_apps'"
t-att-value="app['name']"
t-att-data-technical="app['technical_name']"/>
<label class="form-check-label"
t-att-for="'app_' + app['technical_name']">
Select
</label>
</div>
</div>
</div>
</div>
</t>
</t>
</div>
</div>
<!-- Marketing Category -->
<div class="mb-4">
<h4 class="h5 mb-3 text-warning">Marketing &amp; Website</h4>
<div class="row">
<t t-foreach="apps" t-as="app" t-key="app['name']">
<t t-if="app['category'] == 'marketing'">
<div class="col-md-6 col-lg-4 mb-3">
<div class="app-selection-card card h-100"
t-att-data-app="app['technical_name']">
<div class="card-body text-center p-3">
<i t-attf-class="fa #{app['icon']} fa-2x mb-2 text-warning"/>
<h6 class="card-title mb-1" t-esc="app['name']"/>
</div>
<div class="card-footer bg-transparent text-center">
<div class="form-check form-switch d-inline-block">
<input class="form-check-input app-checkbox"
type="checkbox"
t-att-id="'app_' + app['technical_name']"
t-att-name="'selected_apps'"
t-att-value="app['name']"
t-att-data-technical="app['technical_name']"/>
<label class="form-check-label"
t-att-for="'app_' + app['technical_name']">
Select
</label>
</div>
</div>
</div>
</div>
</t>
</t>
</div>
</div>
<!-- Selected Apps Counter -->
<div class="alert alert-info mt-3">
<div class="d-flex justify-content-between align-items-center">
<div>
<i class="fa fa-info-circle me-2"/>
<span id="selected-count">0</span> / 10 apps selected
</div>
<div id="selected-apps-tags" class="d-flex gap-2 flex-wrap">
<!-- Tags will be added here dynamically -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Registration Form -->
<div class="col-lg-4">
<div class="card mb-4 sticky-top" style="top: 20px;">
<div class="card-header bg-success text-white">
<h3 class="mb-0"><i class="fa fa-user me-2"/>Step 2: Your Information</h3>
</div>
<div class="card-body">
<div class="mb-3">
<label for="email" class="form-label">Email Address <span class="text-danger">*</span></label>
<input type="email" class="form-control" id="email" name="email" required="required"
placeholder="your.email@company.com"/>
</div>
<div class="mb-3">
<label for="name" class="form-label">Full Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="name" name="name" required="required"
placeholder="John Doe"/>
</div>
<div class="mb-3">
<label for="company_name" class="form-label">Company Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="company_name" name="company_name" required="required"
placeholder="Your Company Ltd."/>
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number</label>
<input type="tel" class="form-control" id="phone" name="phone"
placeholder="+855 12 345 678"/>
</div>
<div class="mb-3">
<label for="country_id" class="form-label">Country</label>
<select class="form-select" id="country_id" name="country_id">
<option value="">Select Country</option>
<t t-foreach="countries" t-as="country" t-key="country.id">
<option t-att-value="country.id" t-esc="country.name"/>
</t>
</select>
</div>
<div class="alert alert-warning mt-3">
<small>
<i class="fa fa-shield-alt me-1"/>
By registering, you agree to our Terms of Service and Privacy Policy
</small>
</div>
<button type="submit" class="btn btn-success btn-lg w-100 mt-3" id="submit-trial-btn">
<i class="fa fa-rocket me-2"/>Start Free Trial
</button>
<div class="text-center mt-3">
<small class="text-muted">
<i class="fa fa-clock me-1"/> Setup takes 30-60 seconds
</small>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</t>
</template>
<!-- Email Verification Page -->
<template id="email_verification_page" name="Email Verification">
<t t-call="website.layout">
<div id="wrap" class="email-verification-page">
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<div class="card">
<div class="card-body py-5">
<i class="fa fa-envelope-open-o fa-5x text-primary mb-4"/>
<h2 class="mb-3">Verify Your Email</h2>
<p class="lead mb-4">
We've sent a verification link to your email address.<br/>
Please check your inbox and click the link to continue.
</p>
<div class="alert alert-info">
<p class="mb-2"><strong>Didn't receive the email?</strong></p>
<button type="button" class="btn btn-link" id="resend-verification">
Click here to resend
</button>
</div>
<a href="/trial" class="btn btn-outline-secondary mt-3">
<i class="fa fa-arrow-left me-2"/>Back to Trial Signup
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</t>
</template>
<!-- Provisioning Success Page -->
<template id="provisioning_success" name="Provisioning Success">
<t t-call="website.layout">
<div id="wrap" class="provisioning-success-page">
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card border-success">
<div class="card-body text-center py-5">
<i class="fa fa-check-circle fa-5x text-success mb-4"/>
<h1 class="display-4 mb-3">Your Trial is Ready!</h1>
<p class="lead mb-4">
Your database has been successfully created and configured.<br/>
You can now start using your selected applications.
</p>
<div class="row mt-5">
<div class="col-md-6 mb-3">
<div class="card bg-light">
<div class="card-body">
<h5 class="card-title">
<i class="fa fa-link me-2"/>Your Instance URL
</h5>
<p class="card-text">
<a t-attf-href="https://{{provisioning_result.database_url}}"
class="btn btn-primary btn-lg" target="_blank">
<t t-esc="provisioning_result.database_url"/>
</a>
</p>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card bg-light">
<div class="card-body">
<h5 class="card-title">
<i class="fa fa-key me-2"/>Admin Credentials
</h5>
<p class="card-text">
<strong>Login:</strong> <t t-esc="provisioning_result.admin_login"/><br/>
<strong>Password:</strong> <t t-esc="provisioning_result.admin_password"/>
</p>
<small class="text-muted">
<i class="fa fa-info-circle"/>
These credentials have been sent to your email
</small>
</div>
</div>
</div>
</div>
<div class="alert alert-info mt-4">
<h5 class="alert-heading">
<i class="fa fa-gift me-2"/>15-Day Free Trial Activated
</h5>
<p>
You have full access to all features for the next 15 days.<br/>
No credit card required during the trial period.
</p>
</div>
<div class="mt-4">
<a t-attf-href="https://{{provisioning_result.database_url}}"
class="btn btn-success btn-lg me-3" target="_blank">
<i class="fa fa-external-link me-2"/>Launch Your Instance
</a>
<a href="/subscription/upgrade" class="btn btn-outline-primary btn-lg">
<i class="fa fa-arrow-up me-2"/>Upgrade Now
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</t>
</template>
<!-- Provisioning Failed Page -->
<template id="provisioning_failed" name="Provisioning Failed">
<t t-call="website.layout">
<div id="wrap" class="provisioning-failed-page">
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<div class="card border-danger">
<div class="card-body py-5">
<i class="fa fa-exclamation-triangle fa-5x text-danger mb-4"/>
<h2 class="mb-3">Provisioning Failed</h2>
<p class="lead mb-4">
We encountered an issue while creating your database.<br/>
Please try again or contact support.
</p>
<div class="alert alert-danger">
<strong>Error:</strong>
<t t-esc="provisioning_result.get('error', 'Unknown error')"/>
</div>
<a href="/trial" class="btn btn-primary btn-lg">
<i class="fa fa-refresh me-2"/>Try Again
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</t>
</template>
</odoo>