From 6b83d54bb8cf5da2046583a7253d8570974a527d Mon Sep 17 00:00:00 2001
From: "alex.saiannyi" <alexander.saiannyi@bigcommerce.com>
Date: Thu, 23 Sep 2021 09:35:00 +0300
Subject: [PATCH] fix(storefront): BCTHEME-83 added basic validation for
 Account Signup Date Field

---
 CHANGELOG.md                                  |  1 +
 assets/js/theme/common/form-validation.js     | 21 +++++++++++++++++--
 .../components/common/forms/date-options.html | 10 +++++++++
 templates/components/common/forms/date.html   | 20 ++++++++----------
 4 files changed, 39 insertions(+), 13 deletions(-)
 create mode 100644 templates/components/common/forms/date-options.html

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 545a9f5b51..dec0c29047 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Added basic validation for Account Signup Date Field when it's empty [#2126](https://github.com/bigcommerce/cornerstone/pull/2126)
 
 ## 6.1.0 (09-03-2021)
 - Fixed images placeholder on hero carousel shifted on mobile when slide has content. [#2112](https://github.com/bigcommerce/cornerstone/pull/2112)
diff --git a/assets/js/theme/common/form-validation.js b/assets/js/theme/common/form-validation.js
index 41b7c1003d..c350f97d9d 100644
--- a/assets/js/theme/common/form-validation.js
+++ b/assets/js/theme/common/form-validation.js
@@ -6,7 +6,7 @@ import { createTranslationDictionary } from './utils/translations-utils';
  * @param validation
  * @returns {{selector: string, triggeredBy: string, validate: Function, errorMessage: string}}
  */
-function buildDateValidation($formField, validation) {
+function buildDateValidation($formField, validation, requiredMessage) {
     // No date range restriction, skip
     if (validation.min_date && validation.max_date) {
         const invalidMessage = `Your chosen date must fall between ${validation.min_date} and ${validation.max_date}.`;
@@ -30,6 +30,23 @@ function buildDateValidation($formField, validation) {
             errorMessage: invalidMessage,
         };
     }
+    // Required Empty Date field
+    if (validation.required && (!validation.min_date || !validation.max_date)) {
+        const formElementId = $formField.attr('id');
+
+        return {
+            selector: `#${formElementId} select[data-label="year"]`,
+            triggeredBy: `#${formElementId} select:not([data-label="year"])`,
+            validate: (cb, val) => {
+                const day = $formField.find('select[data-label="day"]').val();
+                const month = $formField.find('select[data-label="month"]').val();
+                const year = val;
+
+                cb(day && month && year);
+            },
+            errorMessage: requiredMessage,
+        };
+    }
 }
 
 /**
@@ -97,7 +114,7 @@ function buildValidation($validateableElement, errorMessage) {
     const formFieldSelector = `#${$validateableElement.attr('id')}`;
 
     if (validation.type === 'datechooser') {
-        const dateValidation = buildDateValidation($validateableElement, validation);
+        const dateValidation = buildDateValidation($validateableElement, validation, errorMessage);
 
         if (dateValidation) {
             fieldValidations.push(dateValidation);
diff --git a/templates/components/common/forms/date-options.html b/templates/components/common/forms/date-options.html
new file mode 100644
index 0000000000..0cd3d94f2d
--- /dev/null
+++ b/templates/components/common/forms/date-options.html
@@ -0,0 +1,10 @@
+{{#unless this.value}}
+    <option value="">---</option>
+    {{#each this.items}}
+        <option value="{{value}}">{{label}}</option>
+    {{/each}}
+{{else}}
+    {{#each this.items}}
+        <option {{#if ../this.value '==' value}} selected {{/if}}value="{{value}}">{{label}}</option>
+    {{/each}}
+{{/unless}}
diff --git a/templates/components/common/forms/date.html b/templates/components/common/forms/date.html
index 2fa710d48b..c3330ef094 100644
--- a/templates/components/common/forms/date.html
+++ b/templates/components/common/forms/date.html
@@ -1,6 +1,10 @@
 <div class="form-field" id="{{id}}" data-validation="{{validation}}" {{#if private_id}}data-type="{{private_id}}"{{/if}}>
-    <label class="form-label" for="{{id}}" >{{label}}
-    {{#if required}}<small>{{lang 'common.required' }}</small>{{/if}}</label>
+    <label class="form-label" for="{{id}}">
+        {{label}}
+        {{#if required}}
+            <small>{{lang 'common.required' }}</small>
+        {{/if}}
+    </label>
     <div class="form-row form-row--third">
         <div class="form-field">
             <select class="form-select"
@@ -11,9 +15,7 @@
                     aria-required="{{required}}"
                     {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
             >
-                {{#each month.items}}
-                    <option {{#if ../month.value '==' value}} selected {{/if}}value="{{value}}">{{label}}</option>
-                {{/each}}
+            {{> components/common/forms/date-options month}}
             </select>
         </div>
         <div class="form-field">
@@ -25,9 +27,7 @@
                     aria-required="{{required}}"
                     {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
             >
-                {{#each day.items}}
-                    <option {{#if ../day.value '==' value}} selected {{/if}}value="{{value}}">{{label}}</option>
-                {{/each}}
+            {{> components/common/forms/date-options day}}
             </select>
         </div>
         <div class="form-field">
@@ -39,9 +39,7 @@
                     aria-required="{{required}}"
                     {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
             >
-                {{#each year.items}}
-                    <option {{#if ../year.value '==' value}} selected {{/if}}value="{{value}}">{{label}}</option>
-                {{/each}}
+            {{> components/common/forms/date-options year}}
             </select>
         </div>
     </div>