This commit is contained in:
RDeck 2025-05-29 10:50:22 -04:00
parent 8d5f8fbc0b
commit d4b7eb7e5b
8 changed files with 430 additions and 385 deletions

Binary file not shown.

View File

@ -5,6 +5,10 @@
{
"AbsoluteMoniker": "D:0:0:{10E16044-8880-42A4-866B-B0461C450A71}|SummerBestWebForm2.csproj|c:\\repos\\summerbestwebform2\\components\\pages\\home.razor||{40D31677-CBC0-4297-A9EF-89D907823A98}",
"RelativeMoniker": "D:0:0:{10E16044-8880-42A4-866B-B0461C450A71}|SummerBestWebForm2.csproj|solutionrelative:components\\pages\\home.razor||{40D31677-CBC0-4297-A9EF-89D907823A98}"
},
{
"AbsoluteMoniker": "D:0:0:{10E16044-8880-42A4-866B-B0461C450A71}|SummerBestWebForm2.csproj|c:\\repos\\summerbestwebform2\\components\\pages\\home.razor.cs||{A6C744A8-0E4A-4FC6-886A-064283054674}",
"RelativeMoniker": "D:0:0:{10E16044-8880-42A4-866B-B0461C450A71}|SummerBestWebForm2.csproj|solutionrelative:components\\pages\\home.razor.cs||{A6C744A8-0E4A-4FC6-886A-064283054674}"
}
],
"DocumentGroupContainers": [
@ -68,10 +72,23 @@
"RelativeDocumentMoniker": "Components\\Pages\\Home.razor",
"ToolTip": "C:\\Repos\\SummerBestWebForm2\\Components\\Pages\\Home.razor",
"RelativeToolTip": "Components\\Pages\\Home.razor",
"ViewState": "AgIAAAwBAAAAAAAAAAAAACcBAAAAAAAAAAAAAA==",
"ViewState": "AgIAAK0BAAAAAAAAAAAcwMUBAAAhAAAAAAAAAA==",
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.000759|",
"WhenOpened": "2025-05-29T13:04:23.98Z",
"EditorCaption": ""
},
{
"$type": "Document",
"DocumentIndex": 1,
"Title": "Home.razor.cs",
"DocumentMoniker": "C:\\Repos\\SummerBestWebForm2\\Components\\Pages\\Home.razor.cs",
"RelativeDocumentMoniker": "Components\\Pages\\Home.razor.cs",
"ToolTip": "C:\\Repos\\SummerBestWebForm2\\Components\\Pages\\Home.razor.cs",
"RelativeToolTip": "Components\\Pages\\Home.razor.cs",
"ViewState": "AgIAAKMBAAAAAAAAAAAcwLoBAAAvAAAAAAAAAA==",
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.000738|",
"WhenOpened": "2025-05-29T14:37:32.314Z",
"EditorCaption": ""
}
]
}

View File

@ -5,6 +5,10 @@
{
"AbsoluteMoniker": "D:0:0:{10E16044-8880-42A4-866B-B0461C450A71}|SummerBestWebForm2.csproj|c:\\repos\\summerbestwebform2\\components\\pages\\home.razor||{40D31677-CBC0-4297-A9EF-89D907823A98}",
"RelativeMoniker": "D:0:0:{10E16044-8880-42A4-866B-B0461C450A71}|SummerBestWebForm2.csproj|solutionrelative:components\\pages\\home.razor||{40D31677-CBC0-4297-A9EF-89D907823A98}"
},
{
"AbsoluteMoniker": "D:0:0:{10E16044-8880-42A4-866B-B0461C450A71}|SummerBestWebForm2.csproj|c:\\repos\\summerbestwebform2\\components\\pages\\home.razor.cs||{A6C744A8-0E4A-4FC6-886A-064283054674}",
"RelativeMoniker": "D:0:0:{10E16044-8880-42A4-866B-B0461C450A71}|SummerBestWebForm2.csproj|solutionrelative:components\\pages\\home.razor.cs||{A6C744A8-0E4A-4FC6-886A-064283054674}"
}
],
"DocumentGroupContainers": [
@ -68,10 +72,23 @@
"RelativeDocumentMoniker": "Components\\Pages\\Home.razor",
"ToolTip": "C:\\Repos\\SummerBestWebForm2\\Components\\Pages\\Home.razor",
"RelativeToolTip": "Components\\Pages\\Home.razor",
"ViewState": "AgIAAAwBAAAAAAAAAAAAACcBAAAAAAAAAAAAAA==",
"ViewState": "AgIAAK0BAAAAAAAAAAAcwMUBAAAhAAAAAAAAAA==",
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.000759|",
"WhenOpened": "2025-05-29T13:04:23.98Z",
"EditorCaption": ""
},
{
"$type": "Document",
"DocumentIndex": 1,
"Title": "Home.razor.cs",
"DocumentMoniker": "C:\\Repos\\SummerBestWebForm2\\Components\\Pages\\Home.razor.cs",
"RelativeDocumentMoniker": "Components\\Pages\\Home.razor.cs",
"ToolTip": "C:\\Repos\\SummerBestWebForm2\\Components\\Pages\\Home.razor.cs",
"RelativeToolTip": "Components\\Pages\\Home.razor.cs",
"ViewState": "AgIAAKMBAAAAAAAAAAAcwLoBAAAvAAAAAAAAAA==",
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.000738|",
"WhenOpened": "2025-05-29T14:37:32.314Z",
"EditorCaption": ""
}
]
}

