@dcodegroup-au/page-builder 0.5.8 → 0.5.9

package/example/src/App.vue

@@ -12,6 +12,7 @@ import {OurGroups} from "./pages/OurGroups.js";
 import {Vectea2024} from "./pages/Vectea2024.js";
 import {AdvocaryAndResearch} from "./pages/AdvocaryAndResearch.js";
 import {SAEW} from "./pages/SAEW.js";
+import {AssessmentSupportService} from "./pages/AssessmentSupportService.js";
 
 const slide = {
   title: "About ELAA",
@@ -110,7 +111,7 @@ const breadcrumbs = [
     {{ JSON.stringify(SAEW) }}
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Render</h1>
-      <PageRender :page="SAEW"/>
+      <PageRender :page="AssessmentSupportService"/>
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>
@@ -126,7 +127,7 @@ const breadcrumbs = [
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Builder</h1>
-      <PageBuilder v-model="SAEW" :breadcrumbs="breadcrumbs" :forms="forms" :sites="sites"/>
+      <PageBuilder v-model="AssessmentSupportService" :breadcrumbs="breadcrumbs" :forms="forms" :sites="sites"/>
     </div>
   </div>
 </template>

package/example/src/pages/AssessmentSupportService.js

@@ -0,0 +1,120 @@
+export const AssessmentSupportService =
+  {
+    title: "Capability Assessment Support Service",
+    sections: [
+      {
+        title: "Standard header",
+        type: "standard_header",
+        components: [
+          {
+            name: "Standard header",
+            type: "header",
+            title: "Capability Assessment Support Service",
+            supporting_text_max_length: 500,
+            supporting_text: "ELAA is offering a 2-hour panellist consultancy Capability Assessment support program.",
+          },
+        ]
+      },
+      {
+        title: "Bullet Points Section",
+        type: "bullet_points",
+        components: [
+          {
+            name: "Section header",
+            type: "header",
+            title: "What the support program will involve",
+            supporting_text: "ELAA is offering a 2-hour panellist consultancy Capability Assessment support program.",
+            featured_image: 'https://beta.elaa.org.au/img/what-we-do/capability-assessment-support-service/capability-assessment-support-service-01.jpg',
+          },
+          {
+            name: "Bullet Points",
+            type: "bullet_points",
+            supportive_text: "This section can contain up to 10 items.",
+            max_items: 10,
+            has_type_switcher: false,
+            max_title: 500,
+            data: [
+              {
+                title: "An ELAA team member with expertise in early childhood education attending your Capability Assessment panel.",
+              },
+              {
+                title: "Participate in discussions with your committee/management, determining an outcome for your teacher.",
+              },
+              {
+                title: "Support will be on a per teacher basis.",
+              },
+            ]
+          }
+        ]
+      },
+      {
+        title: "Accordion pricing section",
+        type: "pricing",
+        components: [
+          {
+            name: "Content block",
+            type: "paragraph",
+            title: "Want to Take the Next Step?",
+            paragraph: 'If you are interested in the capability assessment support service, please complete the request form and an ELAA staff member will be in contact to discuss your request.',
+            button: {
+              title: 'Complete request form',
+              url: 'google.com',
+              type: 'form',
+              open_in_new_tab: true,
+              show: true,
+            },
+          },
+          {
+            name: "Pricing block",
+            type: "pricing",
+            supportive_text: "This section can contain up to 10 items.",
+            title: "Pricing",
+            max_items: 10,
+            has_type_switcher: false,
+            max_title: 500,
+            data: [
+              {
+                title: "Members",
+                supporting_text: "From $250 per teacher",
+                is_editor: true,
+                has_extra: true,
+                as_item: true,
+              },
+              {
+                title: "Non Members",
+                supporting_text: "From $390 per teacher",
+                is_editor: true,
+                has_extra: true,
+                as_item: true,
+              },
+            ]
+          },
+        ]
+      },
+      {
+        title: "Contact Us",
+        type: "contact_us",
+        components: [
+          {
+            name: "Standard header",
+            type: "header",
+            title: "Contact Us",
+            supporting_text: "If you have further questions regarding ELAA’s advisory services, please contact our Member Solutions Team via the options below.",
+          },
+          {
+            name: "Contact Us",
+            type: "contact_us",
+            data: [
+              {
+                show: true,
+                name: 'Email button',
+                label: 'Contact Member Solutions Team',
+                address: 'elaa@gmail.com',
+                type: 'email',
+              },
+            ]
+          }
+        ]
+      },
+    ]
+  };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcodegroup-au/page-builder",
-  "version": "0.5.8",
+  "version": "0.5.9",
   "exports": {
     ".": {
       "import": "./dist/page-builder.es.js"

package/src/components/PageBuilder.vue

@@ -145,6 +145,7 @@ const componentMaps = ref({
   image_block: markRaw(VImageBlock),
   timeline_items: markRaw(VItems),
   bullet_points: markRaw(VLinks),
+  pricing: markRaw(VLinks),
   feature_items: markRaw(VLinks),
   faqs: markRaw(VLinks),
   link_cards: markRaw(VItems),

package/src/components/PageRender.vue

@@ -27,6 +27,7 @@ import BulletPoints from "@/components/presenters/modules/BulletPoints.vue";
 import Callout from "@/components/presenters/modules/Callout.vue";
 import ContactUs from "@/components/presenters/modules/ContactUs.vue";
 import FAQ from "@/components/presenters/modules/FAQ.vue";
+import AccordionPricing from "@/components/presenters/modules/AccordionPricing.vue";
 
 const props = defineProps({
   page: {
@@ -52,6 +53,7 @@ const componentMaps = ref({
   callout: markRaw(Callout),
   contact_us: markRaw(ContactUs),
   faqs: markRaw(FAQ),
+  pricing: markRaw(AccordionPricing),
 });
 
 const currentComponent = (section) => {

package/src/components/builders/Links.vue

@@ -70,7 +70,7 @@
             </label>
           </div>
           <div class="flex flex-col gap-1.5" v-if="!item.hasOwnProperty('content_type') || item.content_type === 'content'">
-            <Header v-if="['feature_items', 'faqs'].includes(componentData.type)" :data="item"></Header>
+            <Header v-if="['feature_items', 'faqs', 'pricing'].includes(componentData.type)" :data="item"></Header>
             <input-wrapper
                 v-else
                 is-vertical

package/src/components/helpers/pageBuilderFactory.js

@@ -44,7 +44,7 @@ export function createItem(overrides = {}, withSecondary = true, isTimeline = fa
 }
 
 export function createLink(overrides = {}, type = null) {
-  if (type === 'faqs') {
+  if (type === 'faqs' || type === 'pricing') {
     return {
       has_extra: true,
       as_item: true,

package/src/components/presenters/modules/AccordionPricing.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="max-w-[1640px] md:px-[120px] mx-auto w-full  py-[40px] flex justify-center gap-[10%] ">
+    <div class="bg-pale-100 flex w-full rounded-[20px] p-8 gap-6">
+      <div class="w-1/2">
+        <p class="text-[36px] font-semibold text-gray-900 mb-[48px]" v-text="pricingComponent.title"></p>
+        <div class="flex flex-col divide-y divide-gray-200 px-6 bg-white rounded-[16px] overflow-hidden">
+          <div v-for="(price, index) in pricingComponent.data"
+               class="relative w-full py-6">
+            <a class="text-gray-900 cursor-pointer w-full inline-flex justify-between gap-1.5 items-center leading-[28px] font-semibold text-lg">
+              <span class="hover:underline text-lg leading-[28px] text-gray-900" @click="toggle(index)">
+                {{ price.title }}
+              </span>
+              <span class="min-w-[24px]">
+                <Plus v-if="!show[index]"
+                      class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700"
+                      @click="toggle(index)"></Plus>
+                <Minus v-else
+                       class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700"
+                       @click="toggle(index)"></Minus>
+              </span>
+            </a>
+            <p v-if="show[index]" class="mt-2 text-gray-600 leading-[24px] all-unset"
+               v-html="price?.supporting_text"></p>
+          </div>
+        </div>
+      </div>
+      <div class="w-1/2 bg-white rounded-[16px] overflow-hidden flex flex-col items-center justify-center px-12">
+        <div v-if="paragraphComponent">
+          <p class="text-[32px] font-semibold text-gray-900" v-text="paragraphComponent.title"></p>
+          <p class="text-[18px]text-gray-600 mt-2" v-html="paragraphComponent.paragraph"></p>
+        </div>
+        <a v-if="paragraphComponent?.hasOwnProperty('button') && paragraphComponent.button.show" :href="paragraphComponent.button.url"
+           class="mt-4 flex justify-center items-center w-full gap-2 px-3 py-2.5 rounded-full shadow-xs text-[16px] font-semibold text-white bg-brand-600 hover:bg-brand-700 border border-brand-600 text-center cursor-pointer"
+        >
+          {{ paragraphComponent.button.title }} <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import {ref, computed} from "vue";
+import Plus from "@/assets/img/icons/plus-circle.svg";
+import Minus from "@/assets/img/icons/minus-circle.svg";
+import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
+
+const props = defineProps({
+  section: {
+    required: true,
+    type: Object,
+  },
+});
+
+const section = ref(props.section);
+const show = ref([]);
+const paragraphComponent = computed(() => {
+  return section.value.components.find((component) => component.type === "paragraph");
+});
+
+const pricingComponent = computed(() => {
+  return section.value.components.find((component) => component.type === "pricing");
+});
+
+pricingComponent.value.data.forEach((value, index) => {
+  show.value[index] = false;
+})
+
+const toggle = (index) => {
+  show.value[index] = !show.value[index];
+};
+
+</script>

package/src/components/presenters/modules/Paragraph.vue

@@ -7,7 +7,7 @@
         </h3>
         <div class="all-unset">
           <div v-html="component.paragraph"></div>
-          <div v-if="component?.hasOwnProperty('button')">
+          <div v-if="component?.hasOwnProperty('button') && button.show">
             <a :href="button.url"
                class="inline-flex items-center gap-2 !no-underline px-3 py-2.5 rounded-full shadow-xs text-md font-semibold !text-white bg-brand-600 hover:bg-brand-700 border border-brand-600 text-center cursor-pointer"
             >{{ button.title }} <ArrowUpRight class="w-5 h-5"></ArrowUpRight></a>