Vacms 15315 front end match style to sketch, testing

src/site/facilities/main_buttons.drupal.liquid

@@ -1,14 +1,33 @@
 {% comment %}
     This is used for Region Landing page and Contact us page
+    Also used for VBA with parameter
 {% endcomment %}
 <div data-template="facilities/main_buttons">
-    <div>
-        <a class="vads-c-action-link--blue" href="/{{ path }}/make-an-appointment">Make an appointment</a>
-    </div>
-    <div class="vads-u-margin-y--2">
-        <a class="vads-c-action-link--blue" href="/{{ path }}/health-services">View all health services</a>
-    </div>
-    <div>
-        <a class="vads-c-action-link--blue" href="/{{ path }}/register-for-care">Register for care</a>
-    </div>
+    {% if buttonType == 'vba'  %}
+        <div>
+            <a class="vads-c-action-link--blue" href="https://va.my.site.com/VAVERA/s/">Make an appointment</a>
+        </div>
+    {% else %}
+        <div>
+            <a class="vads-c-action-link--blue" href="/{{ path }}/make-an-appointment">Make an appointment</a>
+        </div>
+    {% endif %}
+    {% if buttonType == 'vba'  %}
+        <div class="vads-u-margin-y--2">
+            <a class="vads-c-action-link--blue" href="https://ask.va.gov">Ask a benefit question</a>
+        </div>
+    {% else %}
+        <div class="vads-u-margin-y--2">
+            <a class="vads-c-action-link--blue" href="/{{ path }}/health-services">View all health services</a>
+        </div>
+    {% endif %}
+    {% if buttonType == 'vba' %}
+        <div>
+            <a class="vads-c-action-link--blue" href="/{{ path }}/claim-or-appeal-status">Check a claim status</a>
+        </div>
+    {% else %}
+        <div>
+            <a class="vads-c-action-link--blue" href="/{{ path }}/register-for-care">Register for care</a>
+        </div>
+    {% endif %}
 </div>

src/site/facilities/vba_social_links.drupal.liquid

