✨Migrate the testimonials page (#1401)

* ✨Migrate the testimonials page

* ✨Add breadcrumb and SEO description

* ✨Add testimonials component

* ✨Add button to hide internship testimonials from all

* Merge from main

* 🐛Fix the eslint warning

* ✨Migrate part of the testimonial cards from old page

* 📃Migrate testimonial cards

* 🐛center the loading animation

* 🐛Fix the display issue of testimonial cards

* ✨Extract testimonialCards as a public component

* Merge from `main` branch

* 🐛Fix the bug to show testimonials cards correctly

* ⚡Remove useless code from company.tsx

Co-authored-by: Harry Ross [SSW] <[email protected]>

* ⚡Remove useless code from company.tsx

Co-authored-by: Harry Ross [SSW] <[email protected]>

* ⚡Remove useless props form testimonials.mdx

* 🐛Reverse the file

* ⚡Remove the wrong description in testimonialsList

Co-authored-by: Harry Ross [SSW] <[email protected]>

---------

Co-authored-by: Harry Ross [SSW] <[email protected]>

.tina/collections/company.tsx

@@ -1,4 +1,5 @@
 import * as Schemas from "../../components/blocks";
+import { testimonialsListSchema } from "../../components/blocks";
 import { videoEmbedBlockSchema } from "../../components/blocks/videoEmbed";
 import { microsoftPanelSchema } from "../../components/offices/microsoftPanel";
 import { seoSchema } from "../../components/util/seo";
@@ -30,7 +31,7 @@ export const companySchema: Collection = {
       type: "rich-text",
       name: "subTitle",
       label: "Body",
-      templates: [videoEmbedBlockSchema],
+      templates: [videoEmbedBlockSchema, testimonialsListSchema],
     },
     {
       type: "rich-text",

components/blocks/index.ts

@@ -36,6 +36,7 @@ import { paymentBlockSchema } from "./payment-block";
 import { recurringEventSchema } from "./recurringEvent";
 import { serviceCardsBlockSchema } from "./serviceCards";
 import { tableBlockSchema } from "./tableLayout";
+import { testimonialsListSchema } from "./testimonialsList";
 import { upcomingEventsBlockSchema } from "./upcomingEvents";
 import { verticalImageLayoutBlockSchema } from "./verticalImageLayout";
 import { verticalListItemSchema } from "./verticalListItem";
@@ -82,6 +83,7 @@ export const pageBlocks: Template[] = [
   joinAsPresenterSchema,
   paymentBlockSchema,
   latestTechSchema,
+  testimonialsListSchema,
 ];
 
 export * from "../bookingButton/bookingButton";
@@ -114,6 +116,7 @@ export * from "./newslettersTable";
 export * from "./recurringEvent";
 export * from "./serviceCards";
 export * from "./tableLayout";
+export * from "./testimonialsList";
 export * from "./upcomingEvents";
 export * from "./verticalImageLayout";
 export * from "./verticalListItem";

components/blocks/mdxComponentRenderer.tsx

@@ -23,6 +23,7 @@ import { GoogleMapsWrapper } from "./googleMapsWrapper";
 import { NewslettersTable } from "./newslettersTable";
 import { RecurringEvent } from "./recurringEvent";
 import { TableLayout, TableLayoutProps } from "./tableLayout";
+import { TestimonialsList } from "./testimonialsList";
 import { UpcomingEvents } from "./upcomingEvents";
 import { VerticalImageLayout } from "./verticalImageLayout";
 import { VerticalListItem } from "./verticalListItem";
@@ -166,6 +167,9 @@ export const componentRenderer: Components<{
     content: TinaMarkdownContent;
   };
   MicrosoftPanel: Record<string, never>;
+  TestimonialsList: {
+    hideInternshipTestimonials: boolean;
+  };
 }> = {
   AgreementForm: (props) => <AgreementForm data={props} />,
   ClientLogos: () => <ClientLogos />,
@@ -193,4 +197,5 @@ export const componentRenderer: Components<{
   UtilityButton: (props) => <UtilityButton {...props} />,
   ContentCard: (props) => <ContentCard data={props} />,
   MicrosoftPanel: () => <MicrosoftPanel />,
+  TestimonialsList: (props) => <TestimonialsList data={props} />,
 };

components/blocks/testimonialsCard.tsx

@@ -0,0 +1,44 @@
+import Image from "next/image";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+import { TestimonialType } from "../../helpers/getTestimonials";
+import { Rating } from "../util/consulting/rating";
+
+const defaultAvatar = "/images/thumbs/avatar-thumbnail.png";
+
+type TestimonialCardProps = {
+  testimonial: TestimonialType;
+};
+
+export const TestimonialCard = ({ testimonial }: TestimonialCardProps) => {
+  return (
+    <div
+      className="flex w-full grow flex-col rounded-md border-b-4 border-b-sswRed bg-gray-100 p-8 text-center text-xl drop-shadow md:min-h-96 md:max-w-sm md:grow-0 md:p-10 md:basis_gap-96-6"
+      data-aos="flip-right"
+      key={testimonial?.name}
+    >
+      <div className="flex flex-col items-center">
+        <Image
+          alt={`Picture of ${testimonial?.name} as an avatar`}
+          src={testimonial?.avatar ?? defaultAvatar}
+          height={120}
+          width={120}
+          quality={90}
+          className="rounded-full"
+        />
+      </div>
+      <Rating className="mx-auto mt-8" rating={testimonial?.rating} />
+      <p className="mt-4 min-h-24">
+        {testimonial?.name}
+        {testimonial?.company && (
+          <>
+            {", "}
+            <span className="font-semibold">{testimonial?.company}</span>
+          </>
+        )}
+      </p>
+      <div className="mt-2 text-sm text-gray-900">
+        <TinaMarkdown content={testimonial?.body} />
+      </div>
+    </div>
+  );
+};

components/blocks/testimonialsList.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import { FaSpinner } from "react-icons/fa";
+import type { Template } from "tinacms";
+import client from "../../.tina/__generated__/client";
+import { TestimonialCard } from "./testimonialsCard";
+
+export const TestimonialsList = ({ data: { hideInternshipTestimonials } }) => {
+  const [testimonials, setTestimonials] = useState([]);
+  const [hasLoaded, setHasLoaded] = useState(false);
+
+  useEffect(() => {
+    if (!hasLoaded) {
+      loadTestimonials();
+    }
+  }, [hasLoaded]);
+
+  const loadTestimonials = () => {
+    client.queries.testimonialsConnection().then((data) => {
+      const testimonials = data.data?.testimonialsConnection?.edges?.map(
+        (edge) => edge?.node
+      );
+
+      const sortedTestimonials = testimonials
+        ?.filter(
+          (testimonial) =>
+            testimonial?.categories !== null &&
+            testimonial?.categories[0]?.category.name !== "Internship"
+        )
+        ?.map((testimonial) => testimonial);
+
+      if (hideInternshipTestimonials) {
+        setTestimonials(sortedTestimonials);
+      } else {
+        setTestimonials(testimonials);
+      }
+      setHasLoaded(true);
+    });
+  };
+
+  return (
+    <>
+      {hasLoaded ? (
+        <div className="mx-auto my-6 flex w-full flex-row flex-wrap items-stretch justify-center gap-6">
+          {testimonials?.map((testimonial, i) => (
+            <TestimonialCard key={i} testimonial={testimonial} />
+          ))}
+        </div>
+      ) : (
+        <>
+          <p className="flex items-center justify-center text-xl">
+            <FaSpinner className="m-icon animate-spin" />
+            Loading Testimonials...
+          </p>
+        </>
+      )}
+    </>
+  );
+};
+
+export const testimonialsListSchema: Template = {
+  name: "TestimonialsList",
+  label: "Testimonials List",
+  fields: [
+    {
+      type: "boolean",
+      label: "Hide Intership Testimonials",
+      name: "hideInternshipTestimonials",
+    },
+  ],
+};

components/testimonials/TestimonialRow.tsx

@@ -1,16 +1,11 @@
-import Image from "next/image";
 import { useEffect, useState } from "react";
 import { useEditState } from "tinacms/dist/react";
-import { TinaMarkdown } from "tinacms/dist/rich-text";
 import {
-  getTestimonialsByCategories,
   TestimonialType,
+  getTestimonialsByCategories,
 } from "../../helpers/getTestimonials";
-import { Rating } from "../util/consulting/rating";
+import { TestimonialCard } from "../blocks/testimonialsCard";
 import { Container } from "../util/container";
-import classNames from "classnames";
-
-const defaultAvatar = "/images/thumbs/avatar-thumbnail.png";
 
 type TestimonialRowProps = {
   testimonialsResult: TestimonialType[];
@@ -56,43 +51,6 @@ export const TestimonialRow = ({
   );
 };
 
-type TestimonialCardProps = {
-  testimonial: TestimonialType;
-};
-
-const TestimonialCard = ({ testimonial }: TestimonialCardProps) => {
-  return (
-    <div
-      className="flex w-full grow flex-col rounded-md border-b-4 border-b-sswRed bg-gray-100 p-8 text-center text-xl drop-shadow md:min-h-96 md:max-w-sm md:grow-0 md:p-10 md:basis_gap-96-6"
-      data-aos="flip-right"
-    >
-      <div className="flex flex-col items-center">
-        <Image
-          alt={`Picture of ${testimonial?.name} as an avatar`}
-          src={testimonial?.avatar ?? defaultAvatar}
-          height={120}
-          width={120}
-          quality={90}
-          className="rounded-full"
-        />
-      </div>
-      <Rating className="mx-auto mt-8" rating={testimonial?.rating} />
-      <p className={classNames("mt-4", testimonial?.company && "min-h-24")}>
-        {testimonial?.name}
-        {testimonial?.company && (
-          <>
-            {", "}
-            <span className="mb-2 font-semibold">{testimonial?.company}</span>
-          </>
-        )}
-      </p>
-      <div className="text-sm text-gray-900">
-        <TinaMarkdown content={testimonial?.body} />
-      </div>
-    </div>
-  );
-};
-
 export const testimonialRowSchema = {
   type: "object",
   label: "Testimonials",

content/company/testimonials.mdx

@@ -0,0 +1,13 @@
+---
+seo:
+  title: Testimonials
+  description: >-
+    Delighting clients worldwide with top-tier Microsoft solutions.
+    Testimonials, scalable services, 30+ years of expertise.
+  showBreadcrumb: true
+subTitle: "#### We go the extra mile to turn our clients into fans\n\nHere's a list of some of\_[our clients](https://www.ssw.com.au/company/clients)' testimonials. From small business solutions to large multinational companies, SSW has made happy clients all over the world and we are proud to share some of our experiences with you.\n\n## About US\n\nSSW's Consulting Services have delivered best of breed Microsoft solutions for more than 1,000 clients in 15 countries. With 40 consultants in 5 countries, SSW's developers are some of the best in the business. We have many Microsoft Certifications, 5 MVPs, and a Microsoft Regional Director.\n\nWe deliver scalable and extensible custom solutions with the future in mind. Our solutions improve businesses' bottom lines, with real time savings and long term value. We will provide you with the competitive advantage you need.\n\nSSW Consulting has over 30 years of experience developing awesome Microsoft solutions that today build on top of Angular, React, Azure, TFS, SharePoint, Office 365, .NET, WebAPI, Dynamics 365 and SQL Server.\n\n[KNOW MORE](https://www.ssw.com.au/company/about-us)\n\n<TestimonialsList hideInternshipTestimonials={true} />\n"
+sidebar: ''
+sidebarTestimonial: ''
+showRdPanel: false
+title: Testimonials
+---

content/testimonials/AndrewJClark.mdx

@@ -0,0 +1,9 @@
+---
+name: Andrew J Clark
+company: The Logistics Linchpin
+rating: -1
+categories:
+  - category: content/testimonialCategories/General.mdx
+---
+
+I wanted to let you know how great it has been working with Kiki over the last two days. Kiki's work has been outstanding and he helped me through a couple of difficult conversations with the client that could have jeopardised the whole progress of not only the implementation of Zendesk but my whole project. Everything is now on track for success thanks to Kiki's work and more particularly his ability to handle an unexpected and tense situation with calm authority.

content/testimonials/BillJohnson.mdx

@@ -0,0 +1,9 @@
+---
+name: Bill Johnson
+company: InfoMet Pty Ltd
+rating: -1
+categories:
+  - category: content/testimonialCategories/General.mdx
+---
+
+SSW Exchange Reporter is an essential tool for anyone trying to monitor their organizations email. We use SSW Exchange Reporter because it generates professional user friendly reports.

content/testimonials/BillRussell.mdx

@@ -0,0 +1,9 @@
+---
+name: Bill Russell
+company: Pioneer Solutions Group
+rating: -1
+categories:
+  - category: content/testimonialCategories/General.mdx
+---
+
+Thanks. The new download [of SSW Access Reporter] is exactly what I needed. Awesome Product!

content/testimonials/BoSearle.mdx

@@ -0,0 +1,9 @@
+---
+name: Bo Searle
+company: Vault - Secure Sovereign Community Cloud
+rating: -1
+categories:
+  - category: content/testimonialCategories/General.mdx
+---
+
+Just wanted to quickly to let you know that David has done a expeciational job for this project. given the challenging landscape of Vault's backend, he is always happy to hear the problems we have and trying his best to work around and find a solution for us. Nothing is ever too much for him so far! I really appreciate his ability to work with a non technical person (myself) to ensure we create a desirable outcome for this project.

content/testimonials/ChristineChang.mdx

@@ -0,0 +1,9 @@
+---
+name: Christine Chang
+company: Tapp Group Limited
+rating: -1
+categories:
+  - category: content/testimonialCategories/General.mdx
+---
+
+Michael and Tiago were invaluable in aiding us to refresh and update our website. Tiago has been very patient and helpful throughout the entire process, guiding me as we worked through what was needed, being accommodating based on my limited knowledge of websites and amending as we continuously reassessed what we needed from SSW. Thank you both for the hard work and patience.

content/testimonials/DanielMurtagh.mdx

@@ -0,0 +1,10 @@
+---
+name: Daniel Murtagh
+company: Bell Shakespeare
+rating: -1
+categories:
+  - category: content/testimonialCategories/General.mdx
+---
+
+I just wanted to drop you a quick line to pass on my sincere thanks and appreciation for Jean's work.
+He has been an absolute pleasure to work on our SharePoint development. He is polite, friendly, solutions focussed, open and honest. I have particularly appreciated his ability to take the time to understand our business needs and to implement solutions that are tailored and customised to suit our needs.

content/testimonials/DavidBlacketer.mdx

@@ -0,0 +1,13 @@
+---
+name: David Blacketer
+company: Berkley IT in Asia Pacific
+rating: -1
+categories:
+  - category: content/testimonialCategories/General.mdx
+---
+
+As we are now 20 plus weeks into our projects with yourselves I wanted to express that I am very happy with the team's productivity and everyone's participation but especially impressed with Jean, Kosta and Matt Wicks.
+Jean's management is very much on point, prompt, detailed, decisive change management, and outcome focused which is a lot of comfort to me as my time investment capability is minimal but appropriate for the project successful delivery.
+The interaction and engagement across our organisations is also working well, efficient, collaborative and all things good that I want in a well-run and successful development project.
+Complements aside, as I have discussed with Jean, I am looking forward to continuing our engagement with this team on 3 follow-on projects already approved and a fourth likely to be aproved before Jan 2021, thanks!
+

content/testimonials/EugeniuJalba.mdx

@@ -0,0 +1,9 @@
+---
+name: Eugeniu Jalba
+company: SSW Event Attendee
+rating: -1
+categories:
+  - category: content/testimonialCategories/General.mdx
+---
+
+Peter, Your great teaching skills, the very interactive session by showing the "correct" way of doing things (including the various alternative methods) made this class outstanding.

content/testimonials/FrancineBinns.mdx

@@ -0,0 +1,9 @@
+---
+name: Francine Binns
+company: IPWEA NSW & ACT
+rating: -1
+categories:
+  - category: content/testimonialCategories/General.mdx
+---
+
+It was a pleasure working with Jayden. He was professional, accommodating, listened and advised when necessary. I've also had positive feedback from IPWEA Australasia.

content/testimonials/FrancisKirby.mdx

@@ -0,0 +1,10 @@
+---
+name: Francis Kirby
+company: BioCurate
+rating: -1
+categories:
+  - category: content/testimonialCategories/General.mdx
+---
+
+I think what the team has done has been great. They've been very responsive and receptive to feedback. The platform they've generated exceeds what I'd first envisioned (i.e., is much higher quality), and of course the fact that we're well below the original cost estimate is also awesome.
+In summary, I think Chris, Alex, Joseph, and yourself have done an amazing job, and I'm looking forward to the internal testing and getting the wider teams feedback.

content/testimonials/Glenn.mdx

@@ -0,0 +1,9 @@
+---
+name: Glenn
+company: Australian Government Organization
+rating: -1
+categories:
+  - category: content/testimonialCategories/General.mdx
+---
+
+I must say that I found Dan and Daragh a pleasure to work with. Easily the best two consultants I have worked with in IT in the last 10 years. Please pass on my positive feedback to anyone relevant at SSW.

content/testimonials/GrantBloxham.mdx

@@ -0,0 +1,10 @@
+---
+name: Grant Bloxham
+company: Bstar
+rating: -1
+categories:
+  - category: content/testimonialCategories/General.mdx
+---
+
+Rebecca has been a pleasure to work with and her insights are highly valued by the Bstar team.
+We started with an idea that will reshape our business and Rebecca has been able to create a user experience we believe will strongly engage our network of accountants and their SME clients.

content/testimonials/KathrynElegino.mdx

@@ -0,0 +1,9 @@
+---
+name: Kathryn Elegino
+company: Smart Group
+rating: -1
+categories:
+  - category: content/testimonialCategories/General.mdx
+---
+
+I'm writing to you to pass on my thanks to your team for the stellar job done. It has been a pleasure working with Jean as he is an upstanding person who genuinely cares about the work he does, and is a true master of his craft.