@spacemade/ui 0.0.1

package/src/components/post/modal/CreatePostModal.tsx

@@ -0,0 +1,115 @@
+import { useRouter } from 'next/router'
+import {
+	Drawer,
+	DrawerBody,
+	DrawerCloseButton,
+	DrawerContent,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerOverlay,
+} from '@chakra-ui/react'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { PostPayload } from '@store/model'
+import { usePostStore } from '@hooks'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+import { transformToURLFormat } from '@helpers/string'
+
+interface FormValues extends FieldValues {
+	name: string
+}
+
+const CreatePostModal = ({
+	isOpen,
+	onClose,
+}: {
+	isOpen: boolean
+	onClose: () => void
+}) => {
+	const { user } = useUserAuthContext()
+	const router = useRouter()
+	const { savePost, generateUniquePostSlug } = usePostStore()
+
+	const {
+		register,
+		handleSubmit,
+		setError,
+		getValues,
+		clearErrors,
+		formState: { errors, isSubmitting, isSubmitSuccessful },
+	} = useForm<FormValues>()
+
+	const onSubmit: SubmitHandler<FormValues> = async (data) => {
+		try {
+			const slugFromName = transformToURLFormat(data.name)
+			const slug = await generateUniquePostSlug(slugFromName)
+
+			const post = await savePost(true, {
+				slug,
+				name: data.name,
+			} as PostPayload)
+
+			toast.success('Your post has been saved successfully')
+
+			onClose()
+
+			router.push(`/admin/posts/${post.id}`)
+		} catch (error: any) {
+			toast.error(
+				error.status === HTTPErrorStatus.UNPROCESSABLE_ENTITY
+					? error.data.message
+					: DEFAULT_ERROR_MESSAGE
+			)
+			setError('server-error', { type: 'custom', message: 'server-error' })
+		}
+	}
+
+	return (
+		<Drawer isOpen={isOpen} onClose={onClose} size='xl'>
+			<DrawerOverlay />
+			<DrawerContent className='drawer'>
+				<DrawerCloseButton />
+				<DrawerHeader>Create Post</DrawerHeader>
+				<DrawerBody>
+					<form id='post-update-form' onSubmit={handleSubmit(onSubmit)}>
+						<div className='mt-4'>
+							<Input
+								register={register('name', {
+									required: 'This field is required',
+								})}
+								errors={errors}
+								placeholder='Enter Your Post Name'
+								label='Name'
+								getValues={getValues}
+							/>
+						</div>
+					</form>
+				</DrawerBody>
+
+				<DrawerFooter>
+					<Button ariaLabel='Cancel' onClick={onClose}>
+						Cancel
+					</Button>
+					<Button
+						type='submit'
+						className='text-white'
+						ariaLabel='Save new item'
+						color='primary'
+						form='post-update-form'
+						isLoading={isSubmitting}
+						disabled={isSubmitting || isSubmitSuccessful}
+						onClick={() => clearErrors(['server-error'])}
+					>
+						Save
+					</Button>
+				</DrawerFooter>
+			</DrawerContent>
+		</Drawer>
+	)
+}
+
+export default CreatePostModal

package/src/components/post/modal/PreviewPostModal.tsx

@@ -0,0 +1,82 @@
+import {
+	Modal,
+	ModalBody,
+	ModalCloseButton,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+	ModalOverlay,
+} from '@chakra-ui/react'
+import { toast } from 'react-toastify'
+import { Post } from '@store/model'
+import { useApprovePostMutation } from '@store/slice/api/postApiSlice'
+import Button from '@components/common/button/Button'
+import PostContent from '@components/post/block/PostContent'
+
+const PreviewPostModal = ({
+	post,
+	isOpen,
+	onClose,
+}: {
+	post: Post
+	isOpen: boolean
+	onClose: () => void
+}) => {
+	const [approvePost] = useApprovePostMutation()
+
+	const onApprovePost = async () => {
+		try {
+			const response = await approvePost({ post }).unwrap()
+			toast.success(response.message)
+		} catch (error: any) {
+			toast.error(error.data.message)
+		}
+
+		onClose()
+	}
+
+	return (
+		<Modal onClose={onClose} size='full' isOpen={isOpen}>
+			<ModalOverlay />
+			<ModalContent className='full'>
+				<div>
+					<ModalHeader>
+						<h3 className='text-center'>Preview</h3>
+					</ModalHeader>
+					<ModalCloseButton />
+					<ModalBody>
+						<div className='py-5 bg-white text-dark'>
+							<div className='px-4'>
+								<div className='row justify-content-center g-5'>
+									<div className='col-lg-8'>
+										{post && <PostContent key={post.id} post={post} />}
+									</div>
+								</div>
+							</div>
+						</div>
+					</ModalBody>
+					<ModalFooter>
+						<Button
+							ariaLabel='Reject Post'
+							color='danger'
+							className='text-white me-4'
+							onClick={onClose}
+						>
+							Reject
+						</Button>
+						<Button
+							ariaLabel='Approve Post'
+							color='primary'
+							className='text-white'
+							onClick={onApprovePost}
+						>
+							Approve
+						</Button>
+					</ModalFooter>
+				</div>
+			</ModalContent>
+		</Modal>
+	)
+}
+
+export default PreviewPostModal

