create-nextjs-cms 0.5.92 → 0.5.94

package/templates/default/components/NewAdminForm.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import React from 'react'
 import useModal from '@/hooks/useModal'
 import InfoCard from '@/components/InfoCard'
@@ -15,6 +15,7 @@ export default function NewAdminForm({
     privileges: RouterOutputs['admins']['list']['privileges']
     action: any
 }) {
+    const t = useI18n()
     const { setModal, modal, modalResponse, setModalResponse } = useModal()
     const { toast } = useToast()
     const formRef = React.useRef<HTMLFormElement>(null)
@@ -25,7 +26,7 @@ export default function NewAdminForm({
     const mutation = trpc.admins.create.useMutation({
         onError: (error) => {
             setModal({
-                title: getString('create_new_admin'),
+                title: t('createNewAdmin'),
                 body: (
                     <div className='p-4'>
                         <InfoCard result={{ key: 'danger', title: error.message, status: false }} />
@@ -55,8 +56,8 @@ export default function NewAdminForm({
              */
             toast({
                 variant: 'success',
-                title: getString('create_new_admin'),
-                description: getString('itemCreatedSuccessfully'),
+                title: t('createNewAdmin'),
+                description: t('itemCreatedSuccessfully'),
             })
         },
     })
@@ -69,8 +70,8 @@ export default function NewAdminForm({
          */
         if (!usernameRef.current?.value || !passwordRef.current?.value) {
             setModal({
-                title: getString('create_new_admin'),
-                body: <div className='p-4'>{getString('usernamePasswordRequired')}</div>,
+                title: t('createNewAdmin'),
+                body: <div className='p-4'>{t('usernamePasswordRequired')}</div>,
                 headerColor: 'bg-red-700',
                 titleColor: 'text-white',
                 lang: 'en',
@@ -97,7 +98,7 @@ export default function NewAdminForm({
         <form ref={formRef} onSubmit={handleSubmit} className='flex flex-col gap-2'>
             <div>
                 <label htmlFor='email' className='block text-sm font-medium leading-6 text-foreground'>
-                    {getString('username')}
+                    {t('username')}
                 </label>
                 <div className=''>
                     <input
@@ -113,7 +114,7 @@ export default function NewAdminForm({
 
             <div>
                 <label htmlFor='password' className='block text-sm font-medium leading-6 text-foreground'>
-                    {getString('password')}
+                    {t('password')}
                 </label>
                 <div className=''>
                     <input
@@ -128,7 +129,7 @@ export default function NewAdminForm({
             </div>
             {privileges && privileges.length > 0 && (
                 <>
-                    <div className='mt-5 w-full font-semibold'>{getString('admin_privileges')}</div>
+                    <div className='mt-5 w-full font-semibold'>{t('adminPrivileges')}</div>
                     <div className='flex'>
                         <Button
                             className='border border-foreground'
@@ -144,7 +145,7 @@ export default function NewAdminForm({
                                 }
                             }}
                         >
-                            {allChecked === true ? getString('removeAll') : getString('checkAll')}
+                            {allChecked === true ? t('removeAll') : t('checkAll')}
                         </Button>
                     </div>
                     <div className='mt-2 grid w-full grid-cols-1 gap-2 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-3 xl-sidebar:grid-cols-4 2xl-sidebar:grid-cols-5'>
@@ -164,7 +165,7 @@ export default function NewAdminForm({
 
             <div className='mt-4'>
                 <button type='submit' className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
-                    {getString('submit_new_admin')}
+                    {t('submitNewAdmin')}
                 </button>
             </div>
         </form>

package/templates/default/components/NewEmailForm.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import React from 'react'
 import useModal from '@/hooks/useModal'
 import { Badge } from '@/components/ui/badge'
@@ -7,13 +7,14 @@ import InfoCard from '@/components/InfoCard'
 import { trpc } from '@/app/_trpc/client'
 
 export default function NewEmailForm({ action }: { action: any }) {
+    const t = useI18n()
     const { setModal, modal, modalResponse, setModalResponse } = useModal()
     const formRef = React.useRef<HTMLFormElement>(null)
     const { toast } = useToast()
     const newEmailMutation = trpc.cpanelEmails.createEmail.useMutation({
         onError: (error) => {
             setModal({
-                title: getString('error'),
+                title: t('error'),
                 body: (
                     <div className='p-4'>
                         <InfoCard result={{ key: 'danger', title: error.message, status: false }} />
@@ -28,7 +29,7 @@ export default function NewEmailForm({ action }: { action: any }) {
             action()
             toast({
                 variant: 'success',
-                title: getString('success'),
+                title: t('success'),
                 description: data.message,
             })
 
@@ -52,7 +53,7 @@ export default function NewEmailForm({ action }: { action: any }) {
         const response = await handleEmailSubmission(values, axiosPrivate, controller)
         if (response.error) {
             setModal({
-                title: getString('error'),
+                title: t('error'),
                 body: (
                     <div className='p-4'>
                         <InfoCard result={{ key: 'danger', title: response.error.message, status: false }} />
@@ -66,7 +67,7 @@ export default function NewEmailForm({ action }: { action: any }) {
             action()
             toast({
                 variant: 'success',
-                title: getString('success'),
+                title: t('success'),
                 description: response.message,
             })
         }*/
@@ -76,7 +77,7 @@ export default function NewEmailForm({ action }: { action: any }) {
         <form ref={formRef} onSubmit={handleSubmit} className='flex flex-col gap-2'>
             <div>
                 <label htmlFor='username' className='block text-sm font-medium leading-6 text-foreground'>
-                    {getString('email')}
+                    {t('email')}
                 </label>
                 <div className=''>
                     <input
@@ -92,7 +93,7 @@ export default function NewEmailForm({ action }: { action: any }) {
 
             <div>
                 <label htmlFor='password' className='block text-sm font-medium leading-6 text-foreground'>
-                    {getString('password')}
+                    {t('password')}
                 </label>
                 <div className=''>
                     <input
@@ -107,7 +108,7 @@ export default function NewEmailForm({ action }: { action: any }) {
             </div>
             <div>
                 <label htmlFor='quota' className='block text-sm font-medium leading-6 text-foreground'>
-                    {getString('emailQuota')}
+                    {t('emailQuota')}
                 </label>
                 <div className=''>
                     <input
@@ -119,12 +120,12 @@ export default function NewEmailForm({ action }: { action: any }) {
                         className='block rounded-md border-0 bg-input p-2.5 text-foreground shadow-xs outline-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
                     />
                     <Badge className='rounded-sm border-muted-foreground text-muted-foreground' variant='secondary'>
-                        0 = {getString('unlimited')}
+                        0 = {t('unlimited')}
                     </Badge>
                 </div>
             </div>
             <div className='mt-4'>
-                <button className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>{getString('create')}</button>
+                <button className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>{t('create')}</button>
             </div>
         </form>
     )

package/templates/default/components/NewPage.tsx

@@ -3,7 +3,7 @@
 import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
 import { RefObject, useEffect, useRef, useState } from 'react'
 import { SectionType } from 'nextjs-cms/core/types'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import useModal from '@/hooks/useModal'
 import { AxiosError } from 'axios'
 import InfoCard from '@/components/InfoCard'
@@ -29,6 +29,7 @@ export default function NewPage({
     }[]
     action?: any
 }) {
+    const t = useI18n()
     const [progress, setProgress] = useState(0)
     const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
     const [isSubmitting, setIsSubmitting] = useState(false)
@@ -114,10 +115,10 @@ export default function NewPage({
                 if (res.status === 200) {
                     toast({
                         variant: res.data?.errors?.length ? 'warning' : 'success',
-                        title: getString('itemCreatedSuccessfully'),
+                        title: t('itemCreatedSuccessfully'),
                         description: res.data?.errors?.length
-                            ? getString('errorsInSubmit')
-                            : getString('itemCreatedSuccessfully'),
+                            ? t('errorsInSubmit')
+                            : t('itemCreatedSuccessfully'),
                     })
 
                     switch (sectionType) {
@@ -183,7 +184,7 @@ export default function NewPage({
                         <div className='absolute top-0 left-0 z-2 h-4 w-full bg-linear-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
                         <h1 className='pb-4 text-4xl'>{data.section?.title.section}</h1>
                         <span>
-                            /{getString('new')} {data.section?.title.singular}
+                            /{t('new')} {data.section?.title.singular}
                         </span>
                     </div>
                     <Form

package/templates/default/components/NewVariantComponent.tsx

@@ -1,7 +1,7 @@
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
 import React, { forwardRef, Ref, useEffect, useImperativeHandle, useState } from 'react'
 import ContainerBox from '@/components/ContainerBox'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { Button } from '@/components/ui/button'
 import { useQuery } from '@tanstack/react-query'
 import { getNewVariantPage } from '@/lib/apiHelpers'
@@ -34,6 +34,7 @@ function NewVariantComponent(
     },
     ref: Ref<VariantHandles>,
 ) {
+    const t = useI18n()
     const [open, setOpen] = React.useState(false)
     const axiosPrivate = useAxiosPrivate()
     const controller = new AbortController()
@@ -137,7 +138,7 @@ function NewVariantComponent(
     }))
 
     return (
-        <ContainerBox title={`${getString('add')} ${variantInfo.variant_html_name_en}`}>
+        <ContainerBox title={`${t('add')} ${variantInfo.variant_html_name_en}`}>
             <div className='mb-4 grid grid-cols-1 gap-4 rounded-2xl border-4 border-dashed border-gray-400 bg-accent p-2 md:grid-cols-2 lg:grid-cols-4'>
                 {variants.map((v) => (
                     <ContainerBox title={v.title} key={v.id}>
@@ -163,11 +164,11 @@ function NewVariantComponent(
             </div>
             <Sheet open={open} onOpenChange={setOpen}>
                 <SheetTrigger>
-                    <Button type='button'>{getString('add')} +</Button>
+                    <Button type='button'>{t('add')} +</Button>
                 </SheetTrigger>
                 <SheetContent className='w-1/2 max-w-[2/3] sm:w-[940px] sm:max-w-full'>
                     <SheetHeader>
-                        <SheetTitle>{getString('newVariant')}</SheetTitle>
+                        <SheetTitle>{t('newVariant')}</SheetTitle>
                         <SheetDescription>
                             <form onSubmit={handleSubmit}>
                                 <div className=''>
@@ -205,7 +206,7 @@ function NewVariantComponent(
                                                 type='submit'
                                                 disabled={isSubmitting}
                                             >
-                                                {isSubmitting ? getString('loading') : getString('create')}
+                                                {isSubmitting ? t('loading') : t('create')}
                                             </button>
                                             {isSubmitting && (
                                                 <div className='mt-0.5'>

package/templates/default/components/PhotoGallery.tsx

@@ -1,12 +1,13 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { PhotoGalleryItem } from 'nextjs-cms/core/types'
 import GalleryPhoto from '@/components/GalleryPhoto'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import ContainerBox from '@/components/ContainerBox'
 
 const PhotoGallery = ({ sectionName, gallery }: { sectionName: string; gallery: PhotoGalleryItem[] }) => {
+    const t = useI18n()
     return (
-        <ContainerBox title={getString('gallery')}>
+        <ContainerBox title={t('gallery')}>
             {gallery && gallery.length > 0 ? (
                 <div className='flex flex-wrap gap-4'>
                     {gallery.map((photo: PhotoGalleryItem, index: number) => (
@@ -24,7 +25,7 @@ const PhotoGallery = ({ sectionName, gallery }: { sectionName: string; gallery:
                 </div>
             ) : (
                 <Alert variant='light' className='mt-4'>
-                    <AlertDescription className='font-bold'>{getString('noItems')}</AlertDescription>
+                    <AlertDescription className='font-bold'>{t('noItems')}</AlertDescription>
                 </Alert>
             )}
         </ContainerBox>

package/templates/default/components/SectionItemCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import useModal from '@/hooks/useModal'
 import ProtectedImage from '@/components/ProtectedImage'
 import SectionItemStatusBadge from '@/components/SectionItemStatusBadge'
@@ -28,7 +28,7 @@ export default function SectionItemCard({
     const deleteMutation = trpc.hasItemsSections.deleteItem.useMutation({
         onError: (error) => {
             setModal({
-                title: getString('delete'),
+                title: t('delete'),
                 body: (
                     <div className='rounded border-2 border-dashed border-red-500 bg-red-100 p-2 text-red-800'>
                         {error.message}
@@ -46,10 +46,10 @@ export default function SectionItemCard({
             })
             action()
             setModal({
-                title: getString('delete'),
+                title: t('delete'),
                 body: (
                     <div className='rounded border-2 border-dashed border-green-500 bg-green-100 p-2 text-green-800'>
-                        {getString('itemDeletedSuccessfully')}
+                        {t('itemDeletedSuccessfully')}
                     </div>
                 ),
                 headerColor: 'bg-green-700',
@@ -97,16 +97,16 @@ export default function SectionItemCard({
                         href={`/edit/${sectionName}/${item.id}`}
                         className='rounded bg-primary px-3 py-1 font-semibold text-primary-foreground'
                     >
-                        {getString('edit')}
+                        {t('edit')}
                     </Link>
                     <Button
                         onClick={() => {
                             setModal({
-                                title: getString('delete'),
+                                title: t('delete'),
                                 body: (
                                     <div className='p-4'>
                                         <div className='flex flex-col gap-4'>
-                                            <div>{getString('deleteItemText')}</div>
+                                            <div>{t('deleteItemText')}</div>
                                             <div className='flex gap-2'>
                                                 <button
                                                     className='rounded bg-success px-2 py-1 text-success-foreground'
@@ -134,7 +134,7 @@ export default function SectionItemCard({
                         variant='destructive'
                         className='rounded px-3 py-1 font-semibold'
                     >
-                        {getString('delete')}
+                        {t('delete')}
                     </Button>
                 </CardFooter>
             </Card>

package/templates/default/components/SectionItemStatusBadge.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { Badge } from '@/components/ui/badge'
 
 const SectionItemStatusBadge = ({ status }: { status: number }) => {
+    const t = useI18n()
     return (
         <Badge
             variant={status === 1 ? 'success' : 'destructive'}
             className='absolute top-3 shadow-sm left-3 z-30 font-bold'
         >
-            {status === 1 ? getString('approved') : getString('pending_approval')}
+            {status === 1 ? t('approved') : t('pendingApproval')}
         </Badge>
     )
 }

package/templates/default/components/SectionPage.tsx

@@ -2,7 +2,7 @@
 
 import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
 import { RefObject, useEffect, useRef, useState } from 'react'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import { AxiosError } from 'axios'
 import InfoCard from '@/components/InfoCard'
 import { DropzoneHandles } from '@/components/Dropzone'
@@ -12,6 +12,7 @@ import Form from '@/components/form/Form'
 import ErrorComponent from './ErrorComponent'
 
 export default function SectionPage({ section }: { section: string }) {
+    const t = useI18n()
     const [progress, setProgress] = useState(0)
     const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
     const [isSubmitting, setIsSubmitting] = useState(false)
@@ -57,10 +58,10 @@ export default function SectionPage({ section }: { section: string }) {
                 if (res.status === 200) {
                     toast({
                         variant: res.data?.errors?.length ? 'warning' : 'success',
-                        title: getString('sectionUpdatedSuccessfully'),
+                        title: t('sectionUpdatedSuccessfully'),
                         description: res.data?.errors?.length
-                            ? getString('errorsInSubmit')
-                            : getString('sectionUpdatedSuccessfully'),
+                            ? t('errorsInSubmit')
+                            : t('sectionUpdatedSuccessfully'),
                     })
 
                     // Refetch the page
@@ -104,7 +105,7 @@ export default function SectionPage({ section }: { section: string }) {
                         <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
                         <h1 className='pb-4 text-4xl'>{data.section?.title}</h1>
                         <span>
-                            /{getString('edit')} {data.section?.title}
+                            /{t('edit')} {data.section?.title}
                         </span>
                     </div>
                     <Form

package/templates/default/components/SelectInputButtons.tsx

@@ -1,4 +1,4 @@
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import useModal from '@/hooks/useModal'
 import React from 'react'
 import NewPage from '@/components/NewPage'
@@ -25,10 +25,11 @@ export default function SelectInputButtons({
     reset: any
     allowRecursiveDelete: boolean
 }) {
+    const t = useI18n()
     const { setModal } = useModal()
     const newCatInit = () => {
         setModal({
-            title: getString('add_new_item'),
+            title: t('addNewItem'),
             body: (
                 <NewPage
                     section={section}
@@ -56,7 +57,7 @@ export default function SelectInputButtons({
     const catEditInit = () => {
         if (value === undefined) return
         setModal({
-            title: getString('edit'),
+            title: t('edit'),
             body: (
                 <ItemEditPage
                     sectionType='categorized'
@@ -88,7 +89,7 @@ export default function SelectInputButtons({
     const catDeleteInit = () => {
         if (value === undefined) return
         setModal({
-            title: getString('delete'),
+            title: t('delete'),
             body: (
                 <CategoryDeleteConfirmPage
                     action={() => {
@@ -111,13 +112,13 @@ export default function SelectInputButtons({
     return (
         <div className='flex flex-row gap-1 pt-1'>
             <Button variant='default' size='sm' onClick={newCatInit} type='button'>
-                {getString('add')}
+                {t('add')}
             </Button>
             <Button variant='secondary' size='sm' onClick={catEditInit} type='button' disabled={value === undefined}>
-                {getString('edit')}
+                {t('edit')}
             </Button>
             <Button variant='destructive' size='sm' onClick={catDeleteInit} disabled={value === undefined}>
-                {getString('delete')}
+                {t('delete')}
             </Button>
         </div>
     )

package/templates/default/components/SettingsPage.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useEffect, useState } from 'react'
-import getString from 'nextjs-cms/translations'
+import { useI18n } from 'nextjs-cms/translations/client'
 import useModal from '@/hooks/useModal'
 import InfoCard from '@/components/InfoCard'
 import LoadingSpinners from '@/components/LoadingSpinners'
@@ -10,6 +10,7 @@ import { trpc } from '@/app/_trpc/client'
 import Form from '@/components/form/Form'
 
 export default function SettingsPage() {
+    const t = useI18n()
     const [isSubmitting, setIsSubmitting] = useState(false)
     const { setModal, modal, modalResponse, setModalResponse } = useModal()
     const controller = new AbortController()
@@ -21,7 +22,7 @@ export default function SettingsPage() {
         onError: (error) => {
             setIsSubmitting(false)
             setModal({
-                title: getString('error'),
+                title: t('error'),
                 body: (
                     <div className='p-4'>
                         <InfoCard result={{ key: 'danger', title: error.message }} />
@@ -40,8 +41,8 @@ export default function SettingsPage() {
                 await refetch()
 
                 toast({
-                    title: getString('success'),
-                    description: getString('success'),
+                    title: t('success'),
+                    description: t('success'),
                     duration: 2000,
                 })
             }
@@ -52,7 +53,7 @@ export default function SettingsPage() {
         onError: (error) => {
             setIsSubmitting(false)
             setModal({
-                title: getString('error'),
+                title: t('error'),
                 body: (
                     <div className='p-4'>
                         <InfoCard result={{ key: 'danger', title: error.message }} />
@@ -71,8 +72,8 @@ export default function SettingsPage() {
                 await refetch()
 
                 toast({
-                    title: getString('success'),
-                    description: getString('success'),
+                    title: t('success'),
+                    description: t('success'),
                     duration: 2000,
                 })
             }
@@ -114,7 +115,7 @@ export default function SettingsPage() {
         <div>
             <div className='bg-background w-full overflow-hidden'>
                 <div className='bg-linear-to-r from-rose-200 via-rose-400 to-sky-400 p-8 font-extrabold text-black'>
-                    <h1 className='text-3xl'>{getString('accountSettings')}</h1>
+                    <h1 className='text-3xl'>{t('accountSettings')}</h1>
                 </div>
                 <div className='flex w-full flex-col'>
                     <div className='flex flex-col'>
@@ -128,13 +129,13 @@ export default function SettingsPage() {
                                         inputGroups: [
                                             {
                                                 groupId: 1,
-                                                groupTitle: getString('adminDetails'),
+                                                groupTitle: t('adminDetails'),
                                                 groupOrder: 1,
                                                 inputs: [
                                                     {
                                                         type: 'text',
                                                         required: false,
-                                                        label: getString('username'),
+                                                        label: t('username'),
                                                         name: 'username',
                                                         value: data?.username,
                                                         readonly: true,
@@ -143,7 +144,7 @@ export default function SettingsPage() {
                                                     {
                                                         type: 'text',
                                                         required: false,
-                                                        label: getString('name'),
+                                                        label: t('name'),
                                                         name: 'name',
                                                         value: data?.fullName,
                                                         readonly: false,
@@ -152,7 +153,7 @@ export default function SettingsPage() {
                                                     {
                                                         type: 'text',
                                                         required: false,
-                                                        label: getString('emailAddress'),
+                                                        label: t('emailAddress'),
                                                         name: 'emailAddress',
                                                         value: data?.emailAddress,
                                                         readonly: false,
@@ -161,7 +162,7 @@ export default function SettingsPage() {
                                                     {
                                                         type: 'text',
                                                         required: false,
-                                                        label: getString('phoneNumber'),
+                                                        label: t('phoneNumber'),
                                                         name: 'phoneNumber',
                                                         value: data?.phoneNumber,
                                                         readonly: false,
@@ -185,13 +186,13 @@ export default function SettingsPage() {
                                         inputGroups: [
                                             {
                                                 groupId: 1,
-                                                groupTitle: getString('password'),
+                                                groupTitle: t('password'),
                                                 groupOrder: 1,
                                                 inputs: [
                                                     {
                                                         type: 'password',
                                                         required: true,
-                                                        label: getString('oldPassword'),
+                                                        label: t('oldPassword'),
                                                         name: 'oldPassword',
                                                         value: undefined,
                                                         readonly: false,
@@ -200,7 +201,7 @@ export default function SettingsPage() {
                                                     {
                                                         type: 'password',
                                                         required: true,
-                                                        label: getString('new_password'),
+                                                        label: t('newPassword'),
                                                         name: 'newPassword',
                                                         value: undefined,
                                                         readonly: false,
@@ -209,7 +210,7 @@ export default function SettingsPage() {
                                                     {
                                                         type: 'password',
                                                         required: true,
-                                                        label: getString('confirm_new_password'),
+                                                        label: t('confirmNewPassword'),
                                                         name: 'confirmPassword',
                                                         value: undefined,
                                                         readonly: false,