View File

@ -8,173 +8,173 @@
@if (ShowWizard)
{
<div class="container">
<div class="row">
<div class="col-12">
<TelerikWizard @bind-Value="@Value" OnFinish="OnFinishHandler" Width="100%" Height="95vh" Class="sbWizard" StepperPosition=WizardStepperPosition.Top>
<WizardSteps>
<WizardStep Label="Introduction" Icon="@SvgIcon.Globe" OnChange="@OnAudienceChoiceStepChange" 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 Summer Growth Program</h1>
<div class="px-sm-5 mb-2">
<p>It's time for our Summer Growth Program!<br />If you're looking to kick off your summer season with a wildly successful campgaign, then you've come to the right place!</p>
<p>
Using this wizard, choose your target audience, decide what media you'd like to mail, 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/7ccdfcc7-f91b-497e-8c19-ebb3a4021ea3.png" class="img-fluid" />
</div>
<div class="px-sm-5 mb-2 text-start">
Your audience choices are:
<ul>
<li>A list of your <strong class="text-primary">Very Best Customers</strong> (always a heavy-hitting campaign!)</li>
<li>
A list composed of <strong class="text-primary">Great Prospects</strong> near your shop, as well as a mix of formerly-Great Customers that you
<strong class="text-primary">haven't seen during the past 8 months</strong>.
</li>
</ul>
</div>
<div class="px-sm-5 text-start">
<strong>Please Select:</strong>
<TelerikRadioGroup Data="@audiences"
@bind-Value="@audienceType"
ValueField="@nameof(AudienceType.AudienceDescription)"
TextField="@nameof(AudienceType.AudienceDescription)">
</TelerikRadioGroup>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<TelerikWizard @bind-Value="@Value" OnFinish="OnFinishHandler" Width="100%" Height="95vh" Class="sbWizard" StepperPosition=WizardStepperPosition.Top>
<WizardSteps>
<WizardStep Label="Introduction" Icon="@SvgIcon.Globe" OnChange="@OnAudienceChoiceStepChange" 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 Summer Growth Program</h1>
<div class="px-sm-5 mb-2">
<p>It's time for our Summer Growth Program!<br />If you're looking to kick off your summer season with a wildly successful campgaign, then you've come to the right place!</p>
<p>
Using this wizard, choose your target audience, decide what media you'd like to mail, 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/7ccdfcc7-f91b-497e-8c19-ebb3a4021ea3.png" class="img-fluid" />
</div>
<div class="px-sm-5 mb-2 text-start">
Your audience choices are:
<ul>
<li>A list of your <strong class="text-primary">Very Best Customers</strong> (always a heavy-hitting campaign!)</li>
<li>
A list composed of <strong class="text-primary">Great Prospects</strong> near your shop, as well as a mix of formerly-Great Customers that you
<strong class="text-primary">haven't seen during the past 8 months</strong>.
</li>
</ul>
</div>
<div class="px-sm-5 text-start">
<strong>Please Select:</strong>
<TelerikRadioGroup Data="@audiences"
@bind-Value="@audienceType"
ValueField="@nameof(AudienceType.AudienceDescription)"
TextField="@nameof(AudienceType.AudienceDescription)">
</TelerikRadioGroup>
</div>
</div>
</Template>
</FormItem>
</FormItems>
<FormButtons>
</div>
</div>
</Template>
</FormItem>
</FormItems>
<FormButtons>
@* Need this here to avoid addition of random submit button *@
</FormButtons>
</TelerikForm>
</Content>
</WizardStep>
</FormButtons>
</TelerikForm>
</Content>
</WizardStep>
@* *@
@* Step 1 - plastic card vs postcard *@
@* *@
<WizardStep Label="Card Type" Icon="@SvgIcon.EnvelopeBox" OnChange="@OnCardChoiceStepChange" Valid="@IsCardChoiceValid">
<Content>
<TelerikForm Model="@cardType" @ref="@cardTypeForm">
<FormItems>
<FormItem>
<Template>
<div class="container">
<div class="row">
<div class="col-12">
<h1 style="text-center">Step 1 - Choose a Card Type</h1>
</div>
<div class="col-12 text-center mb-3">
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
<ButtonGroupToggleButton @bind-Selected="@isPlasticCard">Plastic Card</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@isPostcard">Postcard</ButtonGroupToggleButton>
</TelerikButtonGroup>
</div>
<WizardStep Label="Card Type" Icon="@SvgIcon.EnvelopeBox" OnChange="@OnCardChoiceStepChange" Valid="@IsCardChoiceValid">
<Content>
<TelerikForm Model="@cardType" @ref="@cardTypeForm">
<FormItems>
<FormItem>
<Template>
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="text-center">Step 1 - Choose a Card Type</h1>
</div>
<div class="col-12 text-center mb-3">
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
<ButtonGroupToggleButton @bind-Selected="@isPlasticCard">Plastic Card</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@isPostcard">Postcard</ButtonGroupToggleButton>
</TelerikButtonGroup>
</div>
@* Preview information about the selected card type*@
@if (isPlasticCard)
{
<div class="col-sm-4 mb-3 text-start">
<h4>Very Popular Plastic Card Mailer!</h4>
<ul>
<li>As thick as a typical credit card!</li>
<li>Large size piece (8&frac14; x 4 inches)</li>
<li>Coupons pop out, offering great convenience for your customers!</li>
<li>Leave it to us - we select, print, sort and mail for just <strong class="text-primary text-nowrap">$1.02 each</strong></li>
</ul>
</div>
<div class="col-sm-8 text-center mb-3">
<img class="img-fluid" src="/img/1181c4aa-4f3f-4eb4-8d5d-7eff0131d5f2.png" />
</div>
<div class="col-sm-4 mb-3 text-start">
<h4>Very Popular Plastic Card Mailer!</h4>
<ul>
<li>As thick as a typical credit card!</li>
<li>Large size piece (8&frac14; x 4 inches)</li>
<li>Coupons pop out, offering great convenience for your customers!</li>
<li>Leave it to us - we select, print, sort and mail for just <strong class="text-primary text-nowrap">$1.02 each</strong></li>
</ul>
</div>
<div class="col-sm-8 text-center mb-3">
<img class="img-fluid" src="/img/1181c4aa-4f3f-4eb4-8d5d-7eff0131d5f2.png" />
</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&frac12; x 6 inches)</li>
<li>UV gloss-coated</li>
<li>Choose from our selection, or ask for a custom design!</li>
<li>Full service - select, print, sort, mail for just <strong class="text-primary text-nowrap">79&#162; each</strong></li>
</ul>
</div>
<div class="col-sm-8 text-center mb-3">
<img class="img-fluid" src="/img/ad5a2b69-a493-429b-9edd-8320ec1e9c33.png" />
</div>
}
<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&frac12; x 6 inches)</li>
<li>UV gloss-coated</li>
<li>Choose from our selection, or ask for a custom design!</li>
<li>Full service - select, print, sort, mail for just <strong class="text-primary text-nowrap">79&#162; each</strong></li>
</ul>
</div>
</div>
</Template>
</FormItem>
</FormItems>
<FormButtons>
<div class="col-sm-8 text-center mb-3">
<img class="img-fluid" src="/img/ad5a2b69-a493-429b-9edd-8320ec1e9c33.png" />
</div>
}
</div>
</div>
</Template>
</FormItem>
</FormItems>
<FormButtons>
@* Need this here to avoid addition of random submit button *@
</FormButtons>
</TelerikForm>
</Content>
</WizardStep>
</FormButtons>
</TelerikForm>
</Content>
</WizardStep>
@* *@
@* Step 2 - selecting card design *@
@* *@
<WizardStep Label="Card Design" Icon="@SvgIcon.MapMarkerTarget" OnChange="@OnDesignStepChange" Valid="@IsDesignChoiceValid">
<Content>
<TelerikForm Model="@custOptions" @ref="@customizationForm">
<FormValidation>
<DataAnnotationsValidator></DataAnnotationsValidator>
</FormValidation>
<FormItems>
<FormItem>
<Template>
<div class="container">
<div class="row">
<div class="col-12">
<h1 style="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">
<WizardStep Label="Card Design" Icon="@SvgIcon.MapMarkerTarget" OnChange="@OnDesignStepChange" Valid="@IsDesignChoiceValid">
<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 (isPlasticCard)
{
<ButtonGroupToggleButton @bind-Selected="@designOne">Plastic Card 1</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@designTwo">Plastic Card 2</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@designThree">Plastic Card 3</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@designCustom">Custom Design</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@designOne">Plastic Card 1</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@designTwo">Plastic Card 2</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@designThree">Plastic Card 3</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@designCustom">Custom Design</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="@designCustom">Custom Design</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@designOne">Postcard 1</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@designTwo">Postcard 2</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@designThree">Postcard 3</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@designCustom">Custom Design</ButtonGroupToggleButton>
}
</TelerikButtonGroup>
<br /><br />
</TelerikButtonGroup>
<br /><br />
@* Card preview logic *@
@if (designOne)
{
@if (isPostcard)
{
<img src="/img/Postcard1_Front.png" class="img-fluid" alt="Back" />
<img src="/img/Postcard1_Back.png" class="img-fluid" alt="Front" />
<img src="/img/Postcard1_Front.png" class="img-fluid" alt="Back" />
<img src="/img/Postcard1_Back.png" class="img-fluid" alt="Front" />
}
else
{
<img src="/img/Plastic1_Back.png" class="img-fluid" alt="Back" />
<img src="/img/Plastic1_Front.png" class="img-fluid" alt="Front" />
<img src="/img/Plastic1_Back.png" class="img-fluid" alt="Back" />
<img src="/img/Plastic1_Front.png" class="img-fluid" alt="Front" />
}
}
@ -182,55 +182,246 @@
{
@if (isPostcard)
{
<img src="/img/Postcard2_Front.png" class="img-fluid" alt="Back" />
<img src="/img/Postcard2_Back.png" class="img-fluid" alt="Front" />
<img src="/img/Postcard2_Front.png" class="img-fluid" alt="Back" />
<img src="/img/Postcard2_Back.png" class="img-fluid" alt="Front" />
}
else
{
<img src="/img/Plastic2_Back.png" class="img-fluid" alt="Back" />
<img src="/img/Plastic2_Front.png" class="img-fluid" alt="Front" />
<img src="/img/Plastic2_Back.png" class="img-fluid" alt="Back" />
<img src="/img/Plastic2_Front.png" class="img-fluid" alt="Front" />
}
}
else if (designThree)
{
@if (isPostcard)
{
<img src="/img/Postcard3_Front.png" class="img-fluid" alt="Back" />
<img src="/img/Postcard3_Back.png" class="img-fluid" alt="Front" />
<img src="/img/Postcard3_Front.png" class="img-fluid" alt="Back" />
<img src="/img/Postcard3_Back.png" class="img-fluid" alt="Front" />
}
else
{
<img src="/img/Plastic3_Back.png" class="img-fluid" alt="Back" />
<img src="/img/Plastic3_Front.png" class="img-fluid" alt="Front" />
<img src="/img/Plastic3_Back.png" class="img-fluid" alt="Back" />
<img src="/img/Plastic3_Front.png" class="img-fluid" alt="Front" />
}
}
else if (designCustom)
{
<div class="d-sm-flex justify-content-around">
<div class="px-5">
<h4 class="mb-5">If you have your own idea in mind, or you would like to try another design, our creative design team will make it happen!</h4>
</div>
<div class="px-5">
<p class="fst-italic">When you're asked for "additional comments," just give us an idea of what you have in mind and our customer care team will have some ideas
ready when we call you!
</p>
</div>
<div class="px-5">
<h4 class="mb-5">If you have your own idea in mind, or you would like to try another design, our creative design team will make it happen!</h4>
</div>
<div class="px-5">
<p class="fst-italic">When you're asked for "additional comments," just give us an idea of what you have in mind and our customer care team will have some ideas
ready when we call you!
</p>
</div>
</div>
<div>
@if (isPostcard)
{
<img src="/img/cfeb51c5-5373-44b5-be19-dadea452cc41.png" class="img-fluid" />
}
else
{
<img src="/img/a41f648d-6b39-41f1-bbe5-084fb8a71a30.png" class="img-fluid" />
}
</div>
@if (isPostcard)
{
<img src="/img/cfeb51c5-5373-44b5-be19-dadea452cc41.png" class="img-fluid" />
}
else
{
<img src="/img/a41f648d-6b39-41f1-bbe5-084fb8a71a30.png" class="img-fluid" />
}
</div>
}
</div>
</div>
</div>
</div>
</div>
</Template>
</FormItem>
</FormItems>
<FormButtons />
</TelerikForm>
</Content>
</WizardStep>
@* *@
@* Step 3 - For postcards, choose a verse and a signature *@
@* *@
<WizardStep Label="Customization" OnChange="@OnMessagingStepChange" Valid="@isMessagingValid">
<Content>
<TelerikForm Model="@messagingOptions" @ref="@messagingForm">
<FormItems>
<FormItem>
<Template>
<div class="container">
<div class="row">
@if (isPlasticCard)
{
<div class="col-12">
<h4>No customization needed. Please proceed to logo selection.</h4>
</div>
}
else
{
<div class="col-12">
<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">Thank you for making our success possible.</p>
<p class="fst-italic">We appreciate loyal customers like you and look forward to continuing to be your complete auto repair, service and tire center!</p>
}
else if (verseTwo)
{
<p class="fst-italic">We appreciate the trust you have shown in us and look forward to working with you in the future!</p>
}
else if (verseThree)
{
<p class="fst-italic">We want you to know that we truly appreciate your business and will make every effort possible to continue to provide you with excellent car care.</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>(your location name)</i></p>
<p><strong>(888) 555-3712</strong><br /><i>(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 character/line up to 4 lines)</label><br />
<TelerikTextArea Id="CustomSignature" @bind-Value="@customSignature" Rows="4" Cols="35" MaxLength="120"></TelerikTextArea>
}
</div>
}
<div class="col-12 text-center mb-3">
</div>
</div>
</div>
</Template>
</FormItem>
</FormItems>
<FormButtons />
</TelerikForm>
</Content>
</WizardStep>
@* *@
@* Step 4 - Logo Selection *@
@* *@
<WizardStep Label="Logos" OnChange="@OnLogoStepChange" Valid="@isLogoValid">
<Content>
<TelerikForm Model="@logoOptions"
@ref="@logoForm">
<FormItems>
<FormItem>
<Template>
<div class="container">
<div class="row">
<div class="col-12">
<TelerikCheckBox Id="goodyearBox" @bind-Value="@goodyear" />
<label for="goodyearBox">Goodyear Logo</label>
<TelerikCheckBox Id="michelinBox" @bind-Value="@michelin" />
<label for="michelinBox">Michelin Logo</label>
<TelerikCheckBox Id="customBox" @bind-Value="@custom" />
<label for="customBox">Custom Logo</label>
</div>
<div class="col-12 mt-5">
@if (goodyear)
{
<div class="p-5">
<img src="/img/goodyear.png" class="img-fluid" />
</div>
}
@if (michelin)
{
<div class="p-5">
<img src="/img/michelin.png" class="img-fluid" />
</div>
}
@if (custom)
{
<div class="p-5">
<img src="/img/6784cef1-9ed9-4c91-94bc-5e7a267b5a4f.png" class="img-fluid" />
</div>
}
</div>
</div>
</div>
</Template>
</FormItem>
</FormItems>
<FormButtons>
</FormButtons>
</TelerikForm>
</Content>
</WizardStep>
@* *@
@* Step 5 - Offer selection for Plastic cards *@
@* *@
<WizardStep Label="Offers" OnChange="@OnOfferStepChange" Valid="@isOfferSelectionValid">
<Content>
<TelerikForm Model="@offerOptions" @ref="@offerForm">
<FormItems>
<FormItem>
<Template>
<div class="container">
<div class="row">
@if (isPlasticCard)
{
<div class="col-12">
<h4 class="my-3">Please select two (2) full size offers:</h4>
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
<ButtonGroupToggleButton @bind-Selected="@bigOffers[0]"><img src="/img/A1.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@bigOffers[1]"><img src="/img/A2.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@bigOffers[2]"><img src="/img/A3.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@bigOffers[3]"><img src="/img/A4.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@bigOffers[4]"><img src="/img/A5.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@bigOffers[5]"><img src="/img/A6.png" /></ButtonGroupToggleButton>
</TelerikButtonGroup>
</div>
<div class="col-12">
<h4 class="my-3">And four (4) half-sized offers:</h4>
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
<ButtonGroupToggleButton @bind-Selected="@smallOffers[0]"><img src="/img/B1.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[1]"><img src="/img/B2.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[2]"><img src="/img/B3.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[3]"><img src="/img/B4.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[4]"><img src="/img/B5.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[5]"><img src="/img/B6.png" /></ButtonGroupToggleButton>
</TelerikButtonGroup>
<br />
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
<ButtonGroupToggleButton @bind-Selected="@smallOffers[6]"><img src="/img/B7.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[7]"><img src="/img/B8.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[8]"><img src="/img/B9.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[9]"><img src="/img/B10.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[10]"><img src="/img/B11.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[11]"><img src="/img/B12.png" /></ButtonGroupToggleButton>
</TelerikButtonGroup>
</div>
}
else
{
<div class="col-12 m-5">
<h4>No offers needed! Please proceed to the next step!</h4>
</div>
}
</div>
</div>
</Template>
</FormItem>
</FormItems>
@ -238,81 +429,45 @@
</TelerikForm>
</Content>
</WizardStep>
@* *@
@* Step 3 - For postcards, choose a verse and a signature *@
@* *@
<WizardStep Label="Customization" OnChange="@OnMessagingStepChange" Valid="@isMessagingValid">
@* *@
@* Step 6 - Location information *@
@* *@
<WizardStep Label="Location Info" OnChange="@OnLocationStepChange" Valid="@isLocationInfoValid">
<Content>
<TelerikForm Model="@messagingOptions" @ref="@messagingForm">
<div class="container">
<div class="row">
<div class="col-12">
<TelerikForm Model="@locationInfo" @ref="@locationForm" Columns="2" ColumnSpacing="25px">
<FormButtons />
</TelerikForm>
</div>
</div>
</div>
</Content>
</WizardStep>
@* *@
@* Step 7 - Payment *@
@* *@
<WizardStep Label="Payment Info">
<Content>
<TelerikForm Model="@paymentInfo" @ref="@paymentForm">
<FormItems>
<FormItem>
<Template>
<div class="container">
<div class="row">
@if (isPlasticCard)
{
<div class="col-12">
<h4>No customization needed. Please proceed to logo selection.</h4>
</div>
}
else
{
<div class="col-12">
<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">Thank you for making our success possible.</p>
<p class="fst-italic">We appreciate loyal customers like you and look forward to continuing to be your complete auto repair, service and tire center!</p>
}
else if (verseTwo)
{
<p class="fst-italic">We appreciate the trust you have shown in us and look forward to working with you in the future!</p>
}
else if (verseThree)
{
<p class="fst-italic">We want you to know that we truly appreciate your business and will make every effort possible to continue to provide you with excellent car care.</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>(your location name)</i></p>
<p><strong>(888) 555-3712</strong><br /><i>(your location phone number)</i></p>
}
else if (sigTwo)
{
<FormItem LabelText="Custom Signature">
<Template>
<label style="text-align:center; display:block" for="CustomName" class="k-label k-form-label">Name:</label><TelerikTextBox Id="CustomName" @bind-Value="@customName" MaxLength="30" Width="250px"></TelerikTextBox>
<label style="text-align:center; display:block" for="CustomTitle" class="k-label k-form-label">Title:</label><TelerikTextBox Id="CustomTitle" @bind-Value="@customTitle" MaxLength="30" Width="250px"></TelerikTextBox>
<label style="text-align:center; display:block" for="CustomPhone" class="k-label k-form-label">Phone:</label><TelerikTextBox Id="CustomPhone" @bind-Value="@customPhone" MaxLength="12" Width="200px"></TelerikTextBox>
</Template>
</FormItem>
}
else if (sigThree)
{
<FormItem LabelText="Custom Signature">
<Template>
<label for="CustomSignature" style="text-align: center">Custom Message (max 30 character/line up to 4 lines)</label><br />
<TelerikTextArea Id="CustomSignature" @bind-Value="@customSignature" Rows="4" Cols="35" MaxLength="120"></TelerikTextArea>
</Template>
</FormItem>
}
</div>
}
<div class="col-12 text-center mb-3">
<div class="col-12">
<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 (due by 6/13/25)</ButtonGroupToggleButton>
</TelerikButtonGroup>
</div>
<div class="col-12">
<label style="display:block" for="RequestedQuantity" class="text-center mb-3">Requested Quantity</label>
<TelerikTextBox class="mb-3" Id="RequestedQuantity" @bind-Value="@requestedQuantity" MaxLength="6" Width="15rem"></TelerikTextBox>
<label style="display:block" for="AdditionalComments" class="text-center mb-3">Additional Notes</label>
<TelerikTextArea class="mb-3" Id="CustomSignature" @bind-Value="@additionalComments" Rows="8" Cols="100" MaxLength="2500"></TelerikTextArea>
</div>
</div>
</div>
@ -323,150 +478,6 @@
</TelerikForm>
</Content>
</WizardStep>
@* *@
@* Step 4 - Logo Selection *@
@* *@
<WizardStep Label="Logos" OnChange="@OnLogoStepChange" Valid="@isLogoValid">
<Content>
<TelerikForm Model="@logoOptions"
@ref="@logoForm">
<FormItems>
<FormItem>
<Template>
<TelerikCheckBox Id="goodyearBox" @bind-Value="@goodyear" />
<label for="goodyearBox">Goodyear Logo</label>
<TelerikCheckBox Id="michelinBox" @bind-Value="@michelin" />
<label for="michelinBox">Michelin Logo</label>
<TelerikCheckBox Id="customBox" @bind-Value="@custom" />
<label for="customBox">Custom Logo</label>
<br /><br /><br />
@if (goodyear)
{
<img src="img/goodyear.png" />
}
@if (michelin)
{
<img src="img/michelin.png" />
}
</Template>
</FormItem>
</FormItems>
<FormButtons>
</FormButtons>
</TelerikForm>
</Content>
</WizardStep>
@* *@
@* Step 5 - Offer selection for Plastic cards *@
@* *@
<WizardStep Label="Offers" OnChange="@OnOfferStepChange" Valid="@isOfferSelectionValid">
<Content>
<TelerikForm Model="@offerOptions"
@ref="@offerForm">
<FormItems>
<FormItem>
<Template>
@if (isPlasticCard)
{
<h1>Please select two (2) full size offers:</h1>
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
<ButtonGroupToggleButton @bind-Selected="@bigOffers[0]"><img src="img/A1.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@bigOffers[1]"><img src="img/A2.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@bigOffers[2]"><img src="img/A3.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@bigOffers[3]"><img src="img/A4.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@bigOffers[4]"><img src="img/A5.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@bigOffers[5]"><img src="img/A6.png" /></ButtonGroupToggleButton>
</TelerikButtonGroup>
<br />
<br />
<hr />
<h1>And four (4) half-sized offers:</h1>
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
<ButtonGroupToggleButton @bind-Selected="@smallOffers[0]"><img src="img/B1.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[1]"><img src="img/B2.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[2]"><img src="img/B3.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[3]"><img src="img/B4.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[4]"><img src="img/B5.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[5]"><img src="img/B6.png" /></ButtonGroupToggleButton>
</TelerikButtonGroup>
<br />
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Multiple">
<ButtonGroupToggleButton @bind-Selected="@smallOffers[6]"><img src="img/B7.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[7]"><img src="img/B8.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[8]"><img src="img/B9.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[9]"><img src="img/B10.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[10]"><img src="img/B11.png" /></ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@smallOffers[11]"><img src="img/B12.png" /></ButtonGroupToggleButton>
</TelerikButtonGroup>
}
else
{
<h1>No offers needed. Please proceed to location information.</h1>
}
</Template>
</FormItem>
</FormItems>
<FormButtons>
</FormButtons>
</TelerikForm>
</Content>
</WizardStep>
@* *@
@* Step 6 - Location information *@
@* *@
<WizardStep Label="Location Info" OnChange="@OnLocationStepChange" Valid="@isLocationInfoValid">
<Content>
<TelerikForm Model="@locationInfo"
@ref="@locationForm" Columns="2" ColumnSpacing="25px">
<FormButtons></FormButtons>
</TelerikForm>
</Content>
</WizardStep>
@* *@
@* Step 7 - Payment *@
@* *@
<WizardStep Label="Payment Info">
<Content>
<TelerikForm Model="@paymentInfo"
@ref="@paymentForm">
<FormItems>
<FormItem>
<Template>
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single" Class="vertical-buttons block-buttons">
<ButtonGroupToggleButton @bind-Selected="@ccOnFile">Credit Card On File</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@callWithInfo">Call With Payment Info</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@check">Check (due by 6/13/25)</ButtonGroupToggleButton>
</TelerikButtonGroup>
</Template>
</FormItem>
<br /><br />
<FormItem LabelText="Additional Info">
<Template>
<label for="RequestedQuantity" style="text-align: center">Requested Quantity</label>
<TelerikTextBox Id="RequestedQuantity" @bind-Value="@requestedQuantity" MaxLength="6" Width="150px"></TelerikTextBox>
<label for="AdditionalComments" style="text-align: center">Additional Notes</label>
<TelerikTextArea Id="CustomSignature" @bind-Value="@additionalComments" Rows="4" Cols="100" MaxLength="500"></TelerikTextArea>
</Template>
</FormItem>
</FormItems>
<FormButtons>
</FormButtons>
</TelerikForm>
</Content>
</WizardStep>
</WizardSteps>
</TelerikWizard>
</div>

