528 lines
45 KiB
Plaintext
528 lines
45 KiB
Plaintext
@rendermode InteractiveServer
|
||
@inject PersistentComponentState ApplicationState
|
||
@inject ClassObj.IPAddressService IpAddressService
|
||
@page "/"
|
||
|
||
<PageTitle>Welcome</PageTitle>
|
||
|
||
@if (ProgramClosed)
|
||
{
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12 text-center mt-5">
|
||
<h1>Thank you for your interest!</h1>
|
||
<p>Unfortunately, the enrollment period for our Winter Campaign has drawn to a close.</p>
|
||
<p>Stay tuned for more great campaigns in the future!</p>
|
||
<p><i class="fa-solid fa-heart"></i></p>
|
||
</div>
|
||
<div class="col-12 text-center">
|
||
<img class="img-fluid" src="/img/34d1685e-d655-421b-aef8-e077140534f9.png" alt="Thank You!" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
else if (ShowWizard)
|
||
{
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<TelerikWizard Value="@Value" ValueChanged="@OnWizardValueChanged" OnFinish="OnFinishHandler" Width="100%" Height="95vh" Class="sbWizard" StepperPosition=WizardStepperPosition.Top>
|
||
<WizardSteps>
|
||
<WizardStep Label="Introduction" Icon="@SvgIcon.Bell" Valid="@IsAudienceChoiceValid">
|
||
<Content>
|
||
<TelerikForm Model="@cardType" @ref="@IntroForm">
|
||
<FormItems>
|
||
<FormItem>
|
||
<Template>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12 px-sm-5 mb-2">
|
||
<h1>KeyMotive's Winter Best Customer Program</h1>
|
||
<div class="px-sm-5 mb-2">
|
||
<p>It's time for our Winter Best Customer Program!<br />If you're looking to finish off the year with a bang, then this is the campaign for you!</p>
|
||
<p>
|
||
Using this wizard, decide what media you'd like to mail, personalize your selection, and choose from a few suggested designs (or request a custom design from our
|
||
creative team), and that's it!
|
||
</p>
|
||
<p>Let us handle the rest!</p>
|
||
</div>
|
||
<div>
|
||
<img src="/img/HomeCollage.png" class="img-fluid card-preview-img" />
|
||
</div>
|
||
<br />
|
||
<div class="px-sm-5 mb-2">
|
||
Our campaign focuses on rewarding your <strong class="text-primary">Very Best Customers</strong> for their loyalty and reminding them of what makes your shop great.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Template>
|
||
</FormItem>
|
||
</FormItems>
|
||
<FormButtons>
|
||
@* Need this here to avoid addition of random submit button *@
|
||
</FormButtons>
|
||
</TelerikForm>
|
||
</Content>
|
||
</WizardStep>
|
||
@* *@
|
||
@* Step 1 - greeting card vs postcard *@
|
||
@* *@
|
||
<WizardStep Label="Card Type" Icon="@SvgIcon.LayoutSideBySide" OnChange="@OnCardChoiceStepChange">
|
||
<Content>
|
||
<TelerikForm Model="@cardType" @ref="@cardTypeForm">
|
||
<FormItems>
|
||
<FormItem>
|
||
<Template>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<h1 class="text-center">Choose a Card Type</h1>
|
||
</div>
|
||
<div class="col-12 text-center mb-3">
|
||
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
|
||
<ButtonGroupToggleButton @bind-Selected="@isGreetingCard">Greeting Card</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@isPostcard">Postcard</ButtonGroupToggleButton>
|
||
</TelerikButtonGroup>
|
||
</div>
|
||
@* Preview information about the selected card type*@
|
||
@if (isGreetingCard)
|
||
{
|
||
<div class="col-sm-4 mb-3 text-start">
|
||
<h4>Eye-catching Personalized Greeting Card!</h4>
|
||
<ul>
|
||
<li>Unique and bold presentation!</li>
|
||
<li>Large trifold piece</li>
|
||
<li>Coupons are detachable and easy to remove, offering great convenience for your customers!</li>
|
||
<li>Leave it to us - we select, print, sort, stuff and mail for just <strong class="text-primary text-nowrap">$1.19 each</strong></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-sm-8 text-center mb-3">
|
||
<img style="max-height:55vh; max-width:120%; width:auto; height:auto" class="img-fluid card-preview-img" src="/img/GreetingCards.png" alt="Sample greeting cards" />
|
||
</div>
|
||
}
|
||
else
|
||
{
|
||
<div class="col-sm-4 mb-3 text-start">
|
||
<h4>Premium Postcard Really Stands Out in the Mailbox</h4>
|
||
<ul>
|
||
<li>Premium paper, Jumbo-Sized (8½ x 6 inches)</li>
|
||
<li>UV gloss-coated</li>
|
||
<li>Choose from one of our pre-selected options, or ask for a custom design!</li>
|
||
<li>Full service - select, print, sort, mail for just <strong class="text-primary text-nowrap">97¢ each</strong></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-sm-8 text-center mb-3">
|
||
<img style="max-height:55vh; max-width:120%; width:auto; height:auto" class="img-fluid card-preview-img" src="/img/Postcards.png" alt="Sample postcards" />
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
</Template>
|
||
</FormItem>
|
||
</FormItems>
|
||
<FormButtons>
|
||
@* Need this here to avoid addition of random submit button *@
|
||
</FormButtons>
|
||
</TelerikForm>
|
||
</Content>
|
||
</WizardStep>
|
||
@* *@
|
||
@* Step 2 - selecting card design *@
|
||
@* *@
|
||
<WizardStep Label="Card Design" Icon="@SvgIcon.Palette" OnChange="@OnDesignStepChange">
|
||
<Content>
|
||
<TelerikForm Model="@custOptions" @ref="@customizationForm">
|
||
<FormValidation>
|
||
<DataAnnotationsValidator></DataAnnotationsValidator>
|
||
</FormValidation>
|
||
<FormItems>
|
||
<FormItem>
|
||
<Template>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<h1 class="text-center">Choose a Design</h1>
|
||
</div>
|
||
<div class="col-12 text-center mb-3">
|
||
@* Button logic *@
|
||
<div class="text-center">
|
||
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
|
||
@if (isGreetingCard)
|
||
{
|
||
<ButtonGroupToggleButton @bind-Selected="@designOne">Greeting Card 1</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@designTwo">Greeting Card 2</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@designThree">Greeting Card 3</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@designFour">Greeting Card 4</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@designCustom">Custom</ButtonGroupToggleButton>
|
||
}
|
||
else
|
||
{
|
||
<ButtonGroupToggleButton @bind-Selected="@designOne">Postcard 1</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@designTwo">Postcard 2</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@designThree">Postcard 3</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@designFour">Postcard 4</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@designCustom">Custom</ButtonGroupToggleButton>
|
||
}
|
||
</TelerikButtonGroup>
|
||
<br /><br />
|
||
@* Card preview logic *@
|
||
@if (designOne)
|
||
{
|
||
@if (isPostcard)
|
||
{
|
||
<img style="max-width:40%" src="/img/Postcard1.jpg" class="img-fluid card-preview-img" alt="Automotive" />
|
||
}
|
||
else
|
||
{
|
||
<img style="max-width:40%" src="/img/Greeting1_sd.png" class="img-fluid card-preview-img" alt="Automotive" />
|
||
}
|
||
}
|
||
else if (designTwo)
|
||
{
|
||
@if (isPostcard)
|
||
{
|
||
<img style="max-width:40%" src="/img/Postcard2.jpg" class="img-fluid card-preview-img" alt="Winter" />
|
||
}
|
||
else
|
||
{
|
||
<img style="max-width:40%" src="/img/Greeting2_sd.png" class="img-fluid card-preview-img" alt="Winter" />
|
||
}
|
||
}
|
||
else if (designThree)
|
||
{
|
||
@if (isPostcard)
|
||
{
|
||
<img style="max-width:40%" src="/img/Postcard3.jpg" class="img-fluid card-preview-img" alt="Puppy" />
|
||
}
|
||
else
|
||
{
|
||
<img style="max-width:40%" src="/img/Greeting3_sd.png" class="img-fluid card-preview-img" alt="Puppy" />
|
||
}
|
||
}
|
||
else if (designFour)
|
||
{
|
||
@if (isPostcard)
|
||
{
|
||
<img style="max-width:40%" src="/img/Postcard4.jpg" class="img-fluid card-preview-img" alt="Beach" />
|
||
}
|
||
else
|
||
{
|
||
<img style="max-width:40%" src="/img/Greeting4_sd.png" class="img-fluid card-preview-img" alt="Beach" />
|
||
}
|
||
}
|
||
else if (designCustom)
|
||
{
|
||
<h4>We will reach out to you to create your custom masterpiece!</h4>
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Template>
|
||
</FormItem>
|
||
</FormItems>
|
||
<FormButtons />
|
||
</TelerikForm>
|
||
</Content>
|
||
</WizardStep>
|
||
@* *@
|
||
@* Step 3 - Greeting, verse, signature *@
|
||
@* *@
|
||
<WizardStep Label="Customization" Icon="@SvgIcon.Signature" OnChange="@OnMessagingStepChange">
|
||
<Content>
|
||
<TelerikForm Model="@messagingOptions" @ref="@messagingForm">
|
||
<FormItems>
|
||
<FormItem>
|
||
<Template>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<h4 class="mb-3">Please Select a Greeting</h4>
|
||
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single" Class="vertical-buttons block-buttons mb-5">
|
||
<ButtonGroupToggleButton @bind-Selected="@greetingOne">Happy Holidays</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@greetingTwo">Merry Christmas</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@greetingThree">Season's Greetings</ButtonGroupToggleButton>
|
||
</TelerikButtonGroup>
|
||
@if (greetingOne)
|
||
{
|
||
<div class="p-5">
|
||
<img style="max-width:25%" src="/img/greetings/HappyHolidays.png" class="img-fluid card-preview-img" alt="Happy Holidays greeting preview" />
|
||
</div>
|
||
}
|
||
else if (greetingTwo)
|
||
{
|
||
<div class="p-5">
|
||
<img style="max-width:20%" src="/img/greetings/MerryChristmas.png" class="img-fluid card-preview-img" alt="Merry Christmas greeting preview" />
|
||
</div>
|
||
}
|
||
else if (greetingThree)
|
||
{
|
||
<div class="p-5">
|
||
<img style="max-width:20%" src="/img/greetings/SeasonsGreetings.png" class="img-fluid card-preview-img" alt="Season's Greetings preview" />
|
||
</div>
|
||
}
|
||
</div>
|
||
<div class="col-12">
|
||
<hr />
|
||
<h4 class="mb-3">Please Select a Verse</h4>
|
||
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single" Class="vertical-buttons block-buttons mb-5">
|
||
<ButtonGroupToggleButton @bind-Selected="@verseOne">Option 1</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@verseTwo">Option 2</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@verseThree">Option 3</ButtonGroupToggleButton>
|
||
</TelerikButtonGroup>
|
||
@if (verseOne)
|
||
{
|
||
<p class="fst-italic">Your support means so much to us.</p>
|
||
<p class="fst-italic">Thank you for choosing our team to keep you on the road.</p>
|
||
<p class="fst-italic">Wishing you a wonderful holiday season and a happy New Year!</p>
|
||
}
|
||
else if (verseTwo)
|
||
{
|
||
<p class="fst-italic">Warmest wishes this holiday season from all of us!</p>
|
||
<p class="fst-italic">Thank you for your continued trust and support.</p>
|
||
<p class="fst-italic">May 2027 bring you happiness, good health, and many safe miles ahead.</p>
|
||
}
|
||
else if (verseThree)
|
||
{
|
||
<p class="fst-italic">It’s been our pleasure serving you throughout the year.</p>
|
||
<p class="fst-italic">We’re grateful for your business and look forward to seeing you in 2027.</p>
|
||
<p class="fst-italic">Merry Christmas and Happy New Year!</p>
|
||
}
|
||
</div>
|
||
<div class="col-12">
|
||
<hr class="m-5" />
|
||
<h4 class="mb-3">Please Select a Signature</h4>
|
||
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single" Class="mb-5">
|
||
<ButtonGroupToggleButton @bind-Selected="@sigOne">From Your Friends</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@sigTwo">Name, Title, Phone Number</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@sigThree">Custom</ButtonGroupToggleButton>
|
||
</TelerikButtonGroup>
|
||
@if (sigOne)
|
||
{
|
||
<p>From your friends at <strong>TopSpeed Tire</strong><br /><i style="color:#888">(your location name)</i></p>
|
||
<p><strong>(888) 555-3712</strong><br /><i style="color:#888">(your location phone number)</i></p>
|
||
}
|
||
else if (sigTwo)
|
||
{
|
||
<label style="display:block" for="CustomName" class="k-label k-form-label text-center">Name:</label>
|
||
<TelerikTextBox Class="mb-3" Id="CustomName" @bind-Value="@customName" MaxLength="50" Width="25rem"></TelerikTextBox>
|
||
<label style="display:block" for="CustomTitle" class="k-label k-form-label text-center">Title:</label>
|
||
<TelerikTextBox Class="mb-3" Id="CustomTitle" @bind-Value="@customTitle" MaxLength="50" Width="25rem"></TelerikTextBox>
|
||
<label style="display:block" for="CustomPhone" class="k-label k-form-label text-center">Phone:</label>
|
||
<TelerikTextBox Class="mb-3" Id="CustomPhone" @bind-Value="@customPhone" MaxLength="15" Width="20rem"></TelerikTextBox>
|
||
}
|
||
else if (sigThree)
|
||
{
|
||
<br />
|
||
<label style="display:block" for="CustomSignature" class="text-center">Custom Message (max 30 characters per line, up to 4 lines total)</label>
|
||
|
||
<br />
|
||
<TelerikTextArea Id="CustomSignature" @bind-Value="@customSignature" Rows="4" Cols="35" MaxLength="120"></TelerikTextArea>
|
||
}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</Template>
|
||
</FormItem>
|
||
</FormItems>
|
||
<FormButtons />
|
||
</TelerikForm>
|
||
</Content>
|
||
</WizardStep>
|
||
@* *@
|
||
@* Step 4 - Logo Selection *@
|
||
@* *@
|
||
<WizardStep Label="Logos" Icon="@SvgIcon.Image" OnChange="@OnLogoStepChange">
|
||
<Content>
|
||
<TelerikForm Model="@logoOptions" @ref="@logoForm">
|
||
<FormItems>
|
||
<FormItem>
|
||
<Template>
|
||
<div class="container">
|
||
<div class="col-12 text-center mb-3">
|
||
<h4 class="mb-3">Would you like to include your logo on the card?</h4>
|
||
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single" Class="vertical-buttons block-buttons mb-5">
|
||
<ButtonGroupToggleButton @bind-Selected="@logoOnCard">Yes</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton>No</ButtonGroupToggleButton>
|
||
</TelerikButtonGroup>
|
||
@if (isGreetingCard)
|
||
{
|
||
<hr class="m-5" />
|
||
<h4 class="mb-3">Would you like to include your logo on the envelope?</h4>
|
||
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single" Class="vertical-buttons block-buttons mb-5">
|
||
<ButtonGroupToggleButton @bind-Selected="@logoOnEnvelope">Yes</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton>No</ButtonGroupToggleButton>
|
||
</TelerikButtonGroup>
|
||
}
|
||
</div>
|
||
</div>
|
||
</Template>
|
||
</FormItem>
|
||
</FormItems>
|
||
<FormButtons>
|
||
</FormButtons>
|
||
</TelerikForm>
|
||
</Content>
|
||
</WizardStep>
|
||
@* *@
|
||
@* Step 5 - Location information *@
|
||
@* *@
|
||
<WizardStep Label="Location Info" Icon="@SvgIcon.MapMarker" OnChange="@OnLocationStepChange" Valid="@isLocationInfoValid">
|
||
<Content>
|
||
<TelerikForm Model="@locationInfo" @ref="@locationForm">
|
||
<FormItems>
|
||
<FormItem>
|
||
<Template>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12 mb-3">
|
||
<h1 class="text-center">Tell Us About You!</h1>
|
||
<p class="text-center text-muted">Fields marked with <span class="text-danger">*</span> are required.</p>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label style="display:block" for="LocationName">Location Name <span class="text-danger">*</span></label>
|
||
<TelerikTextBox Id="LocationName" @bind-Value="@locationInfo.LocationName" Width="100%" MaxLength="100"></TelerikTextBox>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label style="display:block" for="Manager">Store Manager <span class="text-danger">*</span></label>
|
||
<TelerikTextBox Id="Manager" @bind-Value="@locationInfo.Manager" Width="100%" MaxLength="100"></TelerikTextBox>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label style="display:block" for="Address">Address <span class="text-danger">*</span></label>
|
||
<TelerikTextBox Id="Address" @bind-Value="@locationInfo.Address" Width="100%" MaxLength="150"></TelerikTextBox>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label style="display:block" for="City">City <span class="text-danger">*</span></label>
|
||
<TelerikTextBox Id="City" @bind-Value="@locationInfo.City" Width="100%" MaxLength="100"></TelerikTextBox>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<label style="display:block" for="State">State <span class="text-danger">*</span></label>
|
||
<TelerikDropDownList Id="State" Data="@UsStates" @bind-Value="@locationInfo.State" Width="100%"></TelerikDropDownList>
|
||
</div>
|
||
<div class="col-md-3 mb-3">
|
||
<label style="display:block" for="Zip">Zip <span class="text-danger">*</span></label>
|
||
<TelerikTextBox Id="Zip" @bind-Value="@locationInfo.Zip" Width="100%" MaxLength="10" Placeholder="12345"></TelerikTextBox>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label style="display:block" for="PhoneNumber">Store Phone Number <span class="text-danger">*</span></label>
|
||
<TelerikTextBox Id="PhoneNumber" @bind-Value="@locationInfo.PhoneNumber" Width="100%" MaxLength="20" Placeholder="(555) 555-5555"></TelerikTextBox>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label style="display:block" for="ContactName">Contact Name <span class="text-danger">*</span></label>
|
||
<TelerikTextBox Id="ContactName" @bind-Value="@locationInfo.ContactName" Width="100%" MaxLength="100"></TelerikTextBox>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label style="display:block" for="ContactPhone">Contact Phone <span class="text-danger">*</span></label>
|
||
<TelerikTextBox Id="ContactPhone" @bind-Value="@locationInfo.ContactPhone" Width="100%" MaxLength="20" Placeholder="(555) 555-5555"></TelerikTextBox>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label style="display:block" for="ContactEmail">Your Email Address <span class="text-danger">*</span></label>
|
||
<TelerikTextBox Id="ContactEmail" @bind-Value="@locationInfo.ContactEmail" Width="100%" MaxLength="150" Placeholder="name@example.com"></TelerikTextBox>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Template>
|
||
</FormItem>
|
||
</FormItems>
|
||
<FormButtons />
|
||
</TelerikForm>
|
||
</Content>
|
||
</WizardStep>
|
||
@* *@
|
||
@* Step 6 - Payment *@
|
||
@* *@
|
||
<WizardStep Label="Payment Info" Icon="@SvgIcon.WalletOutline">
|
||
<Content>
|
||
<TelerikForm Model="@paymentInfo" @ref="@paymentForm">
|
||
<FormItems>
|
||
<FormItem>
|
||
<Template>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12 mb-4">
|
||
<div class="order-summary mx-auto text-start">
|
||
<h4 class="text-center mb-3">Review Your Selections</h4>
|
||
<dl class="row mb-0">
|
||
<dt class="col-5 col-sm-4">Card Type</dt><dd class="col-7 col-sm-8">@SummaryCardType</dd>
|
||
<dt class="col-5 col-sm-4">Design</dt><dd class="col-7 col-sm-8">@SummaryDesign</dd>
|
||
<dt class="col-5 col-sm-4">Greeting</dt><dd class="col-7 col-sm-8">@SummaryGreeting</dd>
|
||
<dt class="col-5 col-sm-4">Verse</dt><dd class="col-7 col-sm-8">@SummaryVerse</dd>
|
||
<dt class="col-5 col-sm-4">Signature</dt><dd class="col-7 col-sm-8">@SummarySignature</dd>
|
||
<dt class="col-5 col-sm-4">Logo</dt><dd class="col-7 col-sm-8">@SummaryLogos</dd>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<h1 class="text-center">How Would You Like to Pay?</h1>
|
||
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single" Class="vertical-buttons block-buttons mb-5">
|
||
<ButtonGroupToggleButton @bind-Selected="@ccOnFile">Credit Card On File</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@callWithInfo">Call With Payment Info</ButtonGroupToggleButton>
|
||
<ButtonGroupToggleButton @bind-Selected="@check">Check</ButtonGroupToggleButton>
|
||
</TelerikButtonGroup>
|
||
</div>
|
||
<div class="col-12 mb-5">
|
||
@if (ccOnFile)
|
||
{
|
||
<h4>Use our preferred payment method already on file.</h4>
|
||
}
|
||
else if (callWithInfo)
|
||
{
|
||
<h4>Please call me.</h4>
|
||
<p>I'll specify method of payment when reviewing the order.</p>
|
||
}
|
||
else if (check)
|
||
{
|
||
<h4>I'll be sending in a check</h4>
|
||
<p>I'll be sending in a check by the invoice's due date (10/31/2026).</p>
|
||
}
|
||
</div>
|
||
<hr />
|
||
<div class="col-12">
|
||
<label style="display:block" for="RequestedQuantity" class="text-center mb-3">Requested Quantity <span class="text-danger">*</span></label>
|
||
<TelerikTextBox class="mb-3" Id="RequestedQuantity" @bind-Value="@requestedQuantity" MaxLength="6" Width="15rem" Placeholder="e.g. 250"></TelerikTextBox>
|
||
<label style="display:block" for="AdditionalComments" class="text-center mb-3">Additional Notes</label>
|
||
<TelerikTextArea class="mb-3" Id="AdditionalComments" @bind-Value="@additionalComments" Rows="8" Cols="100" MaxLength="2500"></TelerikTextArea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Template>
|
||
</FormItem>
|
||
</FormItems>
|
||
<FormButtons />
|
||
</TelerikForm>
|
||
</Content>
|
||
</WizardStep>
|
||
</WizardSteps>
|
||
</TelerikWizard>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
else
|
||
{
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12 m-5">
|
||
Thank you, our customer care team will be in touch with you soon!
|
||
</div>
|
||
<div class="col-12">
|
||
<RandomImage />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
}
|
||
|
||
@* @if (appState != null)
|
||
{
|
||
<pre style="font-size:.8em">
|
||
SessionId: @appState.SessionId
|
||
DateCreated: @appState.DateCreated
|
||
DateExpires: @appState.DateExpires
|
||
IPAddress: @appState.myIpAddress
|
||
IPAddress2: @(IpAddressService.RemoteIpAddress.ToString())
|
||
</pre>
|
||
}
|
||
*@ |