package/src/components/post/nav/BlogCategoriesSideNav.tsx

@@ -0,0 +1,55 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import isEmpty from 'lodash/isEmpty'
+import { useGetPostCategoriesQuery } from '@store/slice/api/categoriesApiSlice'
+
+export const BlogCategoriesSideNav = ({
+  parentPath = 'blog',
+  activeSlug,
+}: {
+  parentPath?: string
+  activeSlug?: string | null
+}) => {
+  const router = useRouter()
+  const categorySlugFromUrl = router.query.categorySlug?.toString()
+
+  const { data: categories } = useGetPostCategoriesQuery({
+    excludeCategoriesWithoutLiveEntities: true,
+    entity: 'post',
+  })
+
+  const selectedSlug = activeSlug || categorySlugFromUrl || ''
+
+  if (!categories || isEmpty(categories)) return null
+
+  return (
+    <nav className="sidebar-section mb-4 mt-5">
+      <h3 className="sidebar-heading">Categories</h3>
+
+      <ul className="sidebar-list">
+        <li className="sidebar-item" title="All posts">
+          <Link
+            href={`/${parentPath}`}
+            className={`sidebar-link ${!selectedSlug ? 'fw-bold text-dark' : ''}`}
+          >
+            <i className="bi bi-grid" /> <span>All</span>
+          </Link>
+        </li>
+
+        {categories.map((category) => {
+          const isActive = category.slug === selectedSlug
+          return (
+            <li className="sidebar-item" key={category.id} title={category.name}>
+              <Link
+                href={`/${parentPath}/c/${category.slug}`}
+                className={`sidebar-link ${isActive ? 'fw-bold text-dark' : ''}`}
+              >
+                <i className="bi bi-tag" /> <span>{category.name}</span>
+              </Link>
+            </li>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}

package/src/components/post/table/PostsTable.tsx

@@ -0,0 +1,284 @@
+/* eslint-disable @next/next/no-img-element */
+import { SyntheticEvent, useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import { useDisclosure } from '@chakra-ui/react'
+import isEmpty from 'lodash/isEmpty'
+import { EntityStatus, Post } from '@store/model'
+import { useGetAccountPostsQuery } from '@store/slice/api/postApiSlice'
+import { useSearchAndFilterCommon } from '@hooks'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import Badge from '@components/common/badge/Badge'
+import Button from '@components/common/button/Button'
+import { DeleteDialog } from '@components/common/dialog/DeleteDialog'
+import Spinner from '@components/common/loading/Spinner'
+import TableFilter from '@components/common/table/TableFilter'
+import TablePaging from '@components/common/table/TablePaging'
+import { FullDateAndTimeFormat } from '@helpers/date'
+import { defaultAvatar, getDefaultColoredImage } from '@helpers/images'
+import { truncateString } from '@helpers/string'
+
+export const PostsTable = ({
+	skipByColumn = true,
+	skipUpdatedAtColumn = false,
+	skipFilters = false,
+	skipPaging = false,
+	rowLimit,
+	useSearchStateToFilter = false,
+	onDeleteAction,
+}: {
+	skipByColumn?: boolean
+	skipUpdatedAtColumn?: boolean
+	skipFilters?: boolean
+	skipPaging?: boolean
+	campaignId?: string
+	rowLimit?: number
+	useSearchStateToFilter?: boolean
+	onDeleteAction?: (post: Post) => Promise<void>
+}) => {
+	const [postActive, setPostActive] = useState<Post | null>(null)
+
+	const {
+		push: redirect,
+		query: { page, limit, categoryId, status, nameLike },
+	} = useRouter()
+
+	const {
+		getLimitFromQuery,
+		calculateProperPageNumber,
+		searchState,
+		setSearchState,
+	} = useSearchAndFilterCommon()
+
+	const categoryIdParam = useSearchStateToFilter
+		? searchState.categoryId
+		: categoryId?.toString()
+	const pageLimit = getLimitFromQuery(limit, 50)
+
+	const { data, isLoading, isFetching } = useGetAccountPostsQuery({
+		limit:
+			rowLimit || useSearchStateToFilter
+				? searchState.limit
+				: pageLimit,
+		page: useSearchStateToFilter
+			? searchState.page
+			: calculateProperPageNumber(page),
+		categoryIds: categoryIdParam ? [categoryIdParam] : undefined,
+		status: (useSearchStateToFilter ? searchState.status : status) as EntityStatus,
+		nameLike: useSearchStateToFilter
+			? searchState.nameLike
+			: nameLike?.toString(),
+	})
+
+	useEffect(() => {
+		localStorage.setItem(
+			'posts_search_params',
+			JSON.stringify({
+				limit:
+					rowLimit || useSearchStateToFilter
+						? searchState.limit
+						: pageLimit,
+				page: useSearchStateToFilter
+					? searchState.page
+					: calculateProperPageNumber(page),
+				categoryIds: categoryIdParam ? [categoryIdParam] : undefined,
+				status: ((useSearchStateToFilter
+					? searchState.status
+					: status) as EntityStatus),
+				nameLike: useSearchStateToFilter
+					? searchState.nameLike
+					: nameLike?.toString(),
+			})
+		)
+	}, [
+		calculateProperPageNumber,
+		categoryIdParam,
+		getLimitFromQuery,
+		limit,
+		nameLike,
+		page,
+		rowLimit,
+		searchState.limit,
+		searchState.nameLike,
+		searchState.page,
+		searchState.status,
+		status,
+		useSearchStateToFilter,
+	])
+
+	const {
+		isOpen: isDialogOpen,
+		onOpen: onOpenDialog,
+		onClose: onCloseDialog,
+	} = useDisclosure()
+
+	const onRowClick = (event: SyntheticEvent, post: Post) => {
+		setPostActive(post)
+
+		const parent = (event.target as HTMLElement).closest('[data-type]')
+		const type = parent?.getAttribute('data-type')
+		if (type === 'action') {
+			onOpenDialog()
+			return
+		}
+
+		redirect(`/admin/posts/${post.id}`)
+	}
+
+	return (
+		<>
+			{!skipFilters && (
+				<TableFilter
+					type='post'
+					setSearchState={useSearchStateToFilter ? setSearchState : undefined}
+				/>
+			)}
+
+			<div className={!skipFilters ? 'mt-4' : ''}>
+				<table className='table'>
+					<thead>
+						<tr>
+							<th scope='col' className='d-none d-lg-table-cell'>
+								<span className='opacity-0'>Image</span>
+							</th>
+							<th
+								scope='col'
+								className={
+									skipByColumn && skipUpdatedAtColumn
+										? 'w-xs-90'
+										: 'w-lg-90-down'
+								}
+							>
+								Name
+							</th>
+							{!skipByColumn && (
+								<th scope='col' className='d-none d-lg-table-cell'>
+									By
+								</th>
+							)}
+							{!skipUpdatedAtColumn && (
+								<th scope='col' className='d-none d-lg-table-cell'>
+									On
+								</th>
+							)}
+							<th scope='col' className='w-fit-content'>
+								Status
+							</th>
+							{onDeleteAction && (
+								<th scope='col' className='opacity-0 w-xs-100p'>
+									Actions
+								</th>
+							)}
+						</tr>
+					</thead>
+					<tbody>
+						{data &&
+							!isFetching &&
+							data.results.map((post, key) => (
+								<tr
+									key={key}
+									className='pointer'
+									onClick={(e) => onRowClick(e, post)}
+								>
+									<td className='d-none d-lg-table-cell'>
+										<OptimizedImage
+											src={
+												post.featuredMedia?.media.sourceUrl ||
+												getDefaultColoredImage()
+											}
+											alt={post.featuredMedia?.media.details?.altText || ''}
+											width={100}
+											height={50}
+											className='object-fit-cover'
+										/>
+									</td>
+									<td>{truncateString(post.name, 120)}</td>
+									{!skipByColumn && (
+										<td className='d-none d-lg-table-cell'>
+											<OptimizedImage
+												src={
+													post.owner?.profileMedia?.media.sourceUrl ||
+													defaultAvatar
+												}
+												alt={
+													post.owner?.profileMedia?.media.details?.altText ||
+													`${post.owner?.name} profile image`
+												}
+												width={35}
+												height={35}
+												className='object-fit-cover rounded-pill'
+											/>
+										</td>
+									)}
+									{!skipUpdatedAtColumn && (
+										<td className='d-none d-lg-table-cell'>
+											{FullDateAndTimeFormat(post.updatedAt)}
+										</td>
+									)}
+									<td>
+										<Badge
+											className='px-3'
+											bgColor={
+												post.status === EntityStatus.draft
+													? 'warning'
+													: 'success'
+											}
+											textColor={
+												post.status === EntityStatus.draft ? 'dark' : 'white'
+											}
+											label={post.status}
+										/>
+									</td>
+									{onDeleteAction && (
+										<td className='text-center align-middle'>
+											<Button
+												className='no-min-size w-xs-50p h-100 bg-hover-background'
+												data-type='action'
+											>
+												<span className='bi bi-trash'></span>
+											</Button>
+										</td>
+									)}
+								</tr>
+							))}
+					</tbody>
+				</table>
+
+				{isFetching && (
+					<div className='w-100 d-flex justify-content-center py-4'>
+						<Spinner color='primary' />
+					</div>
+				)}
+
+				{!isLoading && !isFetching && isEmpty(data?.results) && (
+					<div className='d-flex flex-column align-items-center justify-content-center'>
+						{categoryId || status || nameLike ? (
+							<p>{`There are no posts to show that match your search`}</p>
+						) : (
+							<p>{`You don't have any post yet`}</p>
+						)}
+					</div>
+				)}
+			</div>
+
+			{!isEmpty(data?.results) && data?.count !== undefined && !skipPaging && (
+				<TablePaging
+					totalCount={data.count}
+					defaultLimit={50}
+					setSearchState={useSearchStateToFilter ? setSearchState : undefined}
+				/>
+			)}
+
+			{postActive && onDeleteAction && (
+				<>
+					<DeleteDialog
+						isOpen={isDialogOpen}
+						onClose={onCloseDialog}
+						titleOverride={`Delete "${postActive.name}" from this campaign`}
+						entityDescription={postActive.name}
+						onDelete={() => onDeleteAction(postActive)}
+					/>
+				</>
+			)}
+		</>
+	)
+}

package/src/components/pricing/block/AddOnRow.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react'
+import Link from 'next/link'
+import isEmpty from 'lodash/isEmpty'
+import { PlanPicker } from '@components/pricing/block/PlanPicker'
+import { Product, ProductPlan, ProductPlanType } from '@store/model'
+import { currencyPipe } from '@helpers/string'
+
+export const AddOnRow = ({
+	product
+} : {
+	product: Product
+}) => {
+	const [selectedPlan, setSelectedPlan] = useState(product.plans && product.plans[0])
+
+	const generateBillingPeriodText = (plan: ProductPlan) => {
+		return plan.type === ProductPlanType.Recurring ? `/${plan.billingPeriod}` : ''
+	}
+
+	const generateAdditionalMeasuredLimitText = (plan: ProductPlan) => {
+		if (!plan.measuredUnitLimits || isEmpty(plan.measuredUnitLimits)) {
+			return ''
+		}
+
+		if (plan.measuredUnitLimits.length > 1) {
+			const measuredUnits = plan.measuredUnitLimits.map(unit => {
+				return unit.limit > 1 ? `${unit.limit} ${unit.unitType}s` : unit.unitType;
+			});
+
+			return measuredUnits.join(', ');
+		}
+
+		const measuredUnit = plan.measuredUnitLimits[0]
+		return measuredUnit.limit > 1 ? `${measuredUnit.limit.toLocaleString()} ${measuredUnit.unitType}s` : measuredUnit.unitType
+	}
+
+	const getFirstMeasuredUnitType = (plan: ProductPlan) => {
+		if (!plan.measuredUnitLimits || isEmpty(plan.measuredUnitLimits)) {
+			return ''
+		}
+
+		const measuredUnit = plan.measuredUnitLimits[0]
+		return measuredUnit.limit > 1 ? `${measuredUnit.unitType}s` : measuredUnit.unitType
+	}
+
+	return (
+		<>
+			<div className='row justify-content-between align-items-center pb-2 g-3'>
+				<div className='col-lg-4'>
+					<h2 className='h4'>{product.name}</h2>
+					<p className='pe-xl-5 mb-0'>{product.intro}</p>
+				</div>
+				<div className='col-lg-4 text-lg- center'>
+					{product.plans && product.plans.length > 0 && (
+						<>
+							{product.plans.length > 1 ? (
+									<PlanPicker plans={product.plans} onChange={setSelectedPlan} />
+							) : (
+								<p className='mb-0'><span className='fw-bold lead'>{currencyPipe(product.plans[0].amount)}</span> {generateBillingPeriodText(product.plans[0])} per additional {generateAdditionalMeasuredLimitText(product.plans[0])}</p>
+							)}
+						</>
+					)}
+				</div>
+				<div className='col-lg-4 text-lg-end'>
+					{selectedPlan && (
+						<Link
+							// href={`/checkout/${selectedPlan.slug}`}
+							href={``}
+							className='btn btn-outline-primary rounded-0 w-xs-180p text-capitalize'
+						>
+							Add {getFirstMeasuredUnitType(selectedPlan)}
+						</Link>
+					)}
+				</div>
+			</div>
+			<hr className='text-light-gray opacity-100 my-4'/>
+		</>
+	)
+}