diff --git a/src/app/(main)/testimonials/page.tsx b/src/app/(main)/testimonials/page.tsx index 2ef089b..b580993 100644 --- a/src/app/(main)/testimonials/page.tsx +++ b/src/app/(main)/testimonials/page.tsx @@ -1,13 +1,15 @@ import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter"; import { GoogleReviewsBlock } from "@/components/Blocks/GoogleReviews"; +import { GoogleReviewsSkeleton } from "@/components/Blocks/GoogleReviews/GoogleReviews"; import Image from "next/image"; +import { Suspense } from "react"; export const metadata = { title: "Testimonials - Cochise Oncology", description: "Testimonials - Cochise Oncology", }; -export default function SlickAboutPage() { +export default async function TestimonialsPage() { return ( <>
@@ -26,7 +28,9 @@ export default function SlickAboutPage() {
- + }> + +
diff --git a/src/collections/BlogTags.tsx b/src/collections/BlogTags.ts similarity index 100% rename from src/collections/BlogTags.tsx rename to src/collections/BlogTags.ts diff --git a/src/components/Blocks/GoogleReviews/GoogleReviews.tsx b/src/components/Blocks/GoogleReviews/GoogleReviews.tsx new file mode 100644 index 0000000..177d43c --- /dev/null +++ b/src/components/Blocks/GoogleReviews/GoogleReviews.tsx @@ -0,0 +1,188 @@ +"use client"; + +import { CardStarRating, CardStarRatingProps, CardStarRatingSkeleton } from "@/components/Ratings/CardStarRating"; +import StarRating from "@/components/Ratings/StarRating"; +import Image from "next/image"; +import { Navigation } from "swiper/modules"; +import { Swiper, SwiperSlide } from "swiper/react"; + +export interface GoogleReviewProps { + data: { + ratingValue: number; + totalRating: number; + data: CardStarRatingProps["data"][]; + }; +} + +export function GoogleReviews({ data }: GoogleReviewProps) { + return ( +
+
+
+
+ Image Description +
+
+ Image Description +
+ +
+

Reviews

+ +
+

{data.ratingValue}

+
+ +
+
Over {data.totalRating} Reviews
+
+ +
+ + {/* Group item */} + {data.data.map((rev, index) => ( + +
+ +
+ + ))} +
+
+
+ Previous Slide + +
+
+ Next Slide + +
+
+
+ {/* End Group item */} + +
+
+
+ ); +} + +export function GoogleReviewsSkeleton() { + return ( +
+
+
+
+ Image Description +
+
+ Image Description +
+ +
+

Reviews

+ + + +
+
+ ); +} + +function GoogleReviewsHeaderSkeleton() { + return ( +
+
+
+ ); +} + +function GoogleReviewsContentSkeleton() { + return ( +
+ + {/* Group item */} + + + + + + + + + + + + + +
+
+
+ Previous Slide + +
+
+ Next Slide + +
+
+
+ {/* End Group item */} + +
+ ); +} diff --git a/src/components/Blocks/GoogleReviews/index.tsx b/src/components/Blocks/GoogleReviews/index.tsx index 44ff184..750b0ff 100644 --- a/src/components/Blocks/GoogleReviews/index.tsx +++ b/src/components/Blocks/GoogleReviews/index.tsx @@ -1,130 +1,66 @@ -"use client"; +import { fetchGoogleReviews } from "@/services/payload/google-reviews"; +import { GoogleReviewProps, GoogleReviews } from "./GoogleReviews"; -import { CardStarRating, CardStarRatingProps } from "@/components/Ratings/CardStarRating"; -import StarRating from "@/components/Ratings/StarRating"; -import Image from "next/image"; -import { Navigation } from "swiper/modules"; -import { Swiper, SwiperSlide } from "swiper/react"; +// const data: CardStarRatingProps["data"][] = [ +// { +// star: 5, +// description: +// "Today i did my cat scan , and met Raymond, he radiates hope and good will, i then met Larry who showed me the hospitality suite, i was overwhelmed by thier kindness, every one i have met so far has been truly amazing.while at physical therapy the doc said i had made a wise", +// }, +// { +// star: 5, +// description: "Great and caring service. Completely satisfied.", +// }, +// { +// star: 5, +// description: "Sincere and caring attitude...very professional and inspires confidence.", +// }, +// { +// star: 5, +// description: +// "I've been going to cochise oncology for many years and everyone is always professional and take the time to explain everything", +// }, +// { +// star: 5, +// description: "One fine person\n Very concerning. Glad to see her", +// }, +// { +// star: 5, +// description: +// "Barbara was very professional and friendly. She shared all info with me and gave me a copy of my lab results.", +// }, +// { +// star: 5, +// description: +// "Barbara is great! She listens and ask questions on other issues outside her area just to be sure you’re well taken care of.", +// }, +// { +// star: 5, +// description: +// "Today, at Cochise Oncology, I had an appointment with Dr. Reid Culton. He explained in great detail from the medical chart of the blood work and listen to my concerns. Dr. Reid Culton also answered my questions in great detail. Thank you.", +// }, +// { +// star: 5, +// description: +// "I absolutely love the people that work at this place. From the front desk to radiation room. Everyone is loving and caring.", +// }, +// ]; -const data: CardStarRatingProps["data"][] = [ - { - star: 5, - description: - "Today i did my cat scan , and met Raymond, he radiates hope and good will, i then met Larry who showed me the hospitality suite, i was overwhelmed by thier kindness, every one i have met so far has been truly amazing.while at physical therapy the doc said i had made a wise", - }, - { - star: 5, - description: "Great and caring service. Completely satisfied.", - }, - { - star: 5, - description: "Sincere and caring attitude...very professional and inspires confidence.", - }, - { - star: 5, - description: - "I've been going to cochise oncology for many years and everyone is always professional and take the time to explain everything", - }, - { - star: 5, - description: "One fine person\n Very concerning. Glad to see her", - }, - { - star: 5, - description: - "Barbara was very professional and friendly. She shared all info with me and gave me a copy of my lab results.", - }, - { - star: 5, - description: - "Barbara is great! She listens and ask questions on other issues outside her area just to be sure you’re well taken care of.", - }, - { - star: 5, - description: - "Today, at Cochise Oncology, I had an appointment with Dr. Reid Culton. He explained in great detail from the medical chart of the blood work and listen to my concerns. Dr. Reid Culton also answered my questions in great detail. Thank you.", - }, - { - star: 5, - description: - "I absolutely love the people that work at this place. From the front desk to radiation room. Everyone is loving and caring.", - }, -]; +export async function GoogleReviewsBlock() { + const data = await fetchGoogleReviews(); + if (!data?.id) return <>; -export function GoogleReviewsBlock() { - return ( -
-
-
-
- Image Description -
-
- Image Description -
+ const dataReviews: GoogleReviewProps["data"] = { + data: + data.ratings?.map?.((r) => { + return { + star: r.ratingValue, + description: r.description, + }; + }) ?? [], + ratingValue: data.ratingValue, + totalRating: data.totalRating, + }; -
-