View File

@ -424,9 +424,9 @@ public partial class Home
public class LocationInfo
{
[Required]
[Required,Display(Name ="Location Name")]
public string LocationName { get; set; } = string.Empty;
[Required]
[Required, Display(Name = "Store Manager")]
public string Manager { get; set; } = string.Empty;
[Required]
public string Address { get; set; } = string.Empty;
@ -436,13 +436,13 @@ public partial class Home
public string State { get; set; } = string.Empty;
[Required]
public string Zip { get; set; } = string.Empty;
[Required]
[Required, Display(Name = "Phone Number")]
public string PhoneNumber { get; set; } = string.Empty;
[Required]
[Required, Display(Name = "Contact Name")]
public string ContactName { get; set; } = string.Empty;
[Required]
[Required, Display(Name = "Contact Phone")]
public string ContactPhone { get; set; } = string.Empty;
[Required]
[Required, Display(Name = "Your Email Address")]
public string ContactEmail { get; set; } = string.Empty;
}

View File

@ -14,7 +14,7 @@ using System.Reflection;
[assembly: System.Reflection.AssemblyCompanyAttribute("SummerBestWebForm2")]
[assembly: System.Reflection.AssemblyConfigurationAttribute("Debug")]
[assembly: System.Reflection.AssemblyFileVersionAttribute("1.0.0.0")]
[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+9b28bf7d24722f5c55cef7bd645e913fd9f0cc1a")]
[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+8d5f8fbc0b180ec316bb0694deca84493cd04c44")]
[assembly: System.Reflection.AssemblyProductAttribute("SummerBestWebForm2")]
[assembly: System.Reflection.AssemblyTitleAttribute("SummerBestWebForm2")]
[assembly: System.Reflection.AssemblyVersionAttribute("1.0.0.0")]

View File

@ -1 +1 @@
9c3a26a0e221101541511b134daa7b1793f7b9eaab9d602f81659455684bf9c0
498c48e569ca977ccb10053e88c4f50ed1c99a69b6b43726cfc5e871d74b9091

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB