@spacemade/ui 0.0.1

package/src/components/product/modal/UpdateProductVersionModal.tsx

@@ -0,0 +1,236 @@
+import { useEffect } from 'react'
+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 Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import Select from '@components/common/forms/Select'
+import Textarea from '@components/common/forms/Textarea'
+import {
+  Product,
+  ProductVersion,
+  ProductVersionPayload,
+  ProductVersionStatus,
+} from '@store/model'
+import { useProductVersionStore } from '@hooks/product/useProductVersionStore'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+
+const VERSION_REGEX =
+  /^(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)(\.(?:0|[1-9]\d*))?(?:-(?:(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+(?:[0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/
+
+interface FormValues extends FieldValues {
+  name: string
+  description: string
+  resourceUrl: string
+  resourceSpec: string
+  resourceParams: string
+  versionStatus: ProductVersionStatus
+  rank: string
+}
+
+export const UpdateProductVersionModal = ({
+  version,
+  product,
+  isOpen,
+  onClose,
+}: {
+  version?: ProductVersion | null
+  product: Product
+  isOpen: boolean
+  onClose: () => void
+}) => {
+  const { saveProductVersion, deleteProductVersion, isProductVersionNameAvailable } = useProductVersionStore()
+
+  const {
+    register,
+    control,
+    getValues,
+    handleSubmit,
+    reset,
+    clearErrors,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>()
+
+  useEffect(() => {
+    reset({
+      name: version?.name || '0.1',
+      description: version?.description || '',
+      resourceUrl: version?.resourceUrl || '',
+      resourceSpec: version?.resourceSpec || '',
+      resourceParams: version?.resourceParams || '',
+      versionStatus: version?.versionStatus || ProductVersionStatus.Draft,
+      rank: version?.rank != null ? String(version.rank) : '0',
+    })
+  }, [version, reset])
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    try {
+      const isNameAvailable = await isProductVersionNameAvailable(data.name, product.id, version)
+      if (!isNameAvailable) {
+        setError('name', { message: 'This version already exists for this product' })
+        return
+      }
+
+      const payload: ProductVersionPayload = {
+        ...(version?.id ? { id: version.id } : {}),
+        productId: product.id,
+        name: data.name,
+        description: data.description || '',
+        resourceUrl: data.resourceUrl || null,
+        resourceSpec: data.resourceSpec || null,
+        resourceParams: data.resourceParams || null,
+        versionStatus: data.versionStatus,
+        rank: Number(data.rank || 0),
+      }
+
+      await saveProductVersion(!version?.id, payload)
+      toast.success('Version saved successfully')
+      onClose()
+    } catch (error: any) {
+      toast.error(error?.data?.message || DEFAULT_ERROR_MESSAGE)
+    }
+  }
+
+  const onDelete = async () => {
+    if (!version?.id) return
+
+    try {
+      await deleteProductVersion(version.id)
+      toast.success('Version deleted successfully')
+      onClose()
+    } catch (error: any) {
+      toast.error(error?.data?.message || DEFAULT_ERROR_MESSAGE)
+    }
+  }
+
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose} size="xl">
+      <DrawerOverlay />
+      <DrawerContent className="drawer">
+        <DrawerCloseButton />
+        <DrawerHeader>{version ? 'Update' : 'Create'} Product Version</DrawerHeader>
+        <DrawerBody>
+          <form id="product-version-form" onSubmit={handleSubmit(onSubmit)}>
+            <div className="row">
+              <div className="col-md-6 mb-4 mt-3">
+                <Input
+                  label="Version"
+                  placeholder="1.0.0"
+                  errors={errors}
+                  register={register('name', {
+                    required: 'Version is required',
+                    pattern: {
+                      value: VERSION_REGEX,
+                      message: 'Use a semantic version such as 1.0.0 or 1.0.0-beta.1',
+                    },
+                  })}
+                />
+              </div>
+
+              <div className="col-md-3 mb-4 mt-3">
+                <Select
+                  label="Status"
+                  control={control}
+                  getValues={getValues}
+                  register={register('versionStatus', { required: true })}
+                  options={[
+                    { label: 'Draft', value: ProductVersionStatus.Draft },
+                    { label: 'Active', value: ProductVersionStatus.Active },
+                    { label: 'Deprecated', value: ProductVersionStatus.Deprecated },
+                  ]}
+                />
+              </div>
+
+              <div className="col-md-3 mb-4 mt-3">
+                <Input
+                  label="Rank"
+                  placeholder="0"
+                  errors={errors}
+                  register={register('rank', {
+                    validate: (value) => Number.isInteger(Number(value)) || 'Rank must be an integer',
+                  })}
+                />
+              </div>
+
+              <div className="col-12 mb-4">
+                <Input
+                  label="Resource URL"
+                  placeholder="s3://templates/cms/cloudformation.yaml"
+                  errors={errors}
+                  register={register('resourceUrl')}
+                />
+              </div>
+
+              <div className="col-12 mb-4">
+                <Textarea
+                  label="Description"
+                  placeholder="Optional version description"
+                  errors={errors}
+                  register={register('description')}
+                />
+              </div>
+
+              <div className="col-12 mb-4">
+                <Textarea
+                  label="Resource Spec"
+                  placeholder="JSON or YAML provider resource spec"
+                  errors={errors}
+                  register={register('resourceSpec')}
+                />
+              </div>
+
+              <div className="col-12 mb-4">
+                <Textarea
+                  label="Resource Params"
+                  placeholder="JSON/YAML parameters supplied during fulfillment"
+                  errors={errors}
+                  register={register('resourceParams')}
+                />
+              </div>
+            </div>
+          </form>
+        </DrawerBody>
+
+        <DrawerFooter className="d-flex justify-content-between gap-2">
+          <div>
+            {version?.id ? (
+              <Button
+                ariaLabel="Delete version"
+                color="danger"
+                className="text-white"
+                onClick={onDelete}
+                disabled={isSubmitting}
+              >
+                Delete
+              </Button>
+            ) : null}
+          </div>
+
+          <div className="d-flex gap-2">
+            <Button onClick={onClose}>Cancel</Button>
+            <Button
+              type="submit"
+              color="primary"
+              className="text-white"
+              form="product-version-form"
+              isLoading={isSubmitting}
+              disabled={isSubmitting}
+              onClick={() => clearErrors(['server-error'])}
+            >
+              Save
+            </Button>
+          </div>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}

package/src/components/product/table/ProductCouponsTable.tsx

@@ -0,0 +1,100 @@
+import { SyntheticEvent, useState } from 'react'
+import { useDisclosure } from '@chakra-ui/react'
+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 { ProductCoupon, EntityStatus } from '@store/model'
+import {
+  useDeleteProductCouponMutation,
+  useGetProductCouponsQuery,
+} from '@store/slice/api/productCouponsApiSlice'
+import { UpdateProductCouponModal } from '@components/product/modal/UpdateProductCouponModal'
+import { currencyPipe } from '@helpers/string'
+
+export const ProductCouponsTable = () => {
+  const { data, isFetching, isLoading } = useGetProductCouponsQuery({ page: 1, limit: 100 })
+  const [deleteCoupon] = useDeleteProductCouponMutation()
+  const [activeCoupon, setActiveCoupon] = useState<ProductCoupon | null>(null)
+  const editModal = useDisclosure()
+  const deleteDialog = useDisclosure()
+
+  const onRowClick = (event: SyntheticEvent, coupon: ProductCoupon) => {
+    const parent = (event.target as HTMLElement).closest('[data-type]')
+    if (parent?.getAttribute('data-type') === 'delete') {
+      setActiveCoupon(coupon)
+      deleteDialog.onOpen()
+      return
+    }
+
+    setActiveCoupon(coupon)
+    editModal.onOpen()
+  }
+
+  const formatDiscount = (coupon: ProductCoupon) => {
+    if (coupon.percentOff != null) return `${coupon.percentOff}%`
+    if (coupon.amountOff != null) return currencyPipe(coupon.amountOff / 100)
+    return '—'
+  }
+
+  return (
+    <>
+      <table className="table">
+        <thead>
+          <tr>
+            <th>Code</th>
+            <th>Name</th>
+            <th>Discount</th>
+            <th>Status</th>
+            <th className="opacity-0">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {!isFetching && data?.results?.map((coupon) => (
+            <tr key={coupon.id} className="pointer" onClick={(event) => onRowClick(event, coupon)}>
+              <td className="align-middle">{coupon.code}</td>
+              <td className="align-middle">{coupon.name}</td>
+              <td className="align-middle">{formatDiscount(coupon)}</td>
+              <td className="align-middle">
+                <Badge
+                  className="px-3"
+                  bgColor={coupon.status === EntityStatus.live ? 'success' : 'warning'}
+                  textColor={coupon.status === EntityStatus.live ? 'white' : 'dark'}
+                  label={coupon.status}
+                />
+              </td>
+              <td className="text-center align-middle">
+                <Button className="no-min-size w-xs-50p h-100 bg-hover-background" data-type="delete">
+                  <span className="bi bi-trash" />
+                </Button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      {isFetching ? (
+        <div className="w-100 d-flex justify-content-center py-4">
+          <Spinner color="primary" />
+        </div>
+      ) : null}
+
+      {!isLoading && !isFetching && !data?.results?.length ? (
+        <div className="d-flex flex-column align-items-center justify-content-center">
+          <p>You don&apos;t have any coupons yet</p>
+        </div>
+      ) : null}
+
+      <UpdateProductCouponModal coupon={activeCoupon} isOpen={editModal.isOpen} onClose={editModal.onClose} />
+
+      {activeCoupon ? (
+        <DeleteDialog
+          isOpen={deleteDialog.isOpen}
+          onClose={deleteDialog.onClose}
+          entityDescription={activeCoupon.code}
+          onDelete={() => deleteCoupon({ id: activeCoupon.id }).unwrap()}
+        />
+      ) : null}
+    </>
+  )
+}

package/src/components/product/table/ProductPlansTable.tsx

@@ -0,0 +1,118 @@
+import { SyntheticEvent, useMemo, useState } from 'react'
+import { useDisclosure } from '@chakra-ui/react'
+import isEmpty from 'lodash/isEmpty'
+import Badge from '@components/common/badge/Badge'
+import Button from '@components/common/button/Button'
+import Spinner from '@components/common/loading/Spinner'
+import {
+  EntityStatus,
+  Product,
+  ProductPlan,
+  ProductPlanType,
+} from '@store/model'
+import { useGetProductPlansQuery } from '@store/slice/api/productPlansApiSlice'
+import { UpdateProductPlanModal } from '@components/product/modal/UpdateProductPlanModal'
+import { currencyPipe } from '@helpers/string'
+
+const billingSuffix = (plan: ProductPlan) => {
+  if (plan.type === ProductPlanType.OneTime) return 'one-time'
+  return `/${plan.billingPeriod}`
+}
+
+export const ProductPlansTable = ({ product }: { product: Product }) => {
+  const createModal = useDisclosure()
+  const editModal = useDisclosure()
+
+  const { data, isFetching, isLoading } = useGetProductPlansQuery({
+    productId: product.id,
+    page: 1,
+    limit: 100,
+  })
+
+  const [activePlan, setActivePlan] = useState<ProductPlan | null>(null)
+
+  const rows = useMemo(() => data?.results ?? [], [data?.results])
+
+  const onRowClick = (_event: SyntheticEvent, plan: ProductPlan) => {
+    setActivePlan(plan)
+    editModal.onOpen()
+  }
+
+  return (
+    <>
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <h5 className="mb-0">Product Plans</h5>
+        <Button
+          color="primary"
+          className="text-white"
+          onClick={() => {
+            setActivePlan(null)
+            createModal.onOpen()
+          }}
+        >
+          New Plan
+        </Button>
+      </div>
+
+      <table className="table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Price</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {!isFetching &&
+            rows.map((plan) => (
+              <tr
+                key={plan.id}
+                className="pointer"
+                onClick={(event) => onRowClick(event, plan)}
+              >
+                <td className="align-middle">{plan.name}</td>
+                <td className="align-middle">
+                  {currencyPipe(Number(plan.amount || 0))} <span className="small">{billingSuffix(plan)}</span>
+                </td>
+                <td className="align-middle">
+                  <Badge
+                    className="px-3"
+                    bgColor={plan.status === EntityStatus.live ? 'success' : 'warning'}
+                    textColor={plan.status === EntityStatus.live ? 'white' : 'dark'}
+                    label={plan.status}
+                  />
+                </td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
+
+      {isFetching ? (
+        <div className="w-100 d-flex justify-content-center py-4">
+          <Spinner color="primary" />
+        </div>
+      ) : null}
+
+      {!isLoading && !isFetching && isEmpty(rows) ? (
+        <div className="d-flex flex-column align-items-center justify-content-center">
+          <p>You don&apos;t have any plans yet</p>
+        </div>
+      ) : null}
+
+      <UpdateProductPlanModal
+        plan={null}
+        product={product}
+        isOpen={createModal.isOpen}
+        onClose={createModal.onClose}
+      />
+
+      <UpdateProductPlanModal
+        plan={activePlan}
+        product={product}
+        isOpen={editModal.isOpen}
+        onClose={editModal.onClose}
+      />
+    </>
+  )
+}

package/src/components/product/table/ProductVersionsAdminTable.tsx

@@ -0,0 +1,103 @@
+import { useRouter } from '@lib/next-router'
+import isEmpty from 'lodash/isEmpty'
+import Badge from '@components/common/badge/Badge'
+import Spinner from '@components/common/loading/Spinner'
+import TablePaging from '@components/common/table/TablePaging'
+import { FullDateAndTimeFormat } from '@helpers/date'
+import { truncateString } from '@helpers/string'
+import { useSearchAndFilterCommon } from '@hooks'
+import { ProductVersionStatus } from '@store/model'
+import { useGetProductVersionsQuery } from '@store/slice/api/productVersionsApiSlice'
+
+const statusColor = (status: ProductVersionStatus) => {
+  if (status === ProductVersionStatus.Active) return 'success'
+  if (status === ProductVersionStatus.Deprecated) return 'secondary'
+  return 'warning'
+}
+
+export const ProductVersionsAdminTable = () => {
+  const {
+    query: { nameLike, status, limit, page },
+    push: redirect,
+  } = useRouter()
+  const {
+    getLimitFromQuery,
+    calculateProperPageNumber,
+  } = useSearchAndFilterCommon()
+  const pageLimit = getLimitFromQuery(limit, 50)
+
+  const {
+    data,
+    isFetching,
+    isLoading,
+  } = useGetProductVersionsQuery({
+    nameLike: nameLike?.toString(),
+    status: status?.toString() as ProductVersionStatus,
+    limit: pageLimit,
+    page: calculateProperPageNumber(page),
+  })
+
+  return (
+    <div className='mt-4'>
+      <table className='table'>
+        <thead>
+          <tr>
+            <th scope='col'>Version</th>
+            <th scope='col' className='d-none d-lg-table-cell'>Product</th>
+            <th scope='col' className='d-none d-xl-table-cell'>Resource</th>
+            <th scope='col' className='d-none d-lg-table-cell'>Modified</th>
+            <th scope='col' className='w-fit-content'>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data && !isFetching && data.results.map((version) => (
+            <tr
+              key={version.id}
+              className='pointer'
+              onClick={() => redirect(`/admin/versions/${version.id}`)}
+            >
+              <td>{version.name}</td>
+              <td className='d-none d-lg-table-cell'>
+                {version.product?.name || version.productId}
+              </td>
+              <td className='d-none d-xl-table-cell text-break'>
+                {version.resourceUrl ? truncateString(version.resourceUrl, 120) : 'No resource URL'}
+              </td>
+              <td className='d-none d-lg-table-cell'>
+                {FullDateAndTimeFormat(version.updatedAt)}
+              </td>
+              <td>
+                <Badge
+                  className='px-3'
+                  bgColor={statusColor(version.versionStatus)}
+                  textColor={version.versionStatus === ProductVersionStatus.Active ? 'white' : 'dark'}
+                  label={version.versionStatus}
+                />
+              </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'>
+          {nameLike ? (
+            <p>There are no versions to show that match your search</p>
+          ) : (
+            <p>{"You don't have any versions yet"}</p>
+          )}
+        </div>
+      )}
+
+      {!isEmpty(data?.results) && data?.count !== undefined && (
+        <TablePaging totalCount={data.count} defaultLimit={50} />
+      )}
+    </div>
+  )
+}

package/src/components/product/table/ProductVersionsTable.tsx

@@ -0,0 +1,111 @@
+import { SyntheticEvent, useMemo, useState } from 'react'
+import { useDisclosure } from '@chakra-ui/react'
+import isEmpty from 'lodash/isEmpty'
+import Badge from '@components/common/badge/Badge'
+import Button from '@components/common/button/Button'
+import Spinner from '@components/common/loading/Spinner'
+import { Product, ProductVersion, ProductVersionStatus } from '@store/model'
+import { useGetProductVersionsQuery } from '@store/slice/api/productVersionsApiSlice'
+import { UpdateProductVersionModal } from '@components/product/modal/UpdateProductVersionModal'
+
+const statusColor = (status: ProductVersionStatus) => {
+  if (status === ProductVersionStatus.Active) return 'success'
+  if (status === ProductVersionStatus.Deprecated) return 'secondary'
+  return 'warning'
+}
+
+export const ProductVersionsTable = ({ product }: { product: Product }) => {
+  const createModal = useDisclosure()
+  const editModal = useDisclosure()
+
+  const { data, isFetching, isLoading } = useGetProductVersionsQuery({
+    productId: product.id,
+    page: 1,
+    limit: 100,
+  })
+
+  const [activeVersion, setActiveVersion] = useState<ProductVersion | null>(null)
+
+  const rows = useMemo(() => data?.results ?? [], [data?.results])
+
+  const onRowClick = (_event: SyntheticEvent, version: ProductVersion) => {
+    setActiveVersion(version)
+    editModal.onOpen()
+  }
+
+  return (
+    <>
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <h5 className="mb-0">Product Versions</h5>
+        <Button
+          color="primary"
+          className="text-white"
+          onClick={() => {
+            setActiveVersion(null)
+            createModal.onOpen()
+          }}
+        >
+          New Version
+        </Button>
+      </div>
+
+      <table className="table">
+        <thead>
+          <tr>
+            <th>Version</th>
+            <th>Resource</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {!isFetching &&
+            rows.map((version) => (
+              <tr
+                key={version.id}
+                className="pointer"
+                onClick={(event) => onRowClick(event, version)}
+              >
+                <td className="align-middle">{version.name}</td>
+                <td className="align-middle text-break">{version.resourceUrl || 'No resource URL'}</td>
+                <td className="align-middle">
+                  <Badge
+                    className="px-3"
+                    bgColor={statusColor(version.versionStatus)}
+                    textColor={version.versionStatus === ProductVersionStatus.Active ? 'white' : 'dark'}
+                    label={version.versionStatus}
+                  />
+                </td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
+
+      {isFetching ? (
+        <div className="w-100 d-flex justify-content-center py-4">
+          <Spinner color="primary" />
+        </div>
+      ) : null}
+
+      {!isLoading && !isFetching && isEmpty(rows) ? (
+        <div className="d-flex flex-column align-items-center justify-content-center">
+          <p>You don&apos;t have any versions yet</p>
+        </div>
+      ) : null}
+
+      <UpdateProductVersionModal
+        version={null}
+        product={product}
+        isOpen={createModal.isOpen}
+        onClose={createModal.onClose}
+      />
+
+      <UpdateProductVersionModal
+        version={activeVersion}
+        product={product}
+        isOpen={editModal.isOpen}
+        onClose={editModal.onClose}
+      />
+    </>
+  )
+}