SummerGrowthForm/SummerBestWebForm.Client/Pages/Home.razor

767 lines
35 KiB
Plaintext

@page "/"
@using System.ComponentModel.DataAnnotations
@using kmCommonLibsCore;
@if (ShowWizard)
{
<TelerikWizard @bind-Value="@Value" OnFinish="@OnFinishHandler" Width="1440px" Height="900px" Class="sbWizard">
<WizardSteps>
@* *@
@* Step 1 - plastic card vs postcard *@
@* *@
<WizardStep Label="Card Type" Icon="@SvgIcon.EnvelopeBox" OnChange="@OnCardChoiceStepChange" Valid="@IsCardChoiceValid">
<Content>
<TelerikForm Model="@cardType" @ref="@cardTypeForm">
<FormItems>
<h1 style="text-align:center">Choose a Card Type</h1>
@* Logic behind the buttons *@
<div style="text-align:center">
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
<ButtonGroupToggleButton @bind-Selected="@isPlasticCard">Plastic Card</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@isPostcard">Postcard</ButtonGroupToggleButton>
</TelerikButtonGroup>
</div>
<br />
@* Preview information about the selected card type*@
@if (isPlasticCard)
{
<h3>Focused on Expanding Your Customer Base ($1.02/card)</h3>
}
else
{
<h3>Focused on Thanking and Rewarding Your Best Customers ($0.79/card)</h3>
}
@if(isPlasticCard) {
<img src="img/Plastic1_Back.png" />
} else {
<img src="img/Postcard1_Front.png" />
}
</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.MapMarkerTarget" OnChange="@OnDesignStepChange" Valid="@IsDesignChoiceValid">
<Content>
<TelerikForm Model="@custOptions"
@ref="@customizationForm">
<FormValidation>
<DataAnnotationsValidator></DataAnnotationsValidator>
</FormValidation>
<FormItems>
<h1 style="text-align:center">Choose a Design</h1>
@* Button logic *@
<div style="text-align: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>
}
else
{
<ButtonGroupToggleButton @bind-Selected="@designOne">Postcard 1</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@designTwo">Postcard 2</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@designThree">Postcard 3</ButtonGroupToggleButton>
}
</TelerikButtonGroup>
<br /><br />
@* Card preview logic *@
@if (designOne)
{
@if(isPostcard)
{
<img src="img/Postcard1_Front.png" />
<img src="img/Postcard1_Back.png" />
}
else
{
<img src="img/Plastic1_Front.png" />
<img src="img/Plastic1_Back.png" />
}
}
else if(designTwo)
{
@if(isPostcard)
{
<img src="img/Postcard2_Front.png" />
<img src="img/Postcard2_Back.png" />
}
else
{
<img src="img/Plastic2_Front.png" />
<img src="img/Plastic2_Back.png" />
}
}
else if (designThree)
{
@if(isPostcard)
{
<img src="img/Postcard3_Front.png" />
<img src="img/Postcard3_Back.png" />
}
else
{
<img src="img/Plastic3_Front.png" />
<img src="img/Plastic3_Back.png" />
}
}
</div>
</FormItems>
<FormButtons>
</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>
@if (isPlasticCard)
{
<h1>No customization needed. Please proceed to logo selection.</h1>
}
else
{
<h1>Select a Verse</h1>
@if (!isPlasticCard)
{
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single" Class="vertical-buttons block-buttons">
<ButtonGroupToggleButton @bind-Selected="@verseOne">Option 1</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@verseTwo">Option 2</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@verseThree">Option 3</ButtonGroupToggleButton>
</TelerikButtonGroup>
<br />
<br />
@if (verseOne)
{
<a>Thank you for making our success possible. We appreciate loyal customers like you and look forward to continuing to be your complete auto repair, service and tire center</a>
}
else if(verseTwo)
{
<a>We appreciate the trust you have shown in us and look forward to working with you in the future.</a>
}
else if(verseThree)
{
<a>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.</a>
}
<br />
<br />
<hr />
<h1>Select a Signature</h1>
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
<ButtonGroupToggleButton @bind-Selected="@sigOne">From Your Friends</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@sigTwo">Name, Title, Phone Number</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@sigThree">Custom</ButtonGroupToggleButton>
</TelerikButtonGroup>
<br />
<br />
@if (sigOne)
{
<a>From your friends at <strong>{Location Name} {Location Phone Number}</strong></a>
}
else if (sigTwo)
{
<FormItem LabelText="Custom Signature">
<Template>
<label style="text-align:center; display:block" for="CustomName" class="k-label k-form-label">Name: <TelerikTextBox Id="CustomName" @bind-Value="@customName" MaxLength="30" Width="250px"></TelerikTextBox></label>
<label style="text-align:center; display:block" for="CustomTitle" class="k-label k-form-label">Title: <TelerikTextBox Id="CustomTitle" @bind-Value="@customTitle" MaxLength="30" Width="250px"></TelerikTextBox></label>
<label style="text-align:center; display:block" for="CustomPhone" class="k-label k-form-label">Phone: <TelerikTextBox Id="CustomPhone" @bind-Value="@customPhone" MaxLength="12" Width="200px"></TelerikTextBox></label>
</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>
}
}
}
</FormItems>
<FormButtons>
</FormButtons>
</TelerikForm>
</Content>
</WizardStep>
@* *@
@* Step 4 - Logo Selection *@
@* *@
<WizardStep Label="Logos" OnChange="@OnLogoStepChange" Valid="@isLogoValid">
<Content>
<TelerikForm Model="@logoOptions"
@ref="@logoForm">
<FormItems>
<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" />
}
</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>
@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>
}
</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>
<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 5/31/25)</ButtonGroupToggleButton>
</TelerikButtonGroup>
<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 Comments</label>
<TelerikTextBox Id="AdditionalComments" @bind-Value="@additionalComments" MaxLength="120" Width="450px"></TelerikTextBox>
</Template>
</FormItem>
</FormItems>
<FormButtons></FormButtons>
</TelerikForm>
</Content>
</WizardStep>
</WizardSteps>
</TelerikWizard>
}
@code {
async Task OnFinishHandler()
{
using (var em = new kmCommonLibsCore.Emails())
{
// Parsing the submitted form to pull the relevant information
string cardType = isPostcard ? "Postcard" : "Plastic Card";
string cardDesign = "";
if (designOne)
cardDesign = "A";
else if (designTwo)
cardDesign = "B";
else if (designThree)
cardDesign = "C";
// Postcard or Plastic specific options
string customizationInfo = "";
if (isPostcard)
{
string verseChoice = "";
string sigChoice = "";
if (verseOne)
verseChoice = "1";
else if (verseTwo)
verseChoice = "2";
else if (verseThree)
verseChoice = "3";
if (sigOne)
sigChoice = string.Format("Option D - From Your Friends At:<br />{0}<br />{1}", locationInfo.LocationName, locationInfo.PhoneNumber);
else if (sigTwo)
sigChoice = string.Format("Option E - Name: {0}<br />Title: {1}<br />Phone: {2}", customName, customTitle, customPhone);
else if (sigThree)
sigChoice = string.Format("Option F - {0}", customSignature);
// combine these into customizationInfo
customizationInfo = string.Format("Verse: {0}<br />Signature: {1}", verseChoice, sigChoice);
}
else // isPlasticCard
{
string smallOfferString = "";
string bigOfferString = "";
int[] smallIndexes = new int[4];
int[] bigIndexes = new int[2];
int smallCount = 0;
for (int index = 0; index < smallOffers.Length; index++) {
if (smallOffers[index]) {
smallIndexes[smallCount] = index;
smallCount++;
}
}
int bigCount = 0;
for (int index = 0; index < bigOffers.Length; index++) {
if (bigOffers[index]) {
bigIndexes[bigCount] = index;
bigCount++;
}
}
foreach (int index in smallIndexes) {
switch (index)
{
case 0:
smallOfferString = smallOfferString + "B1 ";
break;
case 1:
smallOfferString = smallOfferString + "B2 ";
break;
case 2:
smallOfferString = smallOfferString + "B3 ";
break;
case 3:
smallOfferString = smallOfferString + "B4 ";
break;
case 4:
smallOfferString = smallOfferString + "B5 ";
break;
case 5:
smallOfferString = smallOfferString + "B6 ";
break;
case 6:
smallOfferString = smallOfferString + "B7 ";
break;
case 7:
smallOfferString = smallOfferString + "B8 ";
break;
case 8:
smallOfferString = smallOfferString + "B9 ";
break;
case 9:
smallOfferString = smallOfferString + "B10 ";
break;
case 10:
smallOfferString = smallOfferString + "B11 ";
break;
case 11:
smallOfferString = smallOfferString + "B12 ";
break;
}
}
foreach (int index in bigIndexes)
{
switch (index)
{
case 0:
bigOfferString = bigOfferString + "A1 ";
break;
case 1:
bigOfferString = bigOfferString + "A2 ";
break;
case 2:
bigOfferString = bigOfferString + "A3 ";
break;
case 3:
bigOfferString = bigOfferString + "A4 ";
break;
case 4:
bigOfferString = bigOfferString + "A5 ";
break;
case 5:
bigOfferString = bigOfferString + "A6 ";
break;
}
}
customizationInfo = string.Format("Offers: {0} - {1}", bigOfferString, smallOfferString);
}
// Logo info
string logos = "";
if (!goodyear && !michelin && !custom)
logos = "NA";
else
{
if (goodyear)
{
logos += "Goodyear";
if (michelin)
logos += ", Michelin";
if (custom)
logos += ", Custom";
}
else if (michelin)
{
logos += "Michelin";
if (custom)
logos += ", Custom";
}
else if (custom)
logos += "Custom";
}
// Payment info
string paymentMethod = "";
if (ccOnFile)
paymentMethod = "Credit Card on File";
else if (callWithInfo)
paymentMethod = "Call With Payment Info";
else if (check)
paymentMethod = "Check";
// Formulating the email to send
em.Subject = "SBC Order Form Submission";
em.AddAddress(enuAddressType.From, "support@keymotive.us", "Summer Growth Enrollment");
em.AddAddress(enuAddressType.To, "support@keymotive.us", "KeyMotive Support");
string locInfoString = string.Format("<pre>Location Name: {0}<br />Manager: {1}<br />Address: {2}<br />City: {3}<br />State: {4}<br />Zip: {5}<br /><br />Phone Number: {6}<br />Contact Name: {7}<br />Contact Phone: {8}<br />Contact Email: {9}<br />",
locationInfo.LocationName, locationInfo.Manager, locationInfo.Address, locationInfo.City, locationInfo.State,
locationInfo.Zip, locationInfo.PhoneNumber, locationInfo.ContactName,
locationInfo.ContactPhone, locationInfo.ContactEmail);
string cardInfoString = string.Format("Card type: {0}, Design {1}<br /><br />Customization Options:<br />{2}<br />Logos: {3}<br />",
cardType, cardDesign, customizationInfo, logos);
string paymentString = string.Format("Payment Method: {0}<br /><br />Requested Quantity: {1}<br />Additional Comments: {2}", paymentMethod, requestedQuantity, additionalComments);
em.HtmlBody = "<b>You have a new enrollment:</b><br />" +locInfoString + cardInfoString + paymentString + "</pre>";
try
{
em.Send();
await Console.Out.WriteLineAsync("Done sending");
}
catch(Exception e)
{
await Console.Out.WriteLineAsync("ERROR: " + e.Message);
}
ShowWizard = false;
await Dialog.AlertAsync("The Registration was submitted successfully", "Done");
}
}
public bool? IsCardChoiceValid { get; set; }
public bool? IsDesignChoiceValid { get; set; }
[CascadingParameter]
public DialogFactory Dialog { get; set; }
public bool ShowWizard { get; set; } = true;
public int Value { get; set; }
public TelerikForm RegisterForm { get; set; }
public User UserModel { get; set; } = new User();
// Variables for selecting between plastic and post
public TelerikForm cardTypeForm { get; set; }
public CardType cardType { get; set; } = new CardType();
public bool isPlasticCard = true;
public bool isPostcard = false;
// Variables for selecting specific design
public TelerikForm customizationForm { get; set; }
public CustomizationOptions custOptions { get; set; } = new CustomizationOptions();
public bool designOne = true;
public bool designTwo = false;
public bool designThree = false;
// Variables for selecting messaging (postcards only)
public TelerikForm messagingForm { get; set; }
public MessagingOptions messagingOptions { get; set; } = new MessagingOptions();
public bool verseOne = true;
public bool verseTwo = false;
public bool verseThree = false;
public bool sigOne = true;
public bool sigTwo = false;
public bool sigThree = false;
public string customName = ""; // For sig two
public string customTitle = "";
public string customPhone = "";
public string customSignature = ""; // For sig three
public bool isMessagingValid = false;
// Variables for logo selection
public TelerikForm logoForm { get; set; }
public LogoOptions logoOptions { get; set; } = new LogoOptions();
public bool goodyear = false;
public bool michelin = false;
public bool custom = false;
public bool isLogoValid = false;
// Variables for offer selection (plastic cards only)
public TelerikForm offerForm { get; set; }
public OfferOptions offerOptions { get; set; } = new OfferOptions();
public bool[] bigOffers = new bool[6];
public bool[] smallOffers = new bool[12];
public bool isOfferSelectionValid = false;
// Location information
public TelerikForm locationForm { get; set; }
public LocationInfo locationInfo { get; set; } = new LocationInfo();
public string locationName { get; set; }
public string manager { get; set; }
public string address { get; set; }
public string city { get; set; }
public string state { get; set; }
public string zip { get; set; }
public string phoneNumber { get; set; }
public string contactName { get; set; }
public string contactPhone { get; set; }
public string contactEmail { get; set; }
public bool isLocationInfoValid = false;
// Payment information
public TelerikForm paymentForm { get; set; }
public PaymentInfo paymentInfo { get; set; } = new PaymentInfo();
public string requestedQuantity = "";
public string additionalComments = "";
public bool ccOnFile = true;
public bool callWithInfo = false;
public bool check = false;
public void ToggleCardType()
{
isPlasticCard = !isPlasticCard;
isPostcard = !isPostcard;
}
public void OnCardChoiceStepChange(WizardStepChangeEventArgs args)
{
IsCardChoiceValid = true; // This is forced to be true but required nonetheless
}
public void OnDesignStepChange(WizardStepChangeEventArgs args)
{
IsDesignChoiceValid = true; // Same as card choice
}
public void OnMessagingStepChange(WizardStepChangeEventArgs args)
{
isMessagingValid = true;
}
public void OnLogoStepChange(WizardStepChangeEventArgs arg)
{
isLogoValid = true;
}
public async void OnOfferStepChange(WizardStepChangeEventArgs args)
{
if (isPostcard)
{
isOfferSelectionValid = true;
}
else
{
int bigOfferCount = 0;
foreach (bool selection in bigOffers)
{
if (selection)
bigOfferCount++;
}
int smallOfferCount = 0;
foreach (bool selection in smallOffers)
{
if (selection)
smallOfferCount++;
}
if (smallOfferCount == 4 && bigOfferCount == 2)
isOfferSelectionValid = true;
else
isOfferSelectionValid = false;
if (!isOfferSelectionValid)
{
args.IsCancelled = true;
await Dialog.AlertAsync("Please select the proper amount of offers.", "You cannot proceed");
}
}
}
public async void OnLocationStepChange(WizardStepChangeEventArgs args)
{
isLocationInfoValid = locationInfo.ContactEmail != "" && locationInfo.ContactPhone != "" && locationInfo.ContactName != "" && locationInfo.City != "" &&
locationInfo.State != "" && locationInfo.Zip != "" && locationInfo.PhoneNumber != "" && locationInfo.LocationName != "" &&
locationInfo.Address != "" && locationInfo.Manager != "";
if(!isLocationInfoValid)
{
args.IsCancelled = true;
await Dialog.AlertAsync("Please fill out all required fields.", "You cannot proceed");
}
}
public class CardType
{
[Required]
public string cardChoice { get; set; }
}
public class CustomizationOptions
{
[Required]
public string custOption { get; set; }
}
public class MessagingOptions
{
public string verse { get; set; }
public string signature { get; set; }
}
public class LogoOptions
{
public string option;
}
public class OfferOptions
{
public string option;
}
public class LocationInfo
{
[Required]
public string LocationName { get; set; } = "";
[Required]
public string Manager { get; set; } = "";
[Required]
public string Address { get; set; } = "";
[Required]
public string City { get; set; } = "";
[Required]
public string State { get; set; } = "";
[Required]
public string Zip { get; set; } = "";
[Required]
public string PhoneNumber { get; set; } = "";
[Required]
public string ContactName { get; set; } = "";
[Required]
public string ContactPhone { get; set; } = "";
[Required]
public string ContactEmail { get; set; } = "";
}
public class PaymentInfo
{
public string info;
}
}