Merge commit '06c8fb85356ccad9a7de745e2648e365af1a8da5'

app/apis/common/get-subscriptions.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const subscriptionSchema = z.object({
+  data: z.array(
+    z.object({
+      id: z.string(),
+      code: z.string(),
+      name: z.string(),
+    }),
+  ),
+})
+
+export const getSubscriptions = async (parameters?: THttpServer) => {
+  try {
+    const { data } = await HttpServer(parameters).get(`/api/subscribe-plan`)
+    return subscriptionSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/news/register.ts

@@ -11,7 +11,15 @@ const loginResponseSchema = z.object({
 
 export const newsRegisterRequest = async (payload: TRegisterSchema) => {
   try {
-    const { data } = await HttpServer().post('/api/user/register', payload)
+    const { subscription, ...restPayload } = payload
+    const transformedPayload = {
+      ...restPayload,
+      subscribe_plan_id: subscription,
+    }
+    const { data } = await HttpServer().post(
+      '/api/user/register',
+      transformedPayload,
+    )
     return loginResponseSchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject

app/app.css

@@ -41,7 +41,7 @@ table.dataTable tbody > tr > td {
   min-width: 0;
 } */
 
-.embla__slide {
+/* .embla__slide {
   margin-right: 10px;
   flex: 0 0 auto;
   min-width: 0;
@@ -51,4 +51,4 @@ table.dataTable tbody > tr > td {
   .embla__slide {
     margin-right: 30px;
   }
-}
+} */

app/components/ui/banner.tsx

@@ -4,7 +4,7 @@ import { APP } from '~/configs/meta'
 
 export const Banner = () => {
   return (
-    <div className="min-h-[65px] sm:mx-10">
+    <div className="min-h-[65px]">
       <div className="relative">
         <Link
           to="/#"

app/components/ui/button.tsx

@@ -1,3 +1,4 @@
+import { Button as HeadlessButton } from '@headlessui/react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import type { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react'
 import { twMerge } from 'tailwind-merge'
@@ -52,7 +53,7 @@ export const Button = <C extends ElementType = 'button'>({
   className,
   ...properties
 }: ButtonProperties<C>) => {
-  const Component = as || 'button'
+  const Component = as || HeadlessButton
   const classes = twMerge(buttonVariants({ variant, size, className }))
 
   return (

app/components/ui/carousel-section.tsx

@@ -1,6 +1,7 @@
 import useEmblaCarousel from 'embla-carousel-react'
 import { useCallback } from 'react'
 import { Link } from 'react-router'
+import { twMerge } from 'tailwind-merge'
 
 import { CarouselNextIcon } from '~/components/icons/carousel-next'
 import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
@@ -54,7 +55,7 @@ export const CarouselSection = (properties: TNews) => {
         className="embla overflow-hidden"
         ref={emblaReference}
       >
-        <div className="embla__container col-span-3 flex max-h-[586px]">
+        {/* <div className="embla__container col-span-3 flex max-h-[586px]">
           {items.map(
             ({ featured, title, content, tags, slug, isPremium }, index) => (
               <div
@@ -111,8 +112,173 @@ export const CarouselSection = (properties: TNews) => {
               </div>
             ),
           )}
+        </div> */}
+        <div className="embla__container grid sm:auto-cols-[31%] sm:grid-flow-col sm:gap-x-8">
+          {items.map(
+            ({ featured, title, content, tags, slug, isPremium }, index) => (
+              <div
+                key={index}
+                className={twMerge('embla__slide grid sm:gap-x-8')}
+              >
+                <img
+                  className={twMerge(
+                    'aspect-[5/4] w-full rounded-md object-cover',
+                  )}
+                  src={featured}
+                  alt={title}
+                />
+                <div className={twMerge('flex flex-col justify-between gap-4')}>
+                  <div
+                    className={twMerge(
+                      'my-3 flex gap-2 uppercase max-sm:text-sm',
+                    )}
+                  >
+                    {tags?.map((item) => (
+                      <span
+                        key={index}
+                        className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
+                      >
+                        {item}
+                      </span>
+                    ))}
+                    {isPremium && (
+                      <span className="inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
+                        Premium Content
+                      </span>
+                    )}
+                  </div>
+
+                  <div>
+                    <h3
+                      className={twMerge(
+                        'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
+                      )}
+                    >
+                      {title}
+                    </h3>
+                    <p className="text-md mt-5 text-[#777777] sm:text-xl">
+                      {content}
+                    </p>
+                  </div>
+                  <Button
+                    size="block"
+                    {...(isPremium
+                      ? {
+                          onClick: () => {
+                            setIsSuccessOpen('warning')
+                          },
+                          to: '',
+                        }
+                      : { as: Link, to: `/detail/${slug}` })}
+                    className="mb-5"
+                  >
+                    View More
+                  </Button>
+                </div>
+              </div>
+            ),
+          )}
         </div>
       </div>
     </div>
+
+    // <div className="">
+    //   <div className="mt-3 mb-3 flex items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
+    //     <div className="grid">
+    //       <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
+    //         {title}
+    //       </h2>
+    //       <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
+    //         {description}
+    //       </p>
+    //     </div>
+    //   </div>
+
+    //   <div className={twMerge('grid sm:grid-cols-3 sm:gap-x-8')}>
+    //     {items.map(
+    //       ({ featured, title, content, tags, slug, isPremium }, index) => (
+    //         <div
+    //           key={index}
+    //           className={twMerge('grid sm:gap-x-8')}
+    //         >
+    //           <img
+    //             className={twMerge(
+    //               'aspect-[5/4] w-full rounded-md object-cover',
+    //             )}
+    //             src={featured}
+    //             alt={title}
+    //           />
+    //           <div className={twMerge('flex flex-col justify-between gap-4')}>
+    //             <div
+    //               className={twMerge(
+    //                 'my-3 flex gap-2 uppercase max-sm:text-sm',
+    //               )}
+    //             >
+    //               {tags?.map((item) => (
+    //                 <span
+    //                   key={index}
+    //                   className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
+    //                 >
+    //                   {item}
+    //                 </span>
+    //               ))}
+    //               {isPremium && (
+    //                 <span className="inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
+    //                   Premium Content
+    //                 </span>
+    //               )}
+    //             </div>
+
+    //             <div>
+    //               <h3
+    //                 className={twMerge(
+    //                   'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
+    //                 )}
+    //               >
+    //                 {title}
+    //               </h3>
+    //               <p className="text-md mt-5 text-[#777777] sm:text-xl">
+    //                 {content}
+    //               </p>
+    //             </div>
+    //             <Button
+    //               size="block"
+    //               {...(isPremium
+    //                 ? {
+    //                     onClick: () => {
+    //                       setIsSuccessOpen('warning')
+    //                     },
+    //                     to: '',
+    //                   }
+    //                 : { as: Link, to: `/detail/${slug}` })}
+    //               className="mb-5"
+    //             >
+    //               View More
+    //             </Button>
+    //           </div>
+    //         </div>
+    //       ),
+    //     )}
+    //   </div>
+
+    //   <div className="my-5 mt-5 flex flex-row-reverse">
+    //     <div className="flex gap-2.5">
+    //       <CarouselPreviousIcon
+    //         color="#DCDCDC"
+    //         className="cursor-pointer"
+    //         width={45}
+    //         height={45}
+    //         onClick={previousSlide}
+    //       />
+    //       <CarouselNextIcon
+    //         color="#2E2F7C"
+    //         className="cursor-pointer"
+    //         width={45}
+    //         height={45}
+    //         onClick={nextSlide}
+    //       />
+    //     </div>
+    //   </div>
+    // </div>
   )
 }

app/components/ui/category-section.tsx

@@ -0,0 +1,123 @@
+import { Link } from 'react-router'
+import { twMerge } from 'tailwind-merge'
+
+import { CarouselNextIcon } from '~/components/icons/carousel-next'
+import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
+import { Button } from '~/components/ui/button'
+import { useNewsContext } from '~/contexts/news'
+import type { TNews } from '~/types/news'
+
+export const CategorySection = (properties: TNews) => {
+  const { setIsSuccessOpen } = useNewsContext()
+
+  const { title, description, items } = properties
+
+  const nextSlide = () => {
+    // patch data next page
+  }
+
+  const previousSlide = () => {
+    // patch previous page
+  }
+
+  return (
+    <div className="">
+      <div className="mt-3 mb-3 flex items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
+        <div className="grid">
+          <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
+            {title}
+          </h2>
+          <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
+            {description}
+          </p>
+        </div>
+      </div>
+
+      <div className="grid sm:grid-cols-3 sm:gap-x-8">
+        {items.map(
+          ({ featured, title, content, tags, slug, isPremium }, index) => (
+            <div
+              key={index}
+              className={twMerge('grid sm:gap-x-8')}
+            >
+              <img
+                className={twMerge(
+                  'aspect-[5/4] w-full rounded-md object-cover',
+                )}
+                src={featured}
+                alt={title}
+              />
+              <div className={twMerge('flex flex-col justify-between gap-4')}>
+                <div
+                  className={twMerge(
+                    'my-3 flex gap-2 uppercase max-sm:text-sm',
+                  )}
+                >
+                  {tags?.map((item) => (
+                    <span
+                      key={index}
+                      className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
+                    >
+                      {item}
+                    </span>
+                  ))}
+                  {isPremium && (
+                    <span className="inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
+                      Premium Content
+                    </span>
+                  )}
+                </div>
+
+                <div>
+                  <h3
+                    className={twMerge(
+                      'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
+                    )}
+                  >
+                    {title}
+                  </h3>
+                  <p className="text-md mt-5 text-[#777777] sm:text-xl">
+                    {content}
+                  </p>
+                </div>
+                <Button
+                  size="block"
+                  {...(isPremium
+                    ? {
+                        onClick: () => {
+                          setIsSuccessOpen('warning')
+                        },
+                        to: '',
+                      }
+                    : { as: Link, to: `/detail/${slug}` })}
+                  className="mb-5"
+                >
+                  View More
+                </Button>
+              </div>
+            </div>
+          ),
+        )}
+      </div>
+
+      <div className="my-5 mt-5 flex flex-row-reverse">
+        <div className="flex gap-2.5">
+          <CarouselPreviousIcon
+            color="#DCDCDC"
+            className="cursor-pointer"
+            width={45}
+            height={45}
+            onClick={previousSlide}
+          />
+          <CarouselNextIcon
+            color="#2E2F7C"
+            className="cursor-pointer"
+            width={45}
+            height={45}
+            onClick={nextSlide}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

app/components/ui/input.tsx

@@ -1,4 +1,4 @@
-import { Field, Label, Input as UIInput } from '@headlessui/react'
+import { Field, Label, Input as HeadlessInput } from '@headlessui/react'
 import { useState, type ComponentProps, type ReactNode } from 'react'
 import {
   get,
@@ -55,7 +55,7 @@ export const Input = <TFormValues extends Record<string, unknown>>(
       <Label className="mb-1 block text-gray-700">
         {label} {error && <span className="text-red-500">{error.message}</span>}
       </Label>
-      <UIInput
+      <HeadlessInput
         type={inputType}
         className="h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
         placeholder={inputType === 'password' ? '******' : placeholder}

app/components/ui/select.tsx

@@ -0,0 +1,67 @@
+import { Field, Label, Select as HeadlessSelect } from '@headlessui/react'
+import { type ComponentProps, type ReactNode } from 'react'
+import {
+  get,
+  type FieldError,
+  type FieldValues,
+  type Path,
+  type RegisterOptions,
+} from 'react-hook-form'
+import { useRemixFormContext } from 'remix-hook-form'
+
+type TInputProperties<T extends FieldValues> = Omit<
+  ComponentProps<'select'>,
+  'size'
+> & {
+  id: string
+  label?: ReactNode
+  name: Path<T>
+  rules?: RegisterOptions
+  placeholder?: string
+  options?: {
+    code: string
+    name: string
+    id: string
+  }[]
+}
+
+export const Select = <TFormValues extends Record<string, unknown>>(
+  properties: TInputProperties<TFormValues>,
+) => {
+  const { id, label, name, rules, disabled, placeholder, options, ...rest } =
+    properties
+
+  const {
+    register,
+    formState: { errors },
+  } = useRemixFormContext()
+
+  const error: FieldError = get(errors, name)
+
+  return (
+    <Field
+      className="relative"
+      disabled={disabled}
+      id={id}
+    >
+      <Label className="mb-1 block text-gray-700">
+        {label} {error && <span className="text-red-500">{error.message}</span>}
+      </Label>
+      <HeadlessSelect
+        className="focus:inheriten h-[42px] w-full rounded-md border border-[#DFDFDF] p-2"
+        {...register(name, rules)}
+        {...rest}
+      >
+        <option value="">{placeholder}</option>
+        {options?.map(({ id, name }) => (
+          <option
+            key={id}
+            value={id}
+          >
+            {name}
+          </option>
+        ))}
+      </HeadlessSelect>
+    </Field>
+  )
+}

app/layouts/news/form-register.tsx

@@ -1,12 +1,14 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect, useState } from 'react'
-import { useFetcher } from 'react-router'
+import { useFetcher, useRouteLoaderData } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
 import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
+import { Select } from '~/components/ui/select'
 import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_layout'
 
 export const registerSchema = z
   .object({
@@ -14,6 +16,7 @@ export const registerSchema = z
     password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
     rePassword: z.string().min(6, 'Kata sandi minimal 6 karakter'),
     phone: z.string().min(10, 'No telepon tidak valid'),
+    subscription: z.string().min(1, 'Pilih salah satu subscription'),
   })
   .refine((field) => field.password === field.rePassword, {
     message: 'Kata sandi tidak sama',
@@ -27,6 +30,7 @@ export const FormRegister = () => {
   const [error, setError] = useState<string>()
   const [disabled, setDisabled] = useState(false)
   const fetcher = useFetcher()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
 
   const formMethods = useRemixForm<TRegisterSchema>({
     mode: 'onSubmit',
@@ -89,18 +93,13 @@ export const FormRegister = () => {
               name="phone"
             />
 
-            {/* Subscribe*/}
-            {/* <div className="mb-4">
-              <label
-                htmlFor="subscription"
-                className="mb-1 block text-gray-700"
-              >
-                Subscription
-              </label>
-              <select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
-                <option selected>Subscription</option>
-              </select>
-            </div> */}
+            <Select
+              id="subscription"
+              name="subscription"
+              label="Subscription"
+              placeholder="Pilih Subscription"
+              options={loaderData?.subscriptionsData}
+            />
 
             {error && (
               <div className="text-sm text-red-500 capitalize">{error}</div>

app/pages/news-categories/index.tsx

@@ -1,13 +1,13 @@
 import { Card } from '~/components/ui/card'
-import { Carousel } from '~/components/ui/carousel'
+import { CategorySection } from '~/components/ui/category-section'
 
 import { BERITA } from './data'
 
 export const NewsCategoriesPage = () => {
   return (
-    <div className="relative mx-5 sm:mx-10">
+    <div className="relative">
       <Card>
-        <Carousel {...BERITA} />
+        <CategorySection {...BERITA} />
       </Card>
     </div>
   )

app/pages/news/index.tsx

@@ -2,8 +2,7 @@ import { Card } from '~/components/ui/card'
 import { CarouselHero } from '~/components/ui/carousel-hero'
 import { CarouselSection } from '~/components/ui/carousel-section'
 import { Newsletter } from '~/components/ui/newsletter'
-
-import { SPOTLIGHT, BERITA } from './data'
+import { BERITA, SPOTLIGHT } from '~/data/contents'
 
 export const NewsPage = () => {
   return (

app/routes/_layout.tsx

@@ -1,5 +1,6 @@
 import { Outlet } from 'react-router'
 
+import { getSubscriptions } from '~/apis/common/get-subscriptions'
 import { NewsProvider } from '~/contexts/news'
 import { NewsDefaultLayout } from '~/layouts/news/default'
 import { handleCookie } from '~/libs/cookies'
@@ -8,9 +9,11 @@ import type { Route } from './+types/_layout'
 
 export const loader = async ({ request }: Route.LoaderArgs) => {
   const { userToken } = await handleCookie(request)
+  const { data: subscriptionsData } = await getSubscriptions()
 
   return {
     userToken,
+    subscriptionsData,
   }
 }