From a115e54586cc7b6901f5889b7d5372a4374c84af Mon Sep 17 00:00:00 2001
From: Jen Beckett <115109120+jenbeckett@users.noreply.github.com>
Date: Mon, 16 Sep 2024 11:36:57 -0700
Subject: [PATCH 1/3] updates to help and resources

---
 frontend/src/router/index.js    |   1 -
 frontend/src/views/HelpView.vue | 142 ++++++++++++++++++++++++++++++--
 frontend/src/views/HomeView.vue |   8 +-
 3 files changed, 138 insertions(+), 13 deletions(-)

diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 163f7c68..b98dcc9f 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -295,7 +295,6 @@ const router = createRouter({
       component: HelpView,
       meta: {
         requiresAuth: true,
-        hidden: true,
       },
     },
     {
diff --git a/frontend/src/views/HelpView.vue b/frontend/src/views/HelpView.vue
index b1fece52..00662d09 100644
--- a/frontend/src/views/HelpView.vue
+++ b/frontend/src/views/HelpView.vue
@@ -1,15 +1,147 @@
 <template>
-  <v-container fluid v-bind="$attrs">
-    <h1>Help Centre</h1>
-    <AppBackButton id="back-home-button" width="220px" :to="{ name: 'home' }">Home</AppBackButton>
+  <OrganizationHeader :show-facility="false" />
+  <v-container fluid>
+    <h1>Help and Resources</h1>
+    <h3 class="my-4 ml-1">General</h3>
+    <v-row no-gutters class="mb-2">
+      <v-col cols="12" class="d-flex flex-column align-start">
+        <AppButton v-if="isEmpty(panels)" id="expand-button" :primary="false" size="large" width="200px" @click="togglePanel">
+          <v-icon>mdi-arrow-expand-vertical</v-icon>
+          Expand All
+        </AppButton>
+        <AppButton v-else id="collapse-button" :primary="false" size="large" width="200px" @click="togglePanel">
+          <v-icon>mdi-arrow-collapse-vertical</v-icon>
+          Collapse All
+        </AppButton>
+      </v-col>
+    </v-row>
+    <v-expansion-panels v-model="panels" multiple>
+      <v-expansion-panel v-for="panelComponent in GENERAL_PANELS" :key="panelComponent.id" :value="panelComponent.id">
+        <v-expansion-panel-title>
+          <span class="supplementary-header-label">{{ panelComponent.title }}</span>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text v-if="panelComponent.id === 'faq'">
+          <a href="https://www2.gov.bc.ca/gov/content/family-social-supports/caring-for-young-children/childcarebc-programs/10-a-day-childcarebc-centres/faq-child-care-providers" target="_blank">
+            <v-icon size="20" icon="mdi-link-variant" class="mr-1"></v-icon>
+            <span>$10 a Day Program Frequently Asked Questions - Province of British Columbia (gov.bc.ca)</span>
+          </a>
+          <br />
+          <br />
+          <a
+            href="https://bcgov.sharepoint.com/sites/CCD-TDADExternal/2023%20OFM%20Library/Core%20and%20Discretionary%20Allowance/2024%20-%20OFM%20Core%20%20Discretionary%20Allowances%20Factsheet.pdf"
+            target="_blank">
+            <v-icon size="18" icon="fa:fa-regular fa-file-pdf" class="mr-1"></v-icon>
+            <span>2024 - OFM Core Discretionary Allowances Factsheet</span>
+          </a>
+          <br />
+          <br />
+          <a href="https://bcgov.sharepoint.com/sites/CCD-TDADExternal/2023%20OFM%20Library/OFM%20Comparison%20to%20EE.pdf" target="_blank">
+            <v-icon size="18" icon="fa:fa-regular fa-file-pdf" class="mr-1"></v-icon>
+            <span>OFM Comparison Infographic</span>
+          </a>
+        </v-expansion-panel-text>
+        <v-expansion-panel-text v-if="panelComponent.id === 'additional'">
+          <a href="https://www2.gov.bc.ca/gov/content/family-social-supports/caring-for-young-children/childcarebc-programs/10-a-day-childcarebc-centres" target="_blank">
+            <v-icon size="20" icon="mdi-link-variant" class="mr-1"></v-icon>
+            <span>$10 a Day ChildCareBC Centres Website - Province of British Columbia (gov.bc.ca)</span>
+          </a>
+          <br />
+          <br />
+          <a
+            href="https://www2.gov.bc.ca/assets/gov/british-columbians-our-governments/services-policies-for-government/internal-corporate-services/finance-forms/fin-312-direct-deposit-application.pdf"
+            target="_blank">
+            <v-icon size="20" icon="mdi-link-variant" class="mr-1"></v-icon>
+            <span>Direct Deposit Application - FIN 312</span>
+          </a>
+          <br />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+    <h3 class="my-8 ml-1">Test Participants</h3>
+    <v-expansion-panels v-model="panels" multiple>
+      <v-expansion-panel v-for="panelComponent in TEST_PARTICIPANT_PANELS" :key="panelComponent.id" :value="panelComponent.id">
+        <v-expansion-panel-title>
+          <span class="supplementary-header-label">{{ panelComponent.title }}</span>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text v-if="panelComponent.id === 'manuals'">
+          <a
+            href="https://bcgov.sharepoint.com/sites/CCD-TDADExternal/2023%20OFM%20Library/Policy%20and%20Procedure%20Manual/2023%20-%20OFM%20$10%20a%20Day%20ChildCareBC%20Centres%20-%20Policy%20and%20Procedures%20Manual.pdf"
+            target="_blank">
+            <v-icon size="18" icon="fa:fa-regular fa-file-pdf" class="mr-1"></v-icon>
+            <span>2023 - Policy and Procedure Manual</span>
+          </a>
+          <br />
+          <br />
+        </v-expansion-panel-text>
+        <v-expansion-panel-text v-if="panelComponent.id === 'training'">
+          <a href="https://rise.articulate.com/share/_eN8nAZYN7_Jmi9tpG69W6dcza6aHsXZ#/" target="_blank">
+            <v-icon size="20" icon="mdi-link-variant" class="mr-1"></v-icon>
+            <span>Funding Agreement Training e-Module</span>
+          </a>
+          <br />
+          <br />
+          <a href="https://rise.articulate.com/share/4IlRwcyWDpuotLtH71zjj_czAkUUsPOw#/" target="_blank">
+            <v-icon size="20" icon="mdi-link-variant" class="mr-1"></v-icon>
+            <span>Policy and Procedure Manual Training e-Module</span>
+          </a>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+    <AppBackButton id="back-home-button" size="large" width="220px" :to="{ name: 'home' }">Home</AppBackButton>
   </v-container>
 </template>
 
 <script>
 import AppBackButton from '@/components/ui/AppBackButton.vue'
+import AppButton from '@/components/ui/AppButton.vue'
+import OrganizationHeader from '@/components/organizations/OrganizationHeader.vue'
+import permissionsMixin from '@/mixins/permissionsMixin'
+import { isEmpty } from 'lodash'
 
 export default {
-  name: 'HelpView',
-  components: { AppBackButton },
+  components: { AppBackButton, AppButton, OrganizationHeader },
+  mixins: [permissionsMixin],
+  data() {
+    return {
+      panels: [],
+    }
+  },
+
+  computed: {
+    allPanelIDs() {
+      const allPanels = [...this.GENERAL_PANELS, ...this.TEST_PARTICIPANT_PANELS]
+      return allPanels.map((panel) => panel.id)
+    },
+  },
+  created() {
+    this.GENERAL_PANELS = [
+      {
+        title: 'Frequently Asked Questions',
+        id: 'faq',
+      },
+      {
+        title: 'Additional Resources',
+        id: 'additional',
+      },
+    ]
+    this.TEST_PARTICIPANT_PANELS = [
+      {
+        title: 'Manuals and Guides',
+        id: 'manuals',
+      },
+      {
+        title: 'Training e-Modules',
+        id: 'training',
+      },
+    ]
+
+    this.panels = this.allPanelIDs
+  },
+  methods: {
+    isEmpty,
+    togglePanel() {
+      this.panels = isEmpty(this.panels) ? this.allPanelIDs : []
+    },
+  },
 }
 </script>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 739a4d7c..80392038 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -50,13 +50,7 @@
         </v-card>
       </v-col>
       <v-col cols="12" md="6" lg="4">
-        <v-card
-          id="help-card"
-          class="basic-card"
-          prepend-icon="mdi-help-circle-outline"
-          title="Help and Resources"
-          target="ofm_external_help"
-          href="https://bcgov.sharepoint.com/sites/CCD-TDADExternal/SitePages/2023%20OFM%20Test.aspx">
+        <v-card id="help-card" class="basic-card" prepend-icon="mdi-help-circle-outline" title="Help and Resources" @click="$router.push({ name: 'help' })">
           <v-card-text>Need support? Find program training tools, resources and technical help.</v-card-text>
         </v-card>
       </v-col>

From 83f32e10a5d5409e763b54ed5c0bd49ffe102af5 Mon Sep 17 00:00:00 2001
From: Jen Beckett <115109120+jenbeckett@users.noreply.github.com>
Date: Mon, 16 Sep 2024 11:40:51 -0700
Subject: [PATCH 2/3] removed spacing

---
 frontend/src/views/HelpView.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/views/HelpView.vue b/frontend/src/views/HelpView.vue
index 00662d09..cdb02c02 100644
--- a/frontend/src/views/HelpView.vue
+++ b/frontend/src/views/HelpView.vue
@@ -106,7 +106,6 @@ export default {
       panels: [],
     }
   },
-
   computed: {
     allPanelIDs() {
       const allPanels = [...this.GENERAL_PANELS, ...this.TEST_PARTICIPANT_PANELS]
@@ -134,7 +133,6 @@ export default {
         id: 'training',
       },
     ]
-
     this.panels = this.allPanelIDs
   },
   methods: {

From 3dbdd98f324143c07191fe3442b4e63b7b485c5f Mon Sep 17 00:00:00 2001
From: Jen Beckett <115109120+jenbeckett@users.noreply.github.com>
Date: Tue, 17 Sep 2024 10:02:34 -0700
Subject: [PATCH 3/3] update help button

---
 frontend/src/components/TheHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/TheHeader.vue b/frontend/src/components/TheHeader.vue
index 32da05a3..365352a9 100644
--- a/frontend/src/components/TheHeader.vue
+++ b/frontend/src/components/TheHeader.vue
@@ -29,7 +29,7 @@
                 </div>
               </v-col>
               <v-col class="px-0" style="width: 50px">
-                <v-btn id="help_button" aria-label="Help" rounded target="ofm_external_help" href="https://bcgov.sharepoint.com/sites/CCD-TDADExternal/SitePages/2023%20OFM%20Test.aspx">
+                <v-btn id="help_button" aria-label="Help" rounded @click="$router.push({ name: 'help' })">
                   <v-icon aria-hidden="false" icon="mdi-help-circle-outline" size="38" color="white" />
                 </v-btn>
               </v-col>