@@ -0,0 +1,65 @@
+<section data-template="facilities/facility_social_links" class="feature vads-u-background-color--gray-lightest vads-u-margin-top--4 small-screen:vads-u-margin-top--6 vads-u-padding-x--3 vads-u-padding-y--2p5">
+    <h2 class="vads-u-margin-bottom--2">Get updates from {{ regionNickname }}</h2>
+    <div class="va-c-list-link-teasers usa-grid usa-grid-full">
+
+            <div class="usa-width-one-half social-links">
+                {% if fieldNews != empty %}
+                        <div class="social-links-email vads-u-margin-bottom--2">
+                            <a class="vads-u-display--flex vads-u-align-items--baseline vads-u-text-decoration--none" rel="noreferrer"
+                             href="{{fieldNews.uri}}">
+                                <i class="fas fa-envelope vads-u-margin-right--1"></i>
+                                <span class="vads-u-text-decoration--underline">{{ fieldNews.title }}</span>
+                            </a>
+                        </div>
+                {% endif %}
+                {% if fieldFacebook != empty %}
+                    <div class="social-links social-links-facebook vads-u-margin-bottom--2">
+                        <a class="vads-u-display--flex vads-u-align-items--baseline vads-u-text-decoration--none" rel="noreferrer" href="{{ fieldFacebook.uri }}">
+                            <i class="fab fa-facebook-square vads-u-margin-right--1"></i>
+                            <span class="vads-u-text-decoration--underline">{{ fieldFacebook.title }}</span>
+                        </a>
+                    </div>
+                {% endif %}
+            </div>
+            {% if fieldTwitter != empty || fieldFlickr != empty || fieldInstagram != empty %}
+            <div class="usa-width-one-half social-links">
+                <div class="">
+                    {% if fieldTwitter != empty %}
+                        <div class="social-links social-links-twitter vads-u-margin-bottom--2">
+                            <a class="vads-u-display--flex vads-u-align-items--baseline vads-u-text-decoration--none" rel="noreferrer" href="{{ fieldTwitter.uri }}">
+                                <i class="fab fa-twitter vads-u-text-decoration--none vads-u-margin-right--1"></i>
+                                <span class="vads-u-text-decoration--underline">{{ fieldTwitter.title }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
+                    {% if fieldFlickr != empty %}
+                        <div class="social-links social-links-flickr vads-u-margin-bottom--2">
+                            <a class="vads-u-display--flex vads-u-align-items--baseline vads-u-text-decoration--none" rel="noreferrer" href="{{ fieldFlickr.uri }}">
+                                <i class="fab fa-flickr vads-u-text-decoration--none vads-u-margin-right--1"></i>
+                                <span class="vads-u-text-decoration--underline">{{ fieldFlickr.title }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
+
+                    {% if fieldInstagram != empty %}
+                        <div class="social-links social-links-instagram vads-u-margin-bottom--2">
+                            <a class="vads-u-display--flex vads-u-align-items--baseline vads-u-text-decoration--none" rel="noreferrer" href="{{ fieldInstagram.uri }}">
+                                <i class="fab fa-instagram vads-u-text-decoration--none vads-u-margin-right--1"></i>
+                                <span class="vads-u-text-decoration--underline">{{ fieldInstagram.title }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
+
+                    {% if fieldYoutube != empty %}
+                        <div class="social-links social-links-youtube vads-u-margin-bottom--2">
+                            <a class="vads-u-display--flex vads-u-align-items--baseline vads-u-text-decoration--none" rel="noreferrer" href="{{ fieldYoutube.uri }}">
+                                <i class="fab fa-youtube vads-u-text-decoration--none vads-u-margin-right--1"></i>
+                                <span class="vads-u-text-decoration--underline">{{ fieldYoutube.title }}</span>
+                            </a>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        {% endif %}
+    </div>
+</section>

src/site/filters/liquid.js

@@ -863,6 +863,59 @@ module.exports = function registerFilters() {
     });
   };
 
+  liquid.filters.processCentralizedUpdatesVBA = fieldCcGetUpdatesFromVba => {
+    if (!fieldCcGetUpdatesFromVba || !fieldCcGetUpdatesFromVba.fetched)
+      return null;
+
+    const processed = {
+      links: {},
+      sectionHeader: '',
+    };
+    const { fetched } = fieldCcGetUpdatesFromVba;
+    processed.sectionHeader = fetched.fieldSectionHeader[0].value;
+    for (const link of fetched.fieldLinks) {
+      if (link.url.path.startsWith('/')) {
+        processed.links.news = {
+          title: link.title,
+          uri: link.url.path,
+        };
+      } else {
+        // may throw if we get something that's not a URL in the data
+        const url = new URL(link.url.path);
+        const hostnameParts = url.hostname.split('.');
+        // just retrieving the domain part i.e. facebook/flickr/twitter
+        processed.links[hostnameParts.slice(-2, -1)[0]] = {
+          title: link.title,
+          uri: link.url.path,
+        };
+      }
+    }
+    // example:
+    // processed = {sectionHeader: "Veteran Benefits Administration", links:{ news: { uri: '', title: '' }, flickr: { uri: '', title: '' } }}
+    return processed;
+  };
+
+  // Processes the necessary components to display the Centralized Content
+  // of Can't Find Benefits. It is not the same as the other centralized content
+  // since the url path is necessary
+  liquid.filters.processfieldCcCantFindBenefits = field => {
+    if (!field || !field.fetched) return null;
+
+    const processed = {
+      fieldCta: {},
+      fieldSectionHeader: '',
+      fieldDescription: '',
+    };
+    processed.fieldSectionHeader = field.fetched.fieldSectionHeader[0].value;
+
+    const ctaEntity = field.fetched.fieldCta[0].entity;
+    processed.fieldCta.label = ctaEntity.fieldButtonLabel[0].value;
+    processed.fieldCta.link = ctaEntity.fieldButtonLink[0].url.path;
+
+    processed.fieldDescription = field.fetched.fieldDescription[0].processed;
+    return processed;
+  };
+
   liquid.filters.processCentralizedContent = (entity, contentType) => {
     if (!entity) return null;
 
@@ -974,6 +1027,18 @@ module.exports = function registerFilters() {
     return he.encode(string, { useNamedReferences: true });
   };
 
+  // fieldCcBenefitsHotline is odd because it has no entity
+  liquid.filters.processCentralizedBenefitsHotline = fieldCcBenefitsHotline => {
+    if (!fieldCcBenefitsHotline || !fieldCcBenefitsHotline.fetched) {
+      return null;
+    }
+    const processedFetched = {};
+    for (const [key, value] of Object.entries(fieldCcBenefitsHotline.fetched)) {
+      processedFetched[key] = value[0].value;
+    }
+    return processedFetched;
+  };
+
   // fieldCcVetCenterFeaturedCon data structure is different
   // from objects inside fieldVetCenterFeatureContent. Recreates the array
   // with the expected structure so that it can be directly passed inside the template
@@ -1010,6 +1075,7 @@ module.exports = function registerFilters() {
         entity: {
           fieldButtonLink: {
             uri: fieldCta[0]?.entity.fieldButtonLink[0].uri,
+            url: fieldCta[0]?.entity.fieldButtonLink[0].url?.path,
           },
           fieldButtonLabel: fieldCta[0].entity.fieldButtonLabel[0].value,
         },

src/site/filters/liquid.unit.spec.js

@@ -14,6 +14,8 @@ import vetCenterHoursData from '../layouts/tests/vet_center/template/fixtures/ve
 import healthCareRegionNonClinicalServicesData from './fixtures/healthCareRegionNonClinicalServicesData.json';
 import stagingSurveys from './medalliaStagingSurveys.json';
 import prodSurveys from './medalliaProdSurveys.json';
+import vbaDataCantFind from '../layouts/tests/vba/template/fixtures/vba_facility_data_cant_find_benefits.json';
+import vbaDataBenefitHotline from '../layouts/tests/vba/template/fixtures/vba_facility_data_benefits_hotline.json';
 
 // Register filters.
 registerFilters();
@@ -1602,7 +1604,36 @@ describe('getValueFromObjPath', () => {
     ).to.eq(1);
   });
 });
