From 020e5f5087bd22b5e6b15025a4411eff11490c3d Mon Sep 17 00:00:00 2001
From: maria0r <155685142+maria0r@users.noreply.github.com>
Date: Mon, 25 Mar 2024 14:10:14 -0700
Subject: [PATCH] Feat/conscia package sort (#36)

* attempting conscia component sort

* component sort

* undoing conscia install changes

* updating image domain note
---
 packages/conscia/README.md         | 15 +++++++++++++++
 packages/conscia/src/types.ts      |  6 ++++++
 packages/conscia/src/utils/page.ts |  6 +++++-
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/conscia/README.md b/packages/conscia/README.md
index 235752b..cca06d0 100644
--- a/packages/conscia/README.md
+++ b/packages/conscia/README.md
@@ -36,3 +36,18 @@ In order to use data from Conscia, the `cmsRouter` needs to use the `getPage` da
    import { getPage } from '@composable/conscia'
    ```
 
+:::note
+Don't forget to update the `composable-ui/next.config.js` file with the image domains that you will be receiving. Please refer to the Next.JS documentation on `remotePatterns` [here](https://nextjs.org/docs/app/api-reference/components/image#remotepatterns). For example, 
+
+```json
+images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**.contentstack.io',
+        port: '',
+      },
+    ],
+}
+```
+:::
\ No newline at end of file
diff --git a/packages/conscia/src/types.ts b/packages/conscia/src/types.ts
index f399e9b..930d007 100644
--- a/packages/conscia/src/types.ts
+++ b/packages/conscia/src/types.ts
@@ -42,10 +42,12 @@ export type ConsciaHeroBanner = {
     description: string
     url: string
   }
+  sort_order?: number
 }
 
 export type ConsciaCTABanner = {
   __typename: BannerFullProps['__typename']
+  sort_order?: number
   containerMarginBottom?: number
   containerMarginTop?: number
   containerSize: BannerFullProps['containerSize']
@@ -67,6 +69,7 @@ export type ConsciaCTABanner = {
 
 export type ConsciaFeatureCardsHeader = {
   __typename: BannerTextOnlyProps['__typename']
+  sort_order?: number
   centered: BannerTextOnlyProps['centered']
   id: BannerTextOnlyProps['id']
   content: BannerTextOnlyProps['content']
@@ -77,6 +80,7 @@ export type ConsciaFeatureCardsHeader = {
 
 export interface ConsciaFeaturedProducts {
   __typename: CommerceConnectorProps['__typename']
+  sort_order?: number
   id: CommerceConnectorProps['id']
   title: CommerceConnectorProps['title']
   containerMarginBottom?: number
@@ -91,6 +95,7 @@ export interface ConsciaFeaturedProducts {
 
 export type ConsciaGrid = {
   __typename: GridProps['__typename']
+  sort_order?: number
   id: GridProps['id']
   columns: GridProps['columns']
   containerMarginBottom?: number
@@ -102,6 +107,7 @@ export type ConsciaGrid = {
 
 export type ConsciaTextCard = {
   __typename: TextCardProps['__typename']
+  sort_order?: number
   id: TextCardProps['id']
   title: TextCardProps['title']
   image: {
diff --git a/packages/conscia/src/utils/page.ts b/packages/conscia/src/utils/page.ts
index a75dea9..e03c03d 100644
--- a/packages/conscia/src/utils/page.ts
+++ b/packages/conscia/src/utils/page.ts
@@ -30,7 +30,11 @@ export const transformPage = ({
   return {
     __typename: 'pageSlug',
     id: pageSlug,
-    items: Object.values(consciaPage.components).map(transformPageComponent),
+    items: Object.values(consciaPage.components)
+      .sort((a, b) => {
+        return (a.response.sort_order ?? 0) - (b.response.sort_order ?? 0)
+      })
+      .map(transformPageComponent),
     metaDescription: '',
     metaKeywords: [],
     metaTitle: '',