Convert a payload collection into a stepper with 3 steps.

[J4yJ3ff]

I am trying to learn payload, so I was following joshtriedCoding yt channel. I am trying to build on top of what he was showing. I have a product collection that works well and I want to convert it into stepper that has 3 steps. Each steps will contain some fields from that product collection. How can I create this custom component in the payload cms?

Below is the collection.

`import {
AfterChangeHook,
BeforeChangeHook,
AfterReadHook,
} from "payload/dist/collections/config/types";
import { PRODUCT_CATEGORIES } from "../../config";
import { Access, CollectionConfig } from "payload/types";
import { Product, ProductFile, User } from "../../payload-types";
import { stripe } from "../../lib/stripe";

const addUser: BeforeChangeHook = async ({ req, data, operation }) => {
if (operation === "create") {
const user = req.user;
return { ...data, user: user.id };
}
};

const syncUser: AfterChangeHook = async ({ req, doc }) => {
// console.log("Syncing user after change", { doc });
const fullUser = await req.payload.findByID({
collection: "users",
id: req.user.id,
});

// console.log("Full user", fullUser);
if (fullUser && typeof fullUser === "object") {
const { products } = fullUser;

const allIDs = [
  ...(products?.map((product) =>
    typeof product === "object" ? product.id : product
  ) || []),
];

const createdProductIDs = allIDs.filter(
  (id, index) => allIDs.indexOf(id) === index
);

const dataToUpdate = [...createdProductIDs, doc.id];

// console.log("Updating user products list", { dataToUpdate });

await req.payload.update({
  collection: "users",
  id: fullUser.id,
  data: {
    products: dataToUpdate,
  },
});

} else {
console.log("User not found or invalid user data", { userId: req.user.id });
}
};

const isAdminOrHasAccess =
(): Access =>
({ req: { user: _user } }) => {
const user = _user as User | undefined;

if (!user) return false;
if (user.role === "admin") return true;

const userProductIDs = (user.products || []).reduce<Array<string>>(
  (acc, product) => {
    if (!product) return acc;
    if (typeof product === "string") {
      acc.push(product);
    } else {
      acc.push(product.id);
    }

    return acc;
  },
  []
);

return {
  id: {
    in: userProductIDs,
  },
};

};

const updateProductFilesAfterApproval: AfterChangeHook = async ({
req,
doc,
previousDoc,
}) => {
if (
previousDoc.approvedForSale !== "approved" &&
doc.approvedForSale === "approved"
) {
const productFiles = await req.payload.find({
collection: "product_files",
where: {
id: {
equals: doc.id,
},
},
});

if (productFiles.docs) {
  for (const file of productFiles.docs) {
    const updatedFile: Partial<ProductFile> = {
      ...file,
      filename: `product-${doc.id}-${file.filename}`,
    };

    await req.payload.update({
      collection: "product_files",
      id: file.id,
      data: updatedFile,
    });
  }
}

}
};

export const Products: CollectionConfig = {
slug: "products",
admin: {
useAsTitle: "name",
},
access: {
read: isAdminOrHasAccess(),
update: isAdminOrHasAccess(),
delete: isAdminOrHasAccess(),
},
hooks: {
afterChange: [syncUser, updateProductFilesAfterApproval],
beforeChange: [
addUser,
async (args) => {
if (args.operation === "create") {
const data = args.data as Product;

      const createdProduct = await stripe.products.create({
        name: data.name,
        default_price_data: {
          currency: "USD",
          unit_amount: Math.round(data.price * 100),
        },
      });

      const updated: Product = {
        ...data,
        stripeId: createdProduct.id,
        priceId: createdProduct.default_price as string,
      };

      return updated;
    } else if (args.operation === "update") {
      const data = args.data as Product;

      const updatedProduct = await stripe.products.update(data.stripeId!, {
        name: data.name,
        default_price: data.priceId!,
      });

      const updated: Product = {
        ...data,
        stripeId: updatedProduct.id,
        priceId: updatedProduct.default_price as string,
      };

      return updated;
    }
  },
],

},
fields: [
{
name: "user",
type: "relationship",
relationTo: "users",
required: true,
hasMany: false,
admin: {
condition: () => false,
},
},
{
name: "name",
label: "Name",
type: "text",
required: true,
},
{
name: "description",
type: "textarea",
label: "Product details",
},
{
name: "price",
label: "Price in USD",
min: 0,
max: 1000,
type: "number",
required: true,
},
{
name: "category",
label: "Category",
type: "select",
options: PRODUCT_CATEGORIES.map(({ label, value }) => ({ label, value })),
required: true,
},
{
name: "product_files",
label: "Product file(s)",
type: "relationship",
relationTo: "product_files",
hasMany: false,
required: true,
},
{
name: "approvedForSale",
label: "Product Status",
type: "select",
defaultValue: "pending",
access: {
create: ({ req }) => req.user.role === "admin",
read: ({ req }) => req.user.role === "admin",
update: ({ req }) => req.user.role === "admin",
},
options: [
{
label: "Pending verification",
value: "pending",
},
{
label: "Approved",
value: "approved",
},
{
label: "Denied",
value: "denied",
},
],
},
{
name: "priceId",
access: {
create: () => false,
read: () => false,
update: () => false,
},
type: "text",
admin: {
hidden: true,
},
},
{
name: "stripeId",
access: {
create: () => false,
read: () => false,
update: () => false,
},
type: "text",
admin: {
hidden: true,
},
},
{
name: "images",
type: "array",
label: "Product images",
minRows: 1,
maxRows: 4,
required: true,
labels: {
singular: "Image",
plural: "Images",
},
fields: [
{
name: "image",
type: "upload",
relationTo: "media",
required: true,
},
],
},

{
  name: "status",
  type: "ui",
  label: "Status",
  admin: {
    position: "sidebar",
  },
},

],
};
`