19785629d1
High-friction conversion points (payment step, review step, order intro) had almost no trust reinforcement at the moment of payment. Adds a shared, regulator-agnostic CheckoutTrustBand component used across all four verticals: - Payment step: 'full' variant -- money-back-if-we-fail-to-file guarantee + 256-bit TLS / Stripe / SOC 2 / PCI / fixed-price security badges + the right 'not affiliated with <agency>' disclaimer for the vertical. - Review step: 'compact' variant -- guarantee + disclaimer (no badges). - Order intro (VerticalOrderHeader, shared by all 49 order pages): thin green 'Secure checkout / Fixed price / Money-back guarantee' bar. Guarantee copy is a real promise (full refund if we cannot file), worded so it never overpromises a regulatory outcome (agency approval is not ours to give). Vertical is inferred from the intake-step list via slugVertical() (single source of truth, no hand-maintained slug table), with an explicit corporate slug set since corporate services share the generic 'entity' step. Note: the 'dc_agent' step is the telecom D.C. process-agent designation, not corporate. Also fixes two pre-existing mislabeled order-page headers surfaced by an exhaustive header-vs-disclaimer audit: rmd-filing (Robocall Mitigation DB) and new-carrier-bundle (VoIP carrier onboarding) are telecom, not healthcare/ trucking.
114 lines
5 KiB
Text
114 lines
5 KiB
Text
---
|
|
// Shared checkout trust band. One source of truth for the security + guarantee
|
|
// reassurance shown at the high-friction moments of the order flow (payment
|
|
// step, review step, and the order intro). Used across ALL verticals
|
|
// (telecom, trucking, healthcare, corporate), so the copy is regulator-agnostic
|
|
// except for an optional vertical-specific affiliation disclaimer.
|
|
//
|
|
// Usage:
|
|
// <CheckoutTrustBand variant="full" vertical="healthcare" /> // Payment step
|
|
// <CheckoutTrustBand variant="compact" vertical="telecom" /> // Review step
|
|
// <CheckoutTrustBand variant="bar" /> // Order H1 bar
|
|
//
|
|
// The guarantee is a real money-back-if-we-fail-to-file promise: if we are
|
|
// unable to file your filing, you get a full refund. Worded so it never
|
|
// overpromises a regulatory outcome (agency approval is not ours to guarantee),
|
|
// only our own work.
|
|
export interface Props {
|
|
variant?: "full" | "compact" | "bar";
|
|
vertical?: "trucking" | "telecom" | "healthcare" | "corporate";
|
|
}
|
|
const { variant = "full", vertical } = Astro.props;
|
|
|
|
// Regulator-agnostic security badges shown on every order.
|
|
const BADGES = [
|
|
{ icon: "\u{1F512}", label: "256-bit TLS encrypted" },
|
|
{ icon: "\u{1F4B3}", label: "Secure payment by Stripe" },
|
|
{ icon: "\u{1F6E1}\u{FE0F}", label: "SOC 2 hosting \u00b7 PCI compliant" },
|
|
{ icon: "\u{1F4CB}", label: "Fixed price, no billable hours" },
|
|
];
|
|
|
|
const GUARANTEE_TITLE = "Money-back guarantee";
|
|
const GUARANTEE_BODY =
|
|
"If we are unable to file your filing, you get a full refund. Fixed price, no billable hours, no surprises.";
|
|
|
|
// Affiliation disclaimer is vertical-specific (only relevant when the order is
|
|
// tied to a particular agency). Omitted when vertical is unknown.
|
|
const DISCLAIMERS: Record<NonNullable<Props["vertical"]>, string> = {
|
|
healthcare: "Performance West is an independent compliance firm, not affiliated with CMS or Medicare.",
|
|
telecom: "Performance West is an independent compliance firm, not affiliated with the FCC or USAC.",
|
|
trucking: "Performance West is an independent compliance firm, not affiliated with the FMCSA or DOT.",
|
|
corporate: "Performance West is an independent compliance firm, not a government agency.",
|
|
};
|
|
const disclaimer = vertical ? DISCLAIMERS[vertical] : "";
|
|
---
|
|
|
|
{variant === "bar" && (
|
|
<div class="pw-trust-bar">
|
|
<span class="pw-tb-item"><span aria-hidden="true">{"\u{1F512}"}</span> Secure checkout</span>
|
|
<span class="pw-tb-sep" aria-hidden="true">·</span>
|
|
<span class="pw-tb-item"><span aria-hidden="true">{"\u{1F4B5}"}</span> Fixed price, no billable hours</span>
|
|
<span class="pw-tb-sep" aria-hidden="true">·</span>
|
|
<span class="pw-tb-item"><span aria-hidden="true">{"\u2713"}</span> Money-back guarantee: we file it or your money back</span>
|
|
</div>
|
|
)}
|
|
|
|
{variant !== "bar" && (
|
|
<div class={`pw-trust ${variant === "compact" ? "is-compact" : ""}`}>
|
|
<div class="pw-trust-guarantee">
|
|
<span class="pw-guarantee-icon" aria-hidden="true">{"\u{2705}"}</span>
|
|
<div>
|
|
<p class="pw-guarantee-title">{GUARANTEE_TITLE}</p>
|
|
<p class="pw-guarantee-body">{GUARANTEE_BODY}</p>
|
|
</div>
|
|
</div>
|
|
{variant === "full" && (
|
|
<ul class="pw-trust-badges" aria-label="Security and trust">
|
|
{BADGES.map((b) => (
|
|
<li><span class="pw-badge-icon" aria-hidden="true">{b.icon}</span>{b.label}</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
{disclaimer && <p class="pw-trust-disclaimer">{disclaimer}</p>}
|
|
</div>
|
|
)}
|
|
|
|
<style>
|
|
/* Thin bar (order intro) */
|
|
.pw-trust-bar {
|
|
display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
|
|
margin: 0.75rem 0 0; padding: 0.6rem 0.85rem;
|
|
background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px;
|
|
font-size: 0.82rem; color: #166534; line-height: 1.4;
|
|
}
|
|
.pw-tb-item { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; }
|
|
.pw-tb-sep { color: #86efac; }
|
|
|
|
/* Card (payment + review) */
|
|
.pw-trust {
|
|
margin: 1.5rem 0 0; padding: 1rem 1.15rem;
|
|
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
|
|
}
|
|
.pw-trust.is-compact { margin: 1.25rem 0 0; padding: 0.85rem 1rem; }
|
|
.pw-trust-guarantee {
|
|
display: flex; gap: 0.7rem; align-items: flex-start;
|
|
padding: 0.75rem 0.85rem; background: #ecfdf5;
|
|
border: 1px solid #6ee7b7; border-radius: 8px;
|
|
}
|
|
.pw-guarantee-icon { font-size: 1.25rem; line-height: 1.2; flex: 0 0 auto; }
|
|
.pw-guarantee-title { margin: 0 0 0.15rem; font-size: 0.9rem; font-weight: 800; color: #047857; }
|
|
.pw-guarantee-body { margin: 0; font-size: 0.82rem; color: #065f46; line-height: 1.5; }
|
|
.pw-trust-badges {
|
|
list-style: none; margin: 0.85rem 0 0; padding: 0;
|
|
display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
|
|
}
|
|
.pw-trust-badges li {
|
|
display: inline-flex; align-items: center; gap: 0.35rem;
|
|
font-size: 0.78rem; font-weight: 600; color: #0f766e;
|
|
}
|
|
.pw-badge-icon { font-size: 0.9rem; }
|
|
.pw-trust-disclaimer {
|
|
margin: 0.75rem 0 0; font-size: 0.72rem; color: #94a3b8; line-height: 1.4;
|
|
}
|
|
.pw-trust.is-compact .pw-trust-disclaimer { margin-top: 0.6rem; }
|
|
</style>
|