Reviews

-
-

4.8

-
- -
-
Over 200 Reviews
-
-
- - {/* Group item */} - {data.map((rev, index) => ( - -
- -
- - ))} -
-
-
- Previous Slide - -
-
- Next Slide - -
-
-
- {/* End Group item */} - -
-
-
- ); + return ; } diff --git a/src/components/Ratings/CardStarRating.tsx b/src/components/Ratings/CardStarRating.tsx index 94c716a..45fe257 100644 --- a/src/components/Ratings/CardStarRating.tsx +++ b/src/components/Ratings/CardStarRating.tsx @@ -19,3 +19,15 @@ export function CardStarRating({ data }: CardStarRatingProps) { ); } + +export function CardStarRatingSkeleton() { + return ( +
+
+
+
+
+
+
+ ); +} diff --git a/src/components/Testimonials.tsx b/src/components/Testimonials.tsx index 488b7a8..cde9ddb 100644 --- a/src/components/Testimonials.tsx +++ b/src/components/Testimonials.tsx @@ -1,6 +1,6 @@ -"use client"; - +import { Suspense } from "react"; import { GoogleReviewsBlock } from "./Blocks/GoogleReviews"; +import { GoogleReviewsSkeleton } from "./Blocks/GoogleReviews/GoogleReviews"; export default function Testimonials() { // const isotopContainer = useRef(null); @@ -28,7 +28,9 @@ export default function Testimonials() { */} - + }> + + ); } diff --git a/src/globals/GoogleReviews.ts b/src/globals/GoogleReviews.ts new file mode 100644 index 0000000..f8d19c9 --- /dev/null +++ b/src/globals/GoogleReviews.ts @@ -0,0 +1,42 @@ +import type { GlobalConfig } from "payload"; + +export const GoogleReviews: GlobalConfig = { + slug: "google-reviews", + fields: [ + { + name: "ratingValue", + label: "Rating Value", + type: "number", + required: true, + defaultValue: 0, + }, + { + name: "totalRating", + type: "number", + required: true, + defaultValue: 0, + }, + { + label: "Ratings", + name: "ratings", + type: "array", + fields: [ + { + name: "ratingValue", + label: "Rating Value", + type: "number", + required: true, + defaultValue: 0, + }, + { + name: "description", + type: "textarea", + required: true, + }, + ], + }, + ], + admin: { + hideAPIURL: true, + }, +}; diff --git a/src/payload-types.ts b/src/payload-types.ts index 54ef629..1e03980 100644 --- a/src/payload-types.ts +++ b/src/payload-types.ts @@ -42,8 +42,12 @@ export interface Config { db: { defaultIDType: number; }; - globals: {}; - globalsSelect: {}; + globals: { + 'google-reviews': GoogleReview; + }; + globalsSelect: { + 'google-reviews': GoogleReviewsSelect | GoogleReviewsSelect; + }; locale: null; user: User & { collection: 'users'; @@ -893,6 +897,42 @@ export interface PayloadMigrationsSelect { updatedAt?: T; createdAt?: T; } +/** + * This interface was referenced by `Config`'s JSON-Schema + * via the `definition` "google-reviews". + */ +export interface GoogleReview { + id: number; + ratingValue: number; + totalRating: number; + ratings?: + | { + ratingValue: number; + description: string; + id?: string | null; + }[] + | null; + updatedAt?: string | null; + createdAt?: string | null; +} +/** + * This interface was referenced by `Config`'s JSON-Schema + * via the `definition` "google-reviews_select". + */ +export interface GoogleReviewsSelect { + ratingValue?: T; + totalRating?: T; + ratings?: + | T + | { + ratingValue?: T; + description?: T; + id?: T; + }; + updatedAt?: T; + createdAt?: T; + globalType?: T; +} /** * This interface was referenced by `Config`'s JSON-Schema * via the `definition` "auth". diff --git a/src/payload.config.ts b/src/payload.config.ts index aa3f29b..d4c41bf 100644 --- a/src/payload.config.ts +++ b/src/payload.config.ts @@ -24,6 +24,7 @@ import { lexicalEditor, LinkFeature, } from "@payloadcms/richtext-lexical"; +import { GoogleReviews } from "@/globals/GoogleReviews"; const filename = fileURLToPath(import.meta.url); const dirname = path.dirname(filename); @@ -50,6 +51,7 @@ export default buildConfig({ theme: "dark", }, collections: [Users, Media, Blogs, Pages, Teams, BlogCategories, BlogTags], + globals: [GoogleReviews], secret: process.env.PAYLOAD_SECRET || "", typescript: { outputFile: path.resolve(dirname, "payload-types.ts"), diff --git a/src/services/payload/google-reviews.ts b/src/services/payload/google-reviews.ts new file mode 100644 index 0000000..069637c --- /dev/null +++ b/src/services/payload/google-reviews.ts @@ -0,0 +1,8 @@ +import payloadConfig from "@/payload.config"; +import { getPayload } from "payload"; + +export async function fetchGoogleReviews() { + const payload = await getPayload({ config: payloadConfig }); + const dataQuery = await payload.findGlobal({ slug: "google-reviews" }); + return dataQuery; +}