@spacemade/ui 0.0.1

package/src/components/product/form/UpdateProductForm.tsx

@@ -0,0 +1,718 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useRouter } from '@lib/next-router'
+import { FieldValues, SubmitHandler, useFieldArray, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import {
+  EntityStatus,
+  Media,
+  Product,
+  ProductPayload,
+} from '@store/model'
+import Button from '@components/common/button/Button'
+import AdvanceAccordion from '@components/common/forms/AdvanceAccordion'
+import Input from '@components/common/forms/Input'
+import Select, { OptionType } from '@components/common/forms/Select'
+import Textarea from '@components/common/forms/Textarea'
+import AppPageTitle from '@components/common/header/AppPageTitle'
+import { MediaPickerBox } from '@components/media/items/MediaPickerBox'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import {
+  DEFAULT_ERROR_MESSAGE,
+  SLUG_REGEX,
+} from '@helpers/constants'
+import { useProductStore } from '@hooks'
+import { MediaScreenshotPicker } from '@components/product/button/MediaScreenshotPicker'
+import HTMLEditor from '@components/common/forms/HTMLEditor'
+import Badge from '@components/common/badge/Badge'
+import { ProductPlansTable } from '@components/product/table/ProductPlansTable'
+import { ProductVersionsTable } from '@components/product/table/ProductVersionsTable'
+import { useGetBillingUnitTypesQuery } from '@store/slice/api/billingUnitTypesApiSlice'
+import { transformToURLFormat } from '@helpers/string'
+
+interface PlanFeatureRow {
+  billingUnitTypeId: string
+  planFeatureId?: string | null
+  isEnabled: boolean
+  includedUnits?: number | ''
+  overageUnitAmount?: string
+  hardCap: boolean
+  featureName?: string
+  slug?: string
+  stripeMeterId?: string | null
+  stripePriceId?: string | null
+}
+
+interface FormValues extends FieldValues {
+  name: string
+  slug: string
+  description: string | null
+  intro: string | null
+  status: string
+  planFeatures: PlanFeatureRow[]
+}
+
+const buildPlanFeatureSlug = (productSlug: string, featureNameOrSlug: string) => {
+  const base = `${productSlug || ''} ${featureNameOrSlug || ''}`.trim()
+  return base ? transformToURLFormat(base) : ''
+}
+
+const ENTITLEMENT_SORT_PRIORITY = [
+  'request',
+  'input-token',
+  'output-token',
+  'user',
+  'provider',
+  'second',
+  'project',
+  'storage',
+]
+
+const resolveEntitlementPriority = (value: string): number => {
+  const text = String(value || '').toLowerCase()
+  const checks: Array<{ key: string; match: (v: string) => boolean }> = [
+    { key: 'request', match: (v) => v.includes('request') },
+    { key: 'input-token', match: (v) => v.includes('input-token') || v.includes('input token') },
+    { key: 'output-token', match: (v) => v.includes('output-token') || v.includes('output token') },
+    { key: 'user', match: (v) => v.includes('user') },
+    { key: 'provider', match: (v) => v.includes('provider') },
+    { key: 'second', match: (v) => v.includes('second') },
+    { key: 'project', match: (v) => v.includes('project') },
+    { key: 'storage', match: (v) => v.includes('storage') },
+  ]
+
+  for (const check of checks) {
+    if (!check.match(text)) continue
+    const idx = ENTITLEMENT_SORT_PRIORITY.indexOf(check.key)
+    if (idx !== -1) return idx
+  }
+
+  return ENTITLEMENT_SORT_PRIORITY.length
+}
+
+const normalizeDecimalForUI = (value: unknown): string => {
+  if (value == null) return ''
+
+  let text = String(value).trim().replace(/,/g, '.')
+  if (!/^\d*(\.\d+)?$/.test(text)) return text
+
+  text = text.replace(/(\.\d*?)0+$/, '$1')
+  text = text.replace(/\.$/, '')
+
+  if (text.startsWith('0.') && text !== '0') {
+    text = text.slice(1)
+  }
+
+  return text
+}
+
+const normalizeDecimalForSubmit = (value: unknown): string | null => {
+  let text = String(value ?? '').trim().replace(/,/g, '.')
+  if (!text || text === '.') return null
+
+  if (!/^\d*(\.\d{0,12})?$/.test(text)) return null
+
+  text = text.replace(/(\.\d*?)0+$/, '$1')
+  text = text.replace(/\.$/, '')
+
+  return text || null
+}
+
+export const UpdateProductForm = ({ product }: { product: Product }) => {
+  const router = useRouter()
+  const { saveProduct, removeProduct, isProductSlugAvailable } = useProductStore()
+
+  const [productIconMediaIdSelected, setProductIconMediaIdSelected] = useState<
+    string | null | undefined
+  >(product.productIconMedia?.media?.id ?? undefined)
+
+  const [screenshotMediaIdsSelected, setScreenshotMediaIdsSelected] = useState<string[]>(
+    product.screenshots?.map((item) => item.media.id) || []
+  )
+
+  const {
+    data: billingUnitTypesRes,
+    isFetching: isFetchingBillingUnitTypes,
+    error: billingUnitTypesError,
+  } = useGetBillingUnitTypesQuery({})
+
+  const billingUnitTypes: Array<{ id: string; name?: string; key?: string }> =
+    (billingUnitTypesRes as any)?.items ?? (billingUnitTypesRes as any) ?? []
+
+  const billingUnitTypeOptions: OptionType[] = useMemo(() => {
+    return [...billingUnitTypes]
+      .map((unitType, originalIndex) => ({
+        value: String(unitType.id),
+        label: unitType.name ?? unitType.key ?? String(unitType.id),
+        sortText: `${unitType.name ?? ''} ${unitType.key ?? ''}`,
+        originalIndex,
+      }))
+      .sort((a, b) => {
+        const rankA = resolveEntitlementPriority(a.sortText)
+        const rankB = resolveEntitlementPriority(b.sortText)
+        if (rankA !== rankB) return rankA - rankB
+
+        const byLabel = String(a.label || '').localeCompare(String(b.label || ''))
+        if (byLabel !== 0) return byLabel
+
+        return a.originalIndex - b.originalIndex
+      })
+      .map(({ value, label }) => ({ value, label }))
+  }, [billingUnitTypes])
+
+  const billingUnitTypeById = useMemo(
+    () => new Map(billingUnitTypes.map((unitType) => [String(unitType.id), unitType])),
+    [billingUnitTypes]
+  )
+
+  const mapEntitlementsToPlanFeatures = (currentProduct: Product): PlanFeatureRow[] => {
+    const entitlements =
+      (currentProduct as any)?.featureEntitlements ??
+      (currentProduct as any)?.feature_entitlements ??
+      []
+
+    return (entitlements as any[]).map((entitlement) => {
+      const feature = entitlement.feature
+      const billingUnitTypeId = String(
+        entitlement.billingUnitTypeId ??
+          entitlement.billing_unit_type_id ??
+          feature?.measureUnitType?.id ??
+          feature?.measure_unit_type_id ??
+          feature?.measureUnitTypeId ??
+          entitlement.featureId ??
+          entitlement.feature_id ??
+          ''
+      )
+      const featureName =
+        feature?.measureUnitType?.name ??
+        feature?.measureUnitType?.key ??
+        feature?.name ??
+        feature?.slug ??
+        entitlement.featureName ??
+        ''
+      const slug =
+        entitlement.slug || buildPlanFeatureSlug((currentProduct as any).slug || '', featureName)
+
+      return {
+        planFeatureId: entitlement.id ?? null,
+        billingUnitTypeId,
+        isEnabled: !!(entitlement.isEnabled ?? entitlement.is_enabled ?? true),
+        includedUnits:
+          (entitlement.includedUnits ?? entitlement.included_units ?? '') === null
+            ? ''
+            : entitlement.includedUnits ?? entitlement.included_units ?? '',
+        overageUnitAmount: normalizeDecimalForUI(
+          entitlement.overageUnitAmount ?? entitlement.overage_unit_amount ?? ''
+        ),
+        hardCap: !!(entitlement.hardCap ?? entitlement.hard_cap ?? false),
+        featureName,
+        slug,
+        stripeMeterId: entitlement.stripeMeterId ?? entitlement.stripe_meter_id ?? null,
+        stripePriceId: entitlement.stripePriceId ?? entitlement.stripe_price_id ?? null,
+      }
+    })
+  }
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    getValues,
+    clearErrors,
+    setValue,
+    control,
+    watch,
+    formState,
+  } = useForm<FormValues>({
+    defaultValues: {
+      name: product.name,
+      slug: product.slug,
+      intro: product.intro,
+      description: product.description,
+      status: product.status,
+      planFeatures: mapEntitlementsToPlanFeatures(product),
+    },
+  })
+
+  const { errors, isSubmitting } = formState
+  const {
+    fields: planFeatureFields,
+    append: appendPlanFeature,
+    remove: removePlanFeature,
+  } = useFieldArray({
+    control,
+    name: 'planFeatures',
+  })
+
+  const productSlugWatch = watch('slug')
+  const descriptionWatch = watch('description')
+  const planFeaturesWatch = watch('planFeatures')
+
+  useEffect(() => {
+    ;(planFeaturesWatch || []).forEach((planFeature, idx) => {
+      const unitType = planFeature?.billingUnitTypeId
+        ? billingUnitTypeById.get(String(planFeature.billingUnitTypeId))
+        : undefined
+      const featureName =
+        unitType?.name ?? unitType?.key ?? planFeature?.featureName ?? ''
+      const slug = buildPlanFeatureSlug(productSlugWatch || '', featureName)
+      setValue(`planFeatures.${idx}.slug`, slug, { shouldDirty: true })
+    })
+  }, [productSlugWatch, planFeaturesWatch, billingUnitTypeById, setValue])
+
+  useEffect(() => {
+    planFeatureFields.forEach((_, idx) => {
+      const value = getValues(`planFeatures.${idx}.billingUnitTypeId`)
+      if (value != null && typeof value !== 'string') {
+        setValue(`planFeatures.${idx}.billingUnitTypeId`, String(value), { shouldDirty: false })
+      }
+    })
+  }, [getValues, planFeatureFields, setValue])
+
+  useEffect(() => {
+    if (!billingUnitTypes.length) return
+
+    const unitTypeByName = new Map<string, string>()
+    for (const unitType of billingUnitTypes) {
+      const name = (unitType.name || '').toLowerCase()
+      const key = (unitType.key || '').toLowerCase()
+      if (name) unitTypeByName.set(name, String(unitType.id))
+      if (key) unitTypeByName.set(key, String(unitType.id))
+    }
+
+    ;(planFeaturesWatch || []).forEach((planFeature, idx) => {
+      let unitTypeId = planFeature?.billingUnitTypeId
+        ? String(planFeature.billingUnitTypeId)
+        : ''
+
+      if (!unitTypeId && planFeature?.featureName) {
+        const resolved = unitTypeByName.get(planFeature.featureName.toLowerCase())
+        if (resolved) {
+          unitTypeId = resolved
+          setValue(`planFeatures.${idx}.billingUnitTypeId`, resolved, { shouldDirty: false })
+        }
+      }
+
+      if (!unitTypeId) return
+
+      const unitType = billingUnitTypeById.get(unitTypeId)
+      const featureName = unitType?.name ?? unitType?.key ?? planFeature?.featureName ?? ''
+      const slug = buildPlanFeatureSlug(productSlugWatch || '', featureName)
+      const current = getValues(`planFeatures.${idx}.slug`)
+
+      if (!current || current !== slug) {
+        setValue(`planFeatures.${idx}.slug`, slug, { shouldDirty: false })
+      }
+    })
+  }, [billingUnitTypes, billingUnitTypeById, getValues, planFeaturesWatch, productSlugWatch, setValue])
+
+  const sortedPlanFeatureEntries = useMemo(() => {
+    return planFeatureFields
+      .map((row, idx) => ({ row, idx }))
+      .sort((a, b) => {
+        const watchedA = planFeaturesWatch?.[a.idx]
+        const watchedB = planFeaturesWatch?.[b.idx]
+
+        const unitTypeIdA = String(
+          watchedA?.billingUnitTypeId ?? (a.row as any)?.billingUnitTypeId ?? ''
+        )
+        const unitTypeIdB = String(
+          watchedB?.billingUnitTypeId ?? (b.row as any)?.billingUnitTypeId ?? ''
+        )
+
+        const unitTypeA = unitTypeIdA ? billingUnitTypeById.get(unitTypeIdA) : undefined
+        const unitTypeB = unitTypeIdB ? billingUnitTypeById.get(unitTypeIdB) : undefined
+
+        const textA = [
+          watchedA?.slug ?? (a.row as any)?.slug ?? '',
+          unitTypeA?.name ?? '',
+          unitTypeA?.key ?? '',
+          watchedA?.featureName ?? (a.row as any)?.featureName ?? '',
+        ].join(' ')
+
+        const textB = [
+          watchedB?.slug ?? (b.row as any)?.slug ?? '',
+          unitTypeB?.name ?? '',
+          unitTypeB?.key ?? '',
+          watchedB?.featureName ?? (b.row as any)?.featureName ?? '',
+        ].join(' ')
+
+        const rankA = resolveEntitlementPriority(textA)
+        const rankB = resolveEntitlementPriority(textB)
+        if (rankA !== rankB) return rankA - rankB
+
+        return a.idx - b.idx
+      })
+  }, [billingUnitTypeById, planFeatureFields, planFeaturesWatch])
+
+  const onDeleteProduct = async () => {
+    await removeProduct(product)
+    router.push(`/admin/products`)
+    toast.success('Your product has been deleted successfully')
+  }
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    const featureEntitlements = (data.planFeatures || [])
+      .filter((row) => row && row.billingUnitTypeId)
+      .map((row) => ({
+        id: row.planFeatureId ?? null,
+        featureId: String(row.billingUnitTypeId),
+        slug: row.slug || undefined,
+        isEnabled: !!row.isEnabled,
+        includedUnits:
+          row.includedUnits === '' || row.includedUnits == null
+            ? null
+            : Number(row.includedUnits),
+        overageUnitAmount: normalizeDecimalForSubmit(row.overageUnitAmount),
+        hardCap: !!row.hardCap,
+        stripeMeterId: row.stripeMeterId ?? null,
+        stripePriceId: row.stripePriceId ?? null,
+      }))
+
+    const payload: ProductPayload & { id: string } = {
+      id: product.id,
+      name: data.name,
+      slug: data.slug,
+      intro: data.intro ?? undefined,
+      description: data.description ?? undefined,
+      status: data.status as EntityStatus,
+      productIconMediaId: productIconMediaIdSelected || undefined,
+      screenshotMediaIds: screenshotMediaIdsSelected,
+      featureEntitlements,
+    }
+
+    try {
+      await saveProduct(false, payload)
+      toast.success('Your product has been saved successfully')
+    } catch (error: any) {
+      setError('server-error', { type: 'custom', message: 'server-error' })
+      toast.error(
+        error.status === HTTPErrorStatus.UNPROCESSABLE_ENTITY
+          ? error.data.message
+          : DEFAULT_ERROR_MESSAGE
+      )
+    }
+  }
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)} className="pb-8 pb-lg-0">
+        <div className="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4 mt-3">
+          <div className="d-flex gap-2 align-items-center">
+            <AppPageTitle title="Update Product" />
+            <Badge
+              className="px-3 fw-bold"
+              bgColor="light-gray"
+              textColor="dark"
+              label={product.type}
+              isOutline
+            />
+          </div>
+          <div className="d-flex align-items-center gap-3">
+            <Button
+              type="submit"
+              className="text-white w-xs-140p"
+              color="primary"
+              isLoading={isSubmitting}
+              disabled={isSubmitting}
+              onClick={() => clearErrors(['server-error'])}
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+
+        <div className="row mx-auto g-4 g-lg-5">
+          <div className="col-lg-8 ps-lg-0">
+              <Input
+                register={register('name', { required: 'This field is required' })}
+                errors={errors}
+                placeholder="Enter Your Product Name"
+                label="Name"
+                getValues={getValues}
+              />
+
+            <div className="mt-4">
+              <Input
+                register={register('slug', {
+                  required: 'This field is required',
+                  pattern: {
+                    value: SLUG_REGEX,
+                    message:
+                      'The slug must only contain lowercase letters, numbers, and hyphen',
+                  },
+                  minLength: {
+                    value: 2,
+                    message: 'Your product slug must have at least 2 characters',
+                  },
+                  validate: async (value) =>
+                    await isProductSlugAvailable(value, product),
+                })}
+                customErrorMessage="This slug is already taken"
+                errors={errors}
+                placeholder="Enter your product slug"
+                label="Slug"
+                getValues={getValues}
+              />
+            </div>
+
+            <div className="mt-4">
+              <Textarea
+                register={register('intro')}
+                errors={errors}
+                label="Intro"
+                placeholder="Enter your intro paragraph"
+                getValues={getValues}
+              />
+            </div>
+
+            <div className="mt-4">
+              <HTMLEditor
+                labelText="Description"
+                name="description"
+                value={descriptionWatch || ''}
+                onChange={(value) => setValue('description', value)}
+                height={125}
+              />
+            </div>
+
+            <div>
+              <MediaScreenshotPicker
+                screenshots={product.screenshots?.map((item) => item.media)}
+                onSelectMedia={(assets: Media[]) =>
+                  setScreenshotMediaIdsSelected(assets.map((item) => item.id))
+                }
+              />
+            </div>
+
+            <div className="mt-4">
+              <h2 className="h6 mb-2">Product Entitlements</h2>
+
+              <div className="d-flex align-items-center justify-content-between mb-2">
+                <div />
+                <Button
+                  type="button"
+                  className="border-light-gray text-hover-white"
+                  outline
+                  onClick={() => {
+                    appendPlanFeature({
+                      billingUnitTypeId: '',
+                      planFeatureId: null,
+                      isEnabled: true,
+                      includedUnits: '',
+                      overageUnitAmount: '',
+                      hardCap: false,
+                      slug: '',
+                      stripeMeterId: null,
+                      stripePriceId: null,
+                    })
+                  }}
+                >
+                  + Add unit type
+                </Button>
+              </div>
+
+              {isFetchingBillingUnitTypes ? (
+                <p className="text-muted small">Loading unit types...</p>
+              ) : null}
+
+              {!isFetchingBillingUnitTypes &&
+              !billingUnitTypesError &&
+              billingUnitTypes.length === 0 ? (
+                <div className="alert alert-warning py-2">
+                  No billing unit types found. Create billing unit types first.
+                </div>
+              ) : null}
+
+              {billingUnitTypesError ? (
+                <div className="alert alert-danger py-2">Could not load billing unit types.</div>
+              ) : null}
+
+              <div className="overflow-auto">
+                {sortedPlanFeatureEntries.map(({ row, idx }) => (
+                  <div
+                    key={row.id}
+                    className="d-flex flex-nowrap align-items-center gap-2 mb-2 pb-1"
+                    style={{ minWidth: 620 }}
+                  >
+                    <div className="flex-shrink-0" style={{ width: 220, minWidth: 220 }}>
+                      <Select
+                        name={`planFeatures.${idx}.billingUnitTypeId`}
+                        label="Unit type"
+                        options={billingUnitTypeOptions}
+                        allowNone
+                        emptyOptionLabel="Select a unit type"
+                        control={control}
+                        getValues={getValues}
+                        errors={errors}
+                        onChange={(option: any) => {
+                          const selectedUnitType = option?.value
+                            ? billingUnitTypeById.get(String(option.value))
+                            : undefined
+                          const featureName =
+                            selectedUnitType?.name ?? selectedUnitType?.key ?? option?.label ?? ''
+                          const slug = buildPlanFeatureSlug(getValues('slug') || '', featureName)
+
+                          setValue(
+                            `planFeatures.${idx}.billingUnitTypeId`,
+                            option?.value ?? '',
+                            {
+                              shouldDirty: true,
+                              shouldValidate: true,
+                            }
+                          )
+                          setValue(`planFeatures.${idx}.slug`, slug, { shouldDirty: true })
+                        }}
+                      />
+
+                      <input
+                        type="hidden"
+                        defaultValue={String((row as any).planFeatureId ?? '')}
+                        {...register(`planFeatures.${idx}.planFeatureId` as const)}
+                      />
+                      <input type="hidden" {...register(`planFeatures.${idx}.slug` as const)} />
+                    </div>
+
+                    <input
+                      type="hidden"
+                      defaultValue={String((row as any).isEnabled ?? true)}
+                      {...register(`planFeatures.${idx}.isEnabled` as const, {
+                        setValueAs: (value) => value === true || value === 'true',
+                      })}
+                    />
+
+                    <div className="flex-shrink-0" style={{ width: 96, minWidth: 96 }}>
+                      <Input
+                        register={register(`planFeatures.${idx}.includedUnits` as const, {
+                          validate: (value) =>
+                            value === '' ||
+                            (Number.isFinite(Number(value)) && Number(value) >= 0) ||
+                            'Enter a non-negative integer or leave blank',
+                        })}
+                        errors={errors}
+                        placeholder="10,000"
+                        label="Included"
+                        getValues={getValues}
+                        inputProps={{ inputMode: 'numeric' }}
+                        defaultValue={(row as any).includedUnits ?? ''}
+                      />
+                    </div>
+
+                    <div className="flex-shrink-0" style={{ width: 130, minWidth: 130 }}>
+                      <Input
+                        register={register(`planFeatures.${idx}.overageUnitAmount` as const, {
+                          validate: (value) => {
+                            const text = String(value ?? '').trim().replace(/,/g, '.')
+                            if (text === '' || text === '.') return true
+                            return /^\d*(\.\d{0,12})?$/.test(text) || 'Use at most 12 decimals'
+                          },
+                        })}
+                        errors={errors}
+                        placeholder=""
+                        label="Overage"
+                        getValues={getValues}
+                        prependInput={<span className="text-dark">$</span>}
+                        allowDecimal
+                        maxDecimals={12}
+                        padDecimalsOnBlur={false}
+                        inputProps={{
+                          type: 'text',
+                          inputMode: 'decimal',
+                          step: 'any',
+                        }}
+                        defaultValue={(row as any).overageUnitAmount ?? ''}
+                      />
+                    </div>
+
+                    <div className="form-check mb-0 flex-shrink-0">
+                      <input
+                        className="form-check-input"
+                        type="checkbox"
+                        {...register(`planFeatures.${idx}.hardCap` as const)}
+                        id={`pf-hardcap-${idx}`}
+                        defaultChecked={Boolean((row as any).hardCap)}
+                      />
+                      <label className="form-check-label text-nowrap" htmlFor={`pf-hardcap-${idx}`}>
+                        Hard cap
+                      </label>
+                    </div>
+
+                    <input
+                      type="hidden"
+                      defaultValue={(row as any).stripeMeterId ?? ''}
+                      {...register(`planFeatures.${idx}.stripeMeterId` as const)}
+                    />
+                    <input
+                      type="hidden"
+                      defaultValue={(row as any).stripePriceId ?? ''}
+                      {...register(`planFeatures.${idx}.stripePriceId` as const)}
+                    />
+
+                    <Button
+                      className="btn btn-outline-light border-light-gray rounded-md d-flex align-items-center justify-content-center"
+                      style={{ minWidth: 40, width: 40, padding: 0 }}
+                      onClick={() => removePlanFeature(idx)}
+                      title="Remove feature"
+                    >
+                      <i className="bi bi-trash fs-6"></i>
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="col-lg-4 pe-lg-0">
+            <div className="mb-4">
+              <MediaPickerBox
+                label="Product Image"
+                helperText="Click to select an image. This will appear in the post header and normal blogroll feed"
+                defaultMediaSelected={product.productIconMedia?.media}
+                onSelectImage={setProductIconMediaIdSelected}
+              />
+            </div>
+
+            <div className="mb-4">
+              <Select
+                label="Status"
+                register={register('status', { required: 'This field is required' })}
+                errors={errors}
+                options={[
+                  { value: EntityStatus.draft, label: 'Draft' },
+                  { value: EntityStatus.live, label: 'Live' },
+                ]}
+                control={control}
+                getValues={getValues}
+                setFirstAsDefault={false}
+              />
+            </div>
+
+          </div>
+        </div>
+      </form>
+
+      <div className="row">
+        <div className="col-lg-8 mt-4">
+          <ProductVersionsTable product={product} />
+        </div>
+      </div>
+
+      <div className="row">
+        <div className="col-lg-8 mt-5">
+          <ProductPlansTable product={product} />
+        </div>
+      </div>
+
+      <div className="row">
+        <div className="col-lg-8 mt-4">
+          <AdvanceAccordion
+            objectName={product.name}
+            entityName="product"
+            onDelete={onDeleteProduct}
+            canDelete={product.deletionStatus?.canDelete}
+            isUnableToDeleteMessage={product.deletionStatus?.message}
+          />
+        </div>
+      </div>
+    </>
+  )
+}