feat: added published state

package.json

@@ -116,6 +116,7 @@
     "@types/dateformat": "^5.0.0",
     "@types/lodash.debounce": "^4.0.6",
     "@types/mapbox-gl": "^2.6.0",
+    "@types/micro": "^7.3.7",
     "@types/node": "16.11.10",
     "@types/react": "17.0.37",
     "@types/react-google-recaptcha": "^2.1.5",

pages/api/create-stripe-session.ts

@@ -3,19 +3,20 @@ import { getHomeTypes } from 'src/store/static'
 const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY)
 
 async function CreateStripeSession(
-  req: { body: { homeData: any } },
+  req: { body: { id: string; plan: number; imgs: string[]; address: string } },
   res: { json: (arg0: { id: any }) => void }
 ) {
-  const { homeData } = req.body
+  const { id, plan: planID, imgs, address } = req.body
 
-  const plan = getHomeTypes(homeData.plan)
+  const plan = getHomeTypes(planID)
 
   const transformedItem = {
     price_data: {
       currency: 'usd',
       product_data: {
-        images: [homeData.imgs && homeData.imgs[0]],
+        images: [imgs && imgs[0]],
         name: plan.displayName,
+        description: address,
       },
       unit_amount: plan.price * 100,
     },
@@ -32,10 +33,11 @@ async function CreateStripeSession(
     payment_method_types: ['card'],
     line_items: [transformedItem],
     mode: 'payment',
-    success_url: `${redirectURL}/homes`,
+    success_url: `${redirectURL}/homes/${id}`,
     cancel_url: `${redirectURL}/homes/new`,
     metadata: {
-      homeData: JSON.stringify(homeData),
+      id,
+      plan: planID,
     },
   })
 

pages/api/webhook/index.js

@@ -2,7 +2,7 @@
 import Stripe from 'stripe'
 import { buffer } from 'micro'
 import { urqlAdminClient } from 'src/lib/client'
-import { InsertHomeDocument } from 'src/generated/graphql'
+import { SetHomePlanDocument } from 'src/generated/graphql'
 
 const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)
 
@@ -47,11 +47,10 @@ export default async function handler(req, res) {
         event.data.object.metadata
       )
 
-      const { homeData } = event.data.object.metadata
+      const { id, plan } = event.data.object.metadata
 
-      console.log('homeData: ', homeData)
       urqlAdminClient
