SSR-76 and SSR-80 changes

package.json

@@ -15,6 +15,7 @@
     "jest-junit": "^13.0.0",
     "pinia": "^2.0.22",
     "pinia-plugin-persistedstate": "^2.2.0",
+    "vee-validate": "^4.7.0",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3"
   },

src/assets/icons/location-pin.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.8 16" xml:space="preserve">
+  <path d="M6.4 0c-.85 0-1.69.18-2.47.52-.78.34-1.49.84-2.07 1.47A7.026 7.026 0 0 0 0 6.75c0 1.77.67 3.48 1.86 4.77l4.02 4.26c.07.07.15.13.23.16.1.04.19.06.29.06.1 0 .19-.02.28-.06.09-.04.17-.09.23-.16l4.02-4.26a6.884 6.884 0 0 0 1.87-4.77c.01-1.78-.66-3.49-1.87-4.77A6.166 6.166 0 0 0 8.86.51C8.09.18 7.25 0 6.4 0zm0 9.13c-.47 0-.93-.14-1.32-.41-.39-.27-.7-.64-.88-1.09-.19-.44-.23-.93-.14-1.4.09-.47.32-.9.65-1.24.33-.34.76-.57 1.22-.66.46-.09.94-.05 1.38.14.44.18.81.49 1.07.89s.4.87.4 1.35c0 .64-.25 1.26-.7 1.71-.44.46-1.05.71-1.68.71z" fill="#8e9292"/>
+</svg>

src/common-components/textbox-question/textbox-question.vue

@@ -144,7 +144,7 @@ export default {
 	}
 	input {
 		&.has-icon {
-			background-image: url(~@/assets/img/icons/location-pin.svg);
+			background-image: url(~@/assets/icons/location-pin.svg);
 			background-repeat: no-repeat;
 			background-position: .75rem 50%;
 			background-size: 1rem auto;

src/constants/error-messages.js

@@ -24,6 +24,11 @@ const errorMessages = {
     VIN_FORMAT: "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
     OPTION_REQUIRED: "Please select an option",
     VEHICLE_REQUIRED: "Please select a vehicle",
+    POLICY_NUMBER_REQUIRED: "Please enter policy number",
+    PHONE_NUMBER_REQUIRED: "Please enter phone number",
+    POLICY_ZIP_REQUIRED: "Please enter policy zip",
+    LOSS_CAUSE_REQUIRED: "Please enter loss cause",
+    LOSS_CITY_REQUIRED: "Please enter loss city"
 };
 
 export { errorMessages };

src/helpers/validation-rules.js

@@ -0,0 +1,25 @@
+export function required(errorMessage) {
+    return (value) => {
+        if (!value || value.length < 1) {
+            return errorMessage;
+        }
+        return true;
+    };   
+}
+
+export function regex(expression, errorMessage) {
+    return (value) => {
+        // Field is empty, should pass
+        if (!value || !value.length) {
+            return true;
+        }
+
+        // Check if email
+        if (!expression.test(value)) {
+            return errorMessage;
+        }
+
+        return true;
+    }
+
+}

src/helpers/validation-rules.spec.js

@@ -0,0 +1,72 @@
+import { required } from "@/helpers/validation-rules";
+import { regex } from "@/helpers/validation-rules";
+
+describe("validation-rules.vue", () => {
+  test("required rules should return error if value missing", () => {
+
+    //Arrange
+    const testFn = required("an error");
+    
+    //Act
+    const testResponse = testFn();
+
+    //Assert
+    expect(testResponse).toBe("an error");
+  });
+});
+
+describe("validation-rules.vue", () => {
+  test("required rules should return true if value present", () => {
+
+    //Arrange
+    const testFn = required("an error");
+    
+    //Act
+    const testResponse = testFn('some value');
+    
+    //Assert
+    expect(testResponse).toBe(true);
+  });
+});
+
+describe("validation-rules.vue", () => {
+  test("regex rules should return true if value is not present", () => {
+
+    //Arrange
+    const testFn = regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, "an error"); // Using Zip regex
+    
+    //Act
+    const testResponse = testFn();
+    
+    //Assert
+    expect(testResponse).toBe(true);
+  });
+});
+
+describe("validation-rules.vue", () => {
+  test("regex rules should return false if value is present but does not match regular expression", () => {
+
+    //Arrange
+    const testFn = regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, "an error"); // Using Zip regex
+    
+    //Act
+    const testResponse = testFn('4321'); // needs to be 5 numbers
+    
+    //Assert
+    expect(testResponse).toBe("an error");
+  });
+});
+
+describe("validation-rules.vue", () => {
+  test("regex rules should return true if value is present and does match regular expression", () => {
+
+    //Arrange
+    const testFn = regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, "an error"); // Using Zip regex
+    
+    //Act
+    const testResponse = testFn('43213'); // needs to be 5 numbers
+    
+    //Assert
+    expect(testResponse).toBe(true);
+  });
+});

src/layouts/vehicle-year/vehicle-year.vue

@@ -14,6 +14,11 @@
     import navButton from '@/common-components/nav-button/nav-button.vue';
     import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
     import { settleAllPromises } from "@/helpers/layout-helper";
+    import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+    import { defineRule } from "vee-validate";
+    import { required } from "@/helpers/validation-rules";
+    import { regex } from "@/helpers/validation-rules";
+    import { errorMessages } from "@/constants/error-messages";
 
     export default {
         name: 'vehicle-year',