This commit is contained in:
		
							parent
							
								
									8d5f8fbc0b
								
							
						
					
					
						commit
						d4b7eb7e5b
					
				
										
											Binary file not shown.
										
									
								
							| 
						 | 
				
			
			@ -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": ""
 | 
			
		||||
            }
 | 
			
		||||
          ]
 | 
			
		||||
        }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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": ""
 | 
			
		||||
            }
 | 
			
		||||
          ]
 | 
			
		||||
        }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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¼ 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¼ 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½ 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¢ 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½ 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¢ 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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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")]
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1 +1 @@
 | 
			
		|||
9c3a26a0e221101541511b134daa7b1793f7b9eaab9d602f81659455684bf9c0
 | 
			
		||||
498c48e569ca977ccb10053e88c4f50ed1c99a69b6b43726cfc5e871d74b9091
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 16 KiB  | 
		Loading…
	
		Reference in New Issue