-        .mutation(InsertHomeDocument, { object: JSON.parse(homeData) })
+        .mutation(SetHomePlanDocument, { id, plan })
         .toPromise()
         .then((result) => {
           console.log('Success after mutation: ', JSON.stringify(result))

pages/home/[id]/index.tsx → pages/homes/[id].tsx

@@ -64,13 +64,19 @@ export const getStaticProps: GetStaticProps<{}, Params> = async (context) => {
   // By returning { props: { posts } }, the Blog component
   // will receive `posts` as a prop at build time
 
-  const id = context.params?.id
+  const id = context.params?.id || -90
   await client?.query(GetHomeDocument, { id }).toPromise()
 
+  const props = {
+    props: JSON.parse(
+      JSON.stringify({
+        urqlState: ssrCache.extractData() || null,
+      })
+    ),
+  }
+
   return {
-    props: {
-      urqlState: ssrCache.extractData(),
-    },
+    props,
   }
 }
 

pages/wishlist.tsx

@@ -49,7 +49,7 @@ const WishlistPage: NextPage = () => {
       <Grid>
         {data?.wishlisted.map((item) => (
           <div key={item.id} className='relative'>
-            <Link href={`/home/${item.hId}`}>
+            <Link href={`/homes/${item.hId}`}>
               <Image
                 alt=''
                 className='h-full rounded'

src/components/molecules/HScroll/HScroll.tsx

@@ -81,7 +81,7 @@ const HScrollBody = ({ children, className }: HScrollBodyProps) => {
     <div
       ref={scrollEl}
       onScroll={scrollListener}
-      className={`flex w-full py-3 space-x-2 thin-scrollbar overflow-x-scroll snap-x snap-mandatory scrollbar-hide ${className}`}
+      className={`flex w-full py-3 space-x-2 thin-scrollbar overscroll-x-none overflow-x-scroll snap-x snap-mandatory scrollbar-hide ${className}`}
     >
       {children}
     </div>

src/components/molecules/MapMarker/MapMarker.tsx

@@ -27,10 +27,10 @@ const MapMarker = ({ home, highlighted, wishlisted }: IMapMarkerProps) => {
 
   const highlightedClasses =
     highlighted &&
-    'text-primary-700 scale-150 opacity-100  border border-primary-700 rounded bg-white'
+    'fill-primary scale-110  opacity-100  border border-primary  bg-white'
 
   const wishlistedClasses =
-    wishlisted && 'text-red-600 fill-red-600 scale-150 border-red-600 '
+    wishlisted && 'text-red fill-red border-red scale-110  '
 
   return (
     <Marker latitude={home.lat} longitude={home.lng}>
@@ -53,7 +53,7 @@ const MapMarker = ({ home, highlighted, wishlisted }: IMapMarkerProps) => {
           )
         }}
         // onMouseLeave={() => debouncedDispatch(setHighlightedHomeId(null))}
-        className={`w-5 h-5 opacity-90  text-primary-900 transition-all shadow-2xl cursor-pointer ease-in-out duration-200 relative ${highlightedClasses} ${wishlistedClasses}`}
+        className={`w-5 h-5 opacity-90  text-primary-900 transition-all shadow-2xl cursor-pointer ease-in-out duration-200 rounded relative ${highlightedClasses} ${wishlistedClasses}`}
       />
     </Marker>
   )

src/components/organisms/AgentContactForm/AgentContactForm.tsx

@@ -33,8 +33,7 @@ export const FormError = ({ error }: { error: FieldError | undefined }) => {
   if (error) {
     return (
       <div className='mt-1 text-sm text-gray-900'>
-        <ExclamationIcon className='inline w-4 h-4 text-red-600' />{' '}
-        {error.message}
+        <ExclamationIcon className='inline w-4 h-4 text-red' /> {error.message}
       </div>
     )
   }

src/components/organisms/Mapbox/Mapbox.tsx

@@ -3,6 +3,7 @@ import React, { ReactElement } from 'react'
 import ReactMapGL, {
   InteractiveMapProps,
   FlyToInterpolator,
+  LinearInterpolator,
 } from 'react-map-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
 
@@ -43,8 +44,8 @@ const MapBox = ({
       onViewportChange={({ latitude, longitude, zoom }: Viewport) => {
         setViewport({ latitude, longitude, zoom })
       }}
-      transitionDuration='auto'
-      transitionInterpolator={new FlyToInterpolator()}
+      // transitionDuration='auto'
+      // transitionInterpolator={new LinearInterpolator()}
       {...props}
       className={`rounded ${className}`}
       data-chromatic='ignore'

src/components/organisms/MapboxContent/MapboxContent.tsx

@@ -102,7 +102,7 @@ export const FetchingBool = ({ fetching }: { fetching: boolean }) =>
 export const Error = () => {
   const error = useAppSelector(selectMapError)
   return error ? (
-    <div className='px-4 py-2 text-white bg-red-600 rounded-full shadow-xl'>
+    <div className='px-4 py-2 text-white rounded-full shadow-xl bg-red'>
       Someting went wrong.
     </div>
   ) : null
@@ -117,7 +117,7 @@ export const MapMessage = ({ message }: { message: string | null }) =>
 
 export const ErrorBool = ({ error }: { error: string | null }) =>
   error ? (
-    <div className='px-4 py-2 text-white border border-red-600 rounded-full shadow-xl shadow-black/30 bg-red-600/60'>
+    <div className='px-4 py-2 text-white border rounded-full shadow-xl border-red shadow-black/30 bg-red/60'>
       {error}
     </div>
   ) : null

src/components/organisms/MessageCard/MessageCard.tsx

@@ -21,7 +21,7 @@ const MessageCard = ({
   return (
     <div className='flex gap-3 overflow-hidden rounded '>
       <div className='w-24 '>
-        <Link href={`/home/${id}`}>
+        <Link href={`/homes/${id}`}>
           <Image
             alt=''
             className='w-full h-24 rounded'

src/components/organisms/PopupHomesContent/PopupHomesContent.tsx

@@ -43,7 +43,7 @@ const PopupHomesContent = ({ id, wishlisted }: IPopupHomesContentProps) => {
 
   return (
     <div className='flex flex-col w-48 '>
-      <Link href={`/home/${id}`}>
+      <Link href={`/homes/${id}`}>
         <div className='relative h-36'>
           <Image
             src='https://via.placeholder.com/150'
@@ -77,9 +77,9 @@ const PopupHomesContent = ({ id, wishlisted }: IPopupHomesContentProps) => {
               }}
             >
               {!wishlisted ? (
-                <HeartIconReg className='w-6 h-6 text-red-600 hover:fill-red-100' />
+                <HeartIconReg className='w-6 h-6 text-red hover:fill-red-100' />
               ) : (
-                <HeartIconSolid className='w-6 h-6 fill-red-600' />
+                <HeartIconSolid className='w-6 h-6 fill-red' />
               )}
             </button>
           </div>
@@ -96,7 +96,7 @@ const PopupHomesContent = ({ id, wishlisted }: IPopupHomesContentProps) => {
           </div>
         </div>
         <Link
-          href={`/home/${id}`}
+          href={`/homes/${id}`}
           className='p-2 text-xs bg-gray-50 line-clamp-2'
         >
           {data?.homes_by_pk?.address || ''}

src/components/organisms/ProductListingResults/ProductListingResults.tsx

@@ -92,6 +92,7 @@ const ProductListingResult = () => {
               address={item.address}
               bath={item.bath}
               beds={item.beds}
+              imgs={item.imgs}
               plan={item.plan}
               price={item.price}
               sqft={item.sqft}

src/components/organisms/ProductPageCarousel/ProductPageCarousel.stories.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import ProductPageCarousel from './ProductPageCarousel'
+import ProductPageCarousel, { dummyImagedData } from './ProductPageCarousel'
 
 export default {
   title: 'organisms/ProductPageCarousel',
   component: ProductPageCarousel,
 } as ComponentMeta<typeof ProductPageCarousel>
 
 const Template: ComponentStory<typeof ProductPageCarousel> = () => (
-  <ProductPageCarousel />
+  <ProductPageCarousel imgs={dummyImagedData.map((item) => item.src)} />
 )
 
 export const Primary = Template.bind({})

src/components/organisms/ProductPageCarousel/ProductPageCarousel.test.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import ProductPageCarousel from './ProductPageCarousel'
+import ProductPageCarousel, { dummyImagedData } from './ProductPageCarousel'
 
 describe('ProductPageCarousel Component', () => {
   test('ProductPageCarousel renders', () => {
-    render(<ProductPageCarousel />)
+    render(
+      <ProductPageCarousel imgs={dummyImagedData.map((item) => item.src)} />
+    )
   })
 })

src/components/organisms/ProductPageCarousel/ProductPageCarousel.tsx

@@ -3,7 +3,7 @@ import Image from 'src/components/atoms/Image'
 import HScroll from 'src/components/molecules/HScroll'
 
 export interface IProductPageCarouselProps {}
-const data = [
+export const dummyImagedData = [
   {
     id: '0',
     src: 'https://res.cloudinary.com/thankyou/image/upload/v1640667691/nike/rowan-heuvel-bjej8BY1JYQ-unsplash_ekhbh0.jpg',
@@ -54,20 +54,26 @@ const data = [
   },
 ]
 
-const ProductPageCarousel = () => {
+const ProductPageCarousel = ({ imgs }: { imgs: string[] }) => {
   const [selected, setSelected] = useState(0)
+
+  const updatedImgs = [
+    ...(imgs || []).map((item) => ({ id: item, src: item })),
+    ...dummyImagedData,
+  ]
+
   return (
-    <div className='min-h-[30rem] flex flex-col'>
+    <div className='min-h-[36rem] flex flex-col'>
       <Image
-        key={data[selected].id}
-        src={data[selected].src}
+        key={updatedImgs[selected].id}
+        src={updatedImgs[selected].src}
         alt=''
         className='flex-grow h-full border border-white rounded-lg bg-primary/10 '
       />
 
       <HScroll className='relative flex h-28'>
         <HScroll.Body>
-          {data.map((item, index) => (
+          {updatedImgs.map((item, index) => (
             <HScroll.Child key={item.id}>
               <Image
                 src={item.src}

src/components/organisms/PropertyCard/PropertyCard.tsx

@@ -35,6 +35,7 @@ const PropertyCard = ({
   beds,
   bath,
   price,
+  imgs,
   plan,
   sqft,
   wishlisted,
@@ -54,11 +55,14 @@ const PropertyCard = ({
       onFocus={() => startLongHoverDispatch(setHighlightedHomeId(id))}
       onMouseLeave={() => stopLongHoverDispatch()}
     >
-      <Link href={`/home/${id}`}>
+      <Link href={`/homes/${id}`}>
         <div className='relative overflow-hidden border border-white rounded-md shadow-lg h-80'>
           <Image
             className='absolute h-full transition-transform duration-1000 scale-105 rounded hover:scale-100'
-            src='https://res.cloudinary.com/thankyou/image/upload/v1640667691/nike/rowan-heuvel-bjej8BY1JYQ-unsplash_ekhbh0.jpg'
+            src={
+              (imgs && imgs[0]) ||
+              'https://res.cloudinary.com/thankyou/image/upload/v1640667691/nike/rowan-heuvel-bjej8BY1JYQ-unsplash_ekhbh0.jpg'
+            }
             alt=''
           />
           {plan && (
@@ -94,7 +98,7 @@ const PropertyCard = ({
               {!wishlisted ? (
                 <HeartIconReg className='w-8 h-8 p-1' />
               ) : (
-                <HeartIconSolid className='w-8 h-8 p-1 fill-red-600' />
+                <HeartIconSolid className='w-8 h-8 p-1 fill-red' />
               )}
             </button>
           </div>