GuaranteedSale Component

Overview

The DsGuaranteedSale component displays a guaranteed offer with current value, status badge, datetime information, and action buttons. It provides a clean, professional presentation for guaranteed sale offers with flexible alignment options (center or left).

This enterprise component is ideal for real estate, automotive, and marketplace applications where guaranteed pricing needs to be prominently displayed with clear status indicators and actionable controls.

When to Use

• Real Estate Applications: Display guaranteed home offers with acceptance status
• Automotive Marketplaces: Show guaranteed trade-in or purchase values
• Enterprise Dashboards: Present time-sensitive guaranteed pricing with expiration dates
• Transaction Workflows: Guide users through offer acceptance, review, or cancellation flows
• Status Tracking: Monitor pricing requests with visual status indicators

When NOT to Use

• Static Pricing Displays - Use a simple Card or pricing component instead
• Non-Guaranteed Values - This component implies a commitment; use estimates/quotes components for non-binding prices
• Simple Call-to-Action - Use a Button component if you don't need status tracking
• Multiple Offers Side-by-Side - Consider a comparison table or grid layout instead

Key Features

• 5 Status States: Available, Accepted, Requested, Expired, Not Available
• Smart Button Labels: Context-aware button text based on status (with override capability)
• Flexible Date/Time Display: Granular show/hide controls for updated and expires timestamps
• Dual Alignment Modes: Center or left alignment for various layout contexts
• Full Customization: 20 props for complete control over appearance and behavior
• WCAG 2.1 AAA Compliant: Meets highest accessibility standards

Interactive Demo

GuaranteedSale Playground

Customize the guaranteed sale offer using the controls below. Experiment with different values, statuses, alignment, and date/time options.

Guaranteed Offer

$22,500

Accepted

Updated:Nov 3, 2025|10:55:04a.m.EST

Expires:Nov 3, 2025

Controls

Price Value

Price Value

The guaranteed sale amount (without $)

Status

Accepted

Status

Current status badge

Alignment

center

Alignment

Layout alignment for content

Show DateTime

Display date/time information section (disabled for Expired and Not Available statuses)

Show Updated Date

Display the updated date in the datetime section

Show Updated Time

Display the updated time in the datetime section

Show Expires Date

Display the expires date in the datetime section

Updated Date

Updated Date

Update date string

Updated Time

Updated Time

Update time string

Time Period

a.m.

Time Period

AM/PM indicator

Timezone

EST

Timezone

Timezone abbreviation

Expires Date

Expires Date

Expiration date string

Code

<template>
  <DsGuaranteedSale
    @primary-action="handlePrimaryAction"
    @secondary-action="handleSecondaryAction"
  />
</template>

<script setup>
const handlePrimaryAction = () => {
  console.log('Primary action clicked!');
};

const handleSecondaryAction = () => {
  console.log('Secondary action clicked!');
};
</script>

When to Use

Use GuaranteedSale for:

• Displaying guaranteed offer values in real estate or automotive contexts
• Showing current offer value with acceptance status
• Presenting time-sensitive offers with expiration dates
• Providing users with key transaction information and action buttons
• Enterprise dashboards where guaranteed values need prominent display

Alignment Options

Center Alignment

Guaranteed Offer

$22,500

Accepted

Updated:Nov 3, 2025|10:55:04a.m.EST

Expires:Nov 3, 2025

Left Alignment

Guaranteed Offer

$22,500

Accepted

Updated:Nov 3, 2025|10:55:04a.m.EST

Expires:Nov 3, 2025

<!-- Center Alignment (default) -->
<template>
  <DsGuaranteedSale align="center" />
</template>

<!-- Left Alignment -->
<template>
  <DsGuaranteedSale align="left" />
</template>

Status Variations

Guaranteed Offer

$22,500

Offer Available

Updated:Nov 3, 2025|10:55:04a.m.EST

Expires:Nov 3, 2025

Guaranteed Offer

$22,500

Accepted

Updated:Nov 3, 2025|10:55:04a.m.EST

Expires:Nov 3, 2025

Guaranteed Offer

$22,500

Pricing Requested

Updated:Nov 3, 2025|10:55:04a.m.EST

Expires:Nov 3, 2025

Guaranteed Offer

$22,500

Expired

Guaranteed Offer

$--

Not Available