-
+describe('processfieldCcCantFindBenefits', () => {
+  it('returns null if null is passed', () => {
+    expect(liquid.filters.processfieldCcCantFindBenefits(null)).to.be.null;
+  });
+  it('returns Cannot Find Benefits data in simplified object', () => {
+    const data = liquid.filters.processfieldCcCantFindBenefits(vbaDataCantFind);
+    expect(data.fieldSectionHeader).to.be.equal(
+      vbaDataCantFind.fetched.fieldSectionHeader[0].value,
+    );
+    expect(data.fieldDescription).to.be.equal(
+      vbaDataCantFind.fetched.fieldDescription[0].processed,
+    );
+    const { entity } = vbaDataCantFind.fetched.fieldCta[0];
+    expect(data.fieldCta.label).to.be.equal(entity.fieldButtonLabel[0].value);
+    expect(data.fieldCta.link).to.be.equal(entity.fieldButtonLink[0].url.path);
+  });
+});
+describe('processCentralizedBenefitsHotline', () => {
+  it('returns null if null is passed', () => {
+    expect(liquid.filters.processCentralizedBenefitsHotline(null)).to.be.null;
+  });
+  it('returns hotline data in simplified object', () => {
+    const data = liquid.filters.processCentralizedBenefitsHotline(
+      vbaDataBenefitHotline,
+    );
+    expect(data.fieldPhoneExtension).to.be.equal(
+      vbaDataBenefitHotline.fetched.fieldPhoneExtension[0].value,
+    );
+  });
+});
 describe('processCentralizedContent', () => {
   it('returns null if null is passed', () => {
     expect(liquid.filters.processCentralizedContent(null, 'wysiwyg')).to.be

src/site/includes/hours-item.liquid

@@ -1,5 +1,5 @@
 <li>
-    {% if headerType == 'clinical' %}
+    {% if headerType == 'clinical' or boldDay == true %}
         <b class="abbrv-day">{{ hours.day | officeHoursDayFormatter }}:</b>
     {% else %}
         <span class="abbrv-day">{{ hours.day | officeHoursDayFormatter }}.</span>

src/site/includes/hours.liquid

@@ -11,6 +11,10 @@
 				<h2 class="vads-u-margin-top--2p5 vads-u-margin-bottom--1">
 					Clinical hours
 				</h2>
+			{% elsif headerType == 'office' %}
+				<h3 class="vads-u-font-size--lg vads-u-margin-top--0 vads-u-line-height--1 vads-u-margin-bottom--1">
+					Office hours</h3>
+				<p>Hours may vary for different services. Select a service on this page to check the hours.</p>
 			{% endif %}
 			<div class="vads-u-display--flex vads-u-flex-direction--column small-screen:vads-u-flex-direction--row vads-u-margin-bottom--0">
 				<ul class="vads-u-flex--1 va-c-facility-hours-list vads-u-margin-top--0 vads-u-margin-bottom--1 small-screen:vads-u-margin-bottom--0 vads-u-margin-right--3">

src/site/includes/vba_facilities/spotlight_content.liquid

@@ -0,0 +1,24 @@
+<div class="feature featured-content-list-item vads-u-flex--fill vads-u-padding-y--1p5 vads-u-padding-x--1p5 vads-u-margin-bottom--0 medium-screen:vads-u-margin-bottom--2">
+    <script>console.log({{entity.fieldCta|json}})</script>
+
+    {% if entity.fieldSectionHeader != empty %}
+        <h3 class="force-small-header vads-u-margin-bottom--2">{{ entity.fieldSectionHeader }}</h3>
+        <hr class="featured-content-hr vads-u-margin-y--1p5 vads-u-border-color--primary">
+    {% endif %}
+    {% if entity.fieldDescription %}
+        <div id="featured-content-description{{ entity.fieldSectionHeader }}}}">
+            {{ entity.fieldDescription.processed | drupalToVaPath | phoneLinks }}
+        </div>
+    {% endif %}
+    {% if entity.fieldCta.entity.fieldButtonLink %}
+        {% if entity.fieldCta.entity.fieldButtonLink.url %}
+            <div class="vads-u-padding-top--1">
+                <p>
+                    <a class="vads-u-display--block" href="{{ entity.fieldCta.entity.fieldButtonLink.url }}" >
+                        <span> {{  entity.fieldCta.entity.fieldButtonLabel }} <i class="fa fa-chevron-right vads-facility-hub-cta-arrow" aria-hidden="true"></i></span>
+                    </a>
+                </p>
+            </div>
+        {% endif %}
+    {% endif %}
+</div>

src/site/layouts/tests/vba/template/fixtures/vba_facility_data_benefits_hotline.json

@@ -0,0 +1,24 @@
+{
+  "fetched": {
+    "fieldPhoneExtension": [
+      {
+        "value": "4023022840"
+      }
+    ],
+    "fieldPhoneLabel": [
+      {
+        "value": "VA benefits hotline"
+      }
+    ],
+    "fieldPhoneNumber": [
+      {
+        "value": "800-827-1000"
+      }
+    ],
+    "fieldPhoneNumberType": [
+      {
+        "value": "tel"
+      }
+    ]
+  }
+}

src/site/layouts/tests/vba/template/fixtures/vba_facility_data_cant_find_benefits.json

@@ -0,0 +1,50 @@
+{
+  "fetched": {
+    "fieldCta": [
+      {
+        "entity": {
+          "targetId": "139797",
+          "targetRevisionId": "1104167",
+          "entityType": "paragraph",
+          "entityBundle": "button",
+          "pid": "139797",
+          "label": "VBA -- benefit office content > Content > Call to Action",
+          "status": true,
+          "langcode": "en",
+          "fieldButtonLabel": [
+            {
+              "value": "Find a VA benefits location"
+            }
+          ],
+          "fieldButtonLink": [
+            {
+              "uri": "https://www.va.gov/find-locations/?facilityType=benefits",
+              "title": "",
+              "options": {
+                "href": "https://www.va.gov/find-locations/?facilityType=benefits",
+                "dataEntityType": "",
+                "dataEntityUuid": "",
+                "dataEntitySubstitution": ""
+              },
+              "url": {
+                "path": "https://www.va.gov/find-locations/?facilityType=benefits"
+              }
+            }
+          ]
+        }
+      }
+    ],
+    "fieldDescription": [
+      {
+        "value": "<p>Call our VA benefits hotline at <a aria-label=\"8 0 0. 8 2 7. 1 0 0 0.\" href=\"tel:+18008271000\">800-827-1000</a> (<a aria-label=\"TTY. 7 1 1.\" href=\"tel:711\">TTY: 711</a>). We’re here 8:00 a.m. to 9:00 p.m. ET, Monday through Friday.</p>\r\n\r\n<p>&nbsp;</p>\r\n",
+        "format": "rich_text_limited",
+        "processed": "<p>Call our VA benefits hotline at <a aria-label=\"8 0 0. 8 2 7. 1 0 0 0.\" href=\"tel:+18008271000\">800-827-1000</a> (<a aria-label=\"TTY. 7 1 1.\" href=\"tel:711\">TTY: 711</a>). We’re here 8:00 a.m. to 9:00 p.m. ET, Monday through Friday.</p>\n<p> </p>\n"
+      }
+    ],
+    "fieldSectionHeader": [
+      {
+        "value": "Can't find the service you're looking for?"
+      }
+    ]
+  }
+}