@worksafevictoria/wcl7.5 1.17.1 → 1.18.0-beta.2

package/src/components/Paragraphs/RTWPlanner/HomePage/index.vue

@@ -0,0 +1,72 @@
+<script setup>
+import Container from './../../../Containers/Container/index.vue'
+import TextMedia from './../../TextMedia/index.vue'
+
+const props = defineProps({
+  textMedia: {
+    type: Object,
+    required: true,
+  },
+  selectInjuries: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <div>
+    <TextMedia
+      :media-type="'image'"
+      :title-text="textMedia.title"
+      :title-tag="textMedia.titleTag"
+      :content="textMedia.content"
+      :image="textMedia.image"
+      :rtl="textMedia.rtl"
+    />
+
+    <Container fluid class="my-4">
+      <h2>Select your injury</h2>
+
+      <div>
+        <TextMedia
+          :media-type="'icon'"
+          :title-text="selectInjuries.physical.title"
+          :content="selectInjuries.physical.content"
+          :glyph="selectInjuries.physical.image.url"
+          :icon-alt="selectInjuries.physical.image.alt"
+          :glyph-height="60"
+          :glyph-width="60"
+        />
+
+        <TextMedia
+          :media-type="'icon'"
+          :title-text="selectInjuries.mental.title"
+          :content="selectInjuries.mental.content"
+          :glyph="selectInjuries.mental.image.url"
+          :icon-alt="selectInjuries.mental.image.alt"
+          :glyph-height="60"
+          :glyph-width="60"
+        />
+
+        <TextMedia
+          :media-type="'icon'"
+          :title-text="selectInjuries.other.title"
+          :content="selectInjuries.other.content"
+          :glyph="selectInjuries.other.image.url"
+          :icon-alt="selectInjuries.other.image.alt"
+          :glyph-height="60"
+          :glyph-width="60"
+        />
+      </div>
+    </Container>
+  </div>
+</template>
+
+<style scoped>
+.lightgrey-bg {
+  border-radius: 12px;
+  border: 4px solid #727272;
+  background: #f5f5f5;
+}
+</style>

package/src/components/Paragraphs/RTWPlanner/Injuries/index.vue

@@ -0,0 +1,231 @@
+<script setup>
+import { ref, watch } from 'vue'
+import HeroHeader from './../../../Global/HeroHeader/index.vue'
+import CardContainer from './../CardContainer/index.vue'
+import Breakout from './../../Breakout/index.vue'
+import SectionGroup from './../../../Containers/SectionGroup/index.vue'
+import CardGroup from './../../../SubComponents/CardGroup/index.vue'
+import Breadcrumb from './../../../SubComponents/Breadcrumb/index.vue'
+import RichText from './../../RichText/index.vue'
+import SelectableCards from './../../SelectableCards/index.vue'
+import PlannerNameModal from './../Planners/PlannerNameModal.vue'
+
+const props = defineProps({
+  injuryPage: {
+    type: String,
+    default: null,
+  },
+  titles: {
+    type: Object,
+    default: () => {},
+  },
+  heroHeader: {
+    type: Object,
+    default: () => {},
+  },
+  cards: {
+    type: Array,
+    default: () => [],
+  },
+  breakout: {
+    type: Object,
+    default: () => {},
+  },
+  rtwCards: {
+    type: Array,
+    default: () => [],
+  },
+  contactCards: {
+    type: Array,
+    default: () => [],
+  },
+  breadcrumbItems: {
+    type: Array,
+    default: () => [],
+  },
+  showModalOnButtonRole: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const screen = ref(1)
+const selectedCard = ref(null)
+const showModal = ref(false)
+
+// local copy of breadcrumb items allowed to mutate
+const breadcrumbItemsLocal = ref([...props.breadcrumbItems])
+
+// keep local in sync with incoming props when we're on screen 1
+watch(
+  () => props.breadcrumbItems,
+  (val) => {
+    if (screen.value === 1) {
+      breadcrumbItemsLocal.value = [...val]
+    }
+  },
+  { immediate: true },
+)
+
+function nextScreen(card) {
+  selectedCard.value = card
+  screen.value = 2
+
+  if (props.injuryPage === 'physicalInjury') {
+    breadcrumbItemsLocal.value = [
+      {
+        text: 'Physical Injury',
+        to: '/',
+      },
+    ]
+  }
+}
+
+function onCrumbClick({ index }) {
+  // clicking the first crumb → back to screen 1
+  if (index === 0) {
+    screen.value = 1
+    selectedCard.value = null
+    breadcrumbItemsLocal.value = [...props.breadcrumbItems]
+  }
+
+  // if you want the second crumb clickable to stay on screen 2,
+  // you can add logic for index === 1 here, or just leave it as no-op.
+}
+
+function nextScreenAgent(card) {
+  showModal.value = true
+}
+</script>
+
+<template>
+  <div class="injuries-app">
+    <breadcrumb
+      :breadcrumb-items="breadcrumbItemsLocal"
+      :intercept-clicks="true"
+      @item-click="onCrumbClick"
+    />
+
+    <div v-if="injuryPage === 'physicalInjury' && screen === 1">
+      <hero-header
+        :image="null"
+        :show-mask="false"
+        :title="heroHeader.title"
+        :description="heroHeader.description"
+        :bg-color="null"
+        :show-social="false"
+        class="hero-header"
+      />
+      <breakout :title="breakout.title" :body="breakout.body" />
+
+      <card-container
+        ref="physicalCardContainer"
+        :titles="titles.physical"
+        :cards="cards"
+        :button-role="'modal-quest'"
+        :showModalOnButtonRole="showModalOnButtonRole"
+        @nextScreen="nextScreen"
+      />
+    </div>
+
+    <div
+      v-if="
+        injuryPage === 'mentalInjury' ||
+        injuryPage === 'otherInjury' ||
+        screen === 2
+      "
+    >
+      <section-group
+        v-if="selectedCard?.value || cards.content"
+        :background-variant="'lavendergray'"
+        class="injuries-app__injury"
+      >
+        <rich-text
+          :content="selectedCard?.value || cards.content"
+          :without-container="true"
+        />
+      </section-group>
+
+      <card-group
+        v-if="rtwCards.length > 0"
+        class="injuries-app__rtw-cards"
+        :title="titles.rtwCards?.heading"
+        :title-tag="'h3'"
+        :cards="rtwCards"
+        :loading="false"
+        :columns="3"
+        :show-load-more="false"
+        :background="'white'"
+      />
+
+      <selectable-cards
+        class="injuries-app__contact-info"
+        :title="titles.cardContactInformaton?.heading"
+        :button-role="'none'"
+        :columns-per-row="4"
+        :cards="contactCards"
+        :icon-is-bordered="false"
+        :card-type="'control-selectcards'"
+        :card-text-align="'center'"
+        :is-selectable="'false'"
+      ></selectable-cards>
+    </div>
+
+    <div v-if="injuryPage === 'selectAgent'">
+      <card-container
+        ref="selectAgentContainer"
+        :columns="4"
+        :title="titles.cardContactInformaton?.heading"
+        :cards="contactCards"
+        :button-role="'link'"
+        @nextScreen="nextScreenAgent"
+      />
+    </div>
+
+    <PlannerNameModal class="injuries-app__new-planner" v-model="showModal" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.injuries-app {
+  .wcl-hero-header {
+    border: none;
+  }
+
+  .wcl-breadcrumb {
+    margin: 50px 0 20px 0;
+    :deep(.breadcrumb) {
+      font-size: 12px;
+    }
+
+    &--ltr {
+      :deep(.breadcrumb-item:first-of-type::before) {
+        content: '<';
+        margin-right: 10px;
+      }
+    }
+  }
+
+  &__injury {
+    border-radius: 8px !important;
+    :deep(a.cta-button) {
+      display: none;
+    }
+  }
+
+  &__rtw-cards {
+    @media (min-width: 1024px) {
+      :deep(.section-group__heading) {
+        width: 75%;
+      }
+    }
+  }
+
+  &__contact-info {
+    :deep(.card-unit) {
+      padding: 0;
+      font-weight: bold;
+    }
+  }
+}
+</style>

package/src/components/Paragraphs/RTWPlanner/Planners/PlanTasks.vue

@@ -56,8 +56,8 @@
                       ? 'bg-success-subtle text-dark fw-bold active-done'
                       : 'bg-success-subtle text-dark fw-bold'
                     : activeContent.id === content.id
-                    ? 'active'
-                    : 'bg-light text-muted'
+                      ? 'active'
+                      : 'bg-light text-muted'
                 "
                 @click="setActiveContent(task, content)"
               >
@@ -90,26 +90,26 @@
 
 <script setup>
 import { ref } from 'vue'
-import { CtaButton, Row, Column, Container } from '@worksafevictoria/wcl7.5'
-import TickCircleIcon from './icons/TickCircleIcon.vue'
+// import { CtaButton, Row, Column, Container }
+import TickCircleIcon from './../icons/TickCircleIcon.vue'
 
 const props = defineProps({
   activePlanner: { type: Object, required: true },
-  tasks: { type: Array, required: true }
+  tasks: { type: Array, required: true },
 })
 
 const emit = defineEmits(['updatePlanner'])
 const tasks = ref([])
 const activeTask = ref(props.tasks[0] || { id: '', title: '', content: [] })
 const activeContent = ref(
-  props.tasks[0]?.content[0] || { btnText: '', html: '' }
+  props.tasks[0]?.content[0] || { btnText: '', html: '' },
 )
 
 const toggleTask = (taskId, contentId) => {
   const key = `${taskId}_${contentId}`
   const updatedPlanner = {
     ...props.activePlanner,
-    tasksCompleted: [...props.activePlanner.tasksCompleted]
+    tasksCompleted: [...props.activePlanner.tasksCompleted],
   }
   const index = updatedPlanner.tasksCompleted.indexOf(key)
   if (index === -1) {
@@ -153,7 +153,8 @@ const getNextTask = () => {
 </script>
 
 <style lang="scss" scoped>
-@import '@worksafevictoria/wcl7.5/src/includes/scss/all.scss';
+@import './../../../../includes/scss/all.scss';
+
 .active {
   color: black !important;
   background-color: $yellow !important;

package/src/components/Paragraphs/RTWPlanner/Planners/PlannerNameModal.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { computed } from 'vue'
+import { BModal, BFormInput } from 'bootstrap-vue-next'
+import CtaButton from './../../../SubComponents/CtaButton/index.vue'
+
+// props from parent
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false, // used by v-model on PlannerNameModal
+  },
+  value: {
+    type: String,
+    default: '', // used by v-model:value on PlannerNameModal
+  },
+})
+
+const emit = defineEmits([
+  'update:modelValue', // for v-model (show/hide)
+  'update:value', // for v-model:value (input text)
+  'onsubmit', // custom event to send value to parent
+])
+
+// proxy for v-model on <b-modal>
+const show = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+// proxy for v-model on input (goes to parent)
+const inputValue = computed({
+  get: () => props.value,
+  set: (val) => emit('update:value', val),
+})
+
+function handleSubmit() {
+  const trimmed = inputValue.value.trim()
+  console.log('handle Submit', trimmed)
+
+  if (!trimmed) return
+
+  // emit value to parent
+  emit('onsubmit', trimmed)
+
+  // close modal
+  emit('update:modelValue', false)
+
+  // optional: clear input in parent
+  emit('update:value', '')
+}
+</script>
+
+<template>
+  <b-modal
+    v-model="show"
+    aria-labelledby="injuries-app__modal"
+    no-close-on-backdrop
+    centered
+    no-footer
+    size="lg"
+  >
+    <template #default="{ close }">
+      <div class="p-3">
+        <h3 class="fw-bold mb-3 modal-title__new-planner">Name your planner</h3>
+        <p class="mb-4 modal-description__new-planner">
+          Give your planner a name so you can easily find it and pick up where
+          you left off.
+        </p>
+
+        <label for="modal2CB" class="fw-bold mb-2">
+          Injured workers first name
+        </label>
+
+        <BFormInput
+          id="modal2CB"
+          name="modal2CB"
+          placeholder=""
+          v-model="inputValue"
+          class="mb-4 input__new-planner"
+          @keyup.enter="handleSubmit"
+        />
+
+        <CtaButton ref="calNextBtn" @click="handleSubmit">Next</CtaButton>
+      </div>
+    </template>
+  </b-modal>
+</template>
+
+<style lang="scss" scoped>
+:deep(.modal-description__new-planner) {
+  width: 65%;
+}
+
+:deep(.input__new-planner) {
+  width: 60%;
+}
+</style>