<template>
  <DsGuaranteedSale status="Available" />
  <DsGuaranteedSale status="Accepted" />
  <DsGuaranteedSale status="Requested" />
  <DsGuaranteedSale status="Expired" />
  <DsGuaranteedSale status="Not Available" />
</template>

Usage Examples

Basic Usage

Guaranteed Offer

$25,000

Offer Available

Updated:Nov 3, 2025|10:55:04a.m.EST

Expires:Nov 3, 2025

<template>
  <DsGuaranteedSale
    price-value="25,000"
    status="Available"
    @primary-action="handleAcceptOffer"
  />
</template>

<script setup>
const handleAcceptOffer = () => {
  console.log('Offer accepted!');
  // Handle offer acceptance logic
};
</script>

Custom Button Labels

Guaranteed Offer

$18,500

Accepted

Updated:Nov 3, 2025|10:55:04a.m.EST

Expires:Nov 3, 2025

<template>
  <DsGuaranteedSale
    price-value="18,500"
    status="Accepted"
    primary-button-text="View Contract"
    @primary-action="viewContract"
  />
</template>

<script setup>
const viewContract = () => {
  // Navigate to contract view
};
</script>

Left Alignment in Dashboard

Guaranteed Offer

$22,500

Offer Available

Updated:Dec 18, 2025|14:30:00p.m.PST

Expires:Dec 25, 2025

<template>
  <DsGuaranteedSale
    align="left"
    price-value="22,500"
    status="Available"
    updated-date="Dec 18, 2025"
    updated-time="14:30:00"
    time-period="p.m."
    timezone="PST"
    expires-date="Dec 25, 2025"
  />
</template>

Conditional Date/Time Display

Guaranteed Offer

$19,800

Accepted

Updated:Nov 3, 2025

<template>
  <DsGuaranteedSale
    price-value="19,800"
    status="Accepted"
    :show-updated-time="false"
    :show-expires-date="false"
  />
</template>

This displays only the updated date without time or expiration information.

API Reference

Props

Core Props

Name	Type	Default	Description
priceValue	String	'22,500'	The guaranteed sale amount (displays as $amount)
status	String	'Accepted'	Status badge: 'Available', 'Accepted', 'Requested', 'Expired', 'Not Available'
align	String	'center'	Layout alignment: 'center' or 'left'
showDateTime	Boolean	true	Whether to display the date/time section (auto-hides for Expired/Not Available)
updatedDate	String	'Nov 3, 2025'	Date string for updated timestamp
updatedTime	String	'10:55:04'	Time string for updated timestamp
timePeriod	String	'a.m.'	AM/PM indicator: 'a.m.' or 'p.m.'
timezone	String	'EST'	Timezone: 'PST', 'MST', 'CST', or 'EST'
expiresDate	String	'Nov 3, 2025'	Date string for expiration

DateTime Visibility Props

Name	Type	Default	Description
showUpdatedDate	Boolean	true	Toggle display of updated date in datetime section
showUpdatedTime	Boolean	true	Toggle display of updated time in datetime section
showExpiresDate	Boolean	true	Toggle display of expires date in datetime section

Button Customization Props

Name	Type	Default	Description
primaryButtonText	String	(dynamic)	Override default primary button label (based on status if not provided)
secondaryButtonText	String	(dynamic)	Override default secondary button label (based on status if not provided)
hidePrimaryButton	Boolean	false	Hide the primary action button
hideSecondaryButton	Boolean	false	Hide the secondary action button
primaryButtonDisabled	Boolean	false	Disable the primary action button
secondaryButtonDisabled	Boolean	false	Disable the secondary action button
primaryButtonLoading	Boolean	false	Show loading spinner on primary button
secondaryButtonLoading	Boolean	false	Show loading spinner on secondary button

Events

Name	Payload	Description
primary-action	-	Emitted when primary action button is clicked
secondary-action	-	Emitted when secondary action button is clicked

Accessibility

• ✅ WCAG 2.1 AAA compliant
• ✅ Semantic HTML structure with proper heading hierarchy
• ✅ Icon labels for screen reader compatibility
• ✅ Keyboard navigation support on action buttons
• ✅ Proper color contrast for all text and status badges
• ✅ Clear visual status indicators with text labels (not color-only)

Related Components

• Button - For custom action buttons
• Card - For surrounding container layouts