Digital Products Recipe Example

Reference URL: https://docs.medusajs.com/resources/recipes/digital-products/examples/standard

In this guide, you'll learn how to support digital products in Medusa.

When you install a Medusa application, you get a fully-fledged commerce platform with support for customizations. Medusa provides all features related to products and managing them, and the Medusa Framework allows you to extend those features and implement your custom use case.

You can extend Medusa's product features to support selling, storing, and fulfilling digital products. In this guide, you'll customize Medusa to add the following features:

1. Support digital products with multiple media items.
2. Manage digital products from the admin dashboard.
3. Handle and fulfill digital product orders.
4. Allow customers to download their digital product purchases from the storefront.
5. All other commerce features that Medusa provides.

This guide provides an example of an approach to implement digital products. You're free to choose a different approach using the Medusa Framework.

• Digital Products Example Repository: Find the full code for this recipe example in this repository.
• OpenApi Specs for Postman: Imported this OpenApi Specs file into tools like Postman.

Step 1: Install a Medusa Application

Prerequisites

• Node.js v20+
• Git CLI tool
• PostgreSQL

Start by installing the Medusa application on your machine with the following command:

npx create-medusa-app@latest

You'll first be asked for the project's name. Then, when asked whether you want to install the Next.js Starter Storefront, choose Yes.

Afterwards, the installation process will start, which will install the Medusa application in a directory with your project's name. If you chose to install the Next.js starter, it'll be installed in a separate directory with the {project-name}-storefront name.

The Medusa application is composed of a headless Node.js server and an admin dashboard. The storefront is installed or custom-built separately and connects to the Medusa application through its REST endpoints, called API routes. Learn more about Medusa's architecture in this documentation.

Once the installation finishes successfully, the Medusa Admin dashboard will open with a form to create a new user. Enter the user's credential and submit the form. Afterwards, you can login with the new user and explore the dashboard.

Check out the troubleshooting guides for help.

Step 2: Create the Digital Product Module

Medusa creates commerce features in modules. For example, product features and data models are created in the Product Module.

You also create custom commerce data models and features in custom modules. They're integrated into the Medusa application similar to Medusa's modules without side effects.

So, you'll create a digital product module that holds the data models related to a digital product and allows you to manage them.

Create the directory src/modules/digital-product.

Create Data Models

Create the file src/modules/digital-product/models/digital-product.ts with the following content:

import { model } from "@medusajs/framework/utils"
import DigitalProductMedia from "./digital-product-media"
import DigitalProductOrder from "./digital-product-order"

const DigitalProduct = model.define("digital_product", {
  id: model.id().primaryKey(),
  name: model.text(),
  medias: model.hasMany(() => DigitalProductMedia, {
    mappedBy: "digitalProduct",
  }),
  orders: model.manyToMany(() => DigitalProductOrder, {
    mappedBy: "products",
  }),
})
.cascades({
  delete: ["medias"],
})

export default DigitalProduct

This creates a DigitalProduct data model. It has many medias and orders, which you will create next.

Create the file src/modules/digital-product/models/digital-product-media.ts with the following content:

import { model } from "@medusajs/framework/utils"
import { MediaType } from "../types"
import DigitalProduct from "./digital-product"

const DigitalProductMedia = model.define("digital_product_media", {
  id: model.id().primaryKey(),
  type: model.enum(MediaType),
  fileId: model.text(),
  mimeType: model.text(),
  digitalProduct: model.belongsTo(() => DigitalProduct, {
    mappedBy: "medias",
  }),
})

export default DigitalProductMedia

This creates a DigitalProductMedia data model, which represents a media file that belongs to the digital product. The fileId property holds the ID of the uploaded file as returned by the File Module, which is explained in later sections.

Notice that the above data model uses an enum from a types file. So, create the file src/modules/digital-product/types/index.ts with the following content:

export enum MediaType {
  MAIN = "main",
  PREVIEW = "preview"
}

This enum indicates that a digital product media can either be used to preview the digital product, or is the main file available on purchase.

Next, create the file src/modules/digital-product/models/digital-product-order.ts with the following content:

import { model } from "@medusajs/framework/utils"
import { OrderStatus } from "../types"
import DigitalProduct from "./digital-product"

const DigitalProductOrder = model.define("digital_product_order", {
  id: model.id().primaryKey(),
  status: model.enum(OrderStatus),
  products: model.manyToMany(() => DigitalProduct, {
    mappedBy: "orders",
    pivotTable: "digitalproduct_digitalproductorders",
  }),
})

export default DigitalProductOrder

This creates a DigitalProductOrder data model, which represents an order of digital products.

This data model also uses an enum from the types file. So, add the following to the src/modules/digital-product/types/index.ts file:

export enum OrderStatus {
  PENDING = "pending",
  SENT = "sent"
}

Create Main Module Service

Next, create the main service of the module at src/modules/digital-product/service.ts with the following content:

import { MedusaService } from "@medusajs/framework/utils"
import DigitalProduct from "./models/digital-product"
import DigitalProductOrder from "./models/digital-product-order"
import DigitalProductMedia from "./models/digital-product-media"

class DigitalProductModuleService extends MedusaService({
  DigitalProduct,
  DigitalProductMedia,
  DigitalProductOrder,
}) {

}

export default DigitalProductModuleService

The service extends the service factory, which provides basic data-management features.

Create Module Definition

After that, create the module definition at src/modules/digital-product/index.ts with the following content:

import DigitalProductModuleService from "./service"
import { Module } from "@medusajs/framework/utils"

export const DIGITAL_PRODUCT_MODULE = "digitalProductModuleService"

export default Module(DIGITAL_PRODUCT_MODULE, {
  service: DigitalProductModuleService,
})

Add Module to Medusa Configuration

Finally, add the module to the list of modules in medusa-config.ts:

module.exports = defineConfig({
  // ...
  modules: [
    {
      resolve: "./src/modules/digital-product",
    },
  ],
})

Further Reads

• How to Create a Module
• How to Create a Data Model

Step 3: Define Links

Modules are isolated in Medusa, making them reusable, replaceable, and integrable in your application without side effects.

So, you can't have relations between data models in modules. Instead, you define a link between them.

Links are relations between data models of different modules that maintain the isolation between the modules.

In this step, you will define links between your module’s data models and data models from Medusa’s Commerce Modules:

1. Link between the DigitalProduct model and the Product Module's ProductVariant model.
2. Link between the DigitalProductOrder model and the Order Module's Order model.

Start by creating the file src/links/digital-product-variant.ts with the following content:

import DigitalProductModule from "../modules/digital-product"
import ProductModule from "@medusajs/medusa/product"
import { defineLink } from "@medusajs/framework/utils"

export default defineLink(
  {
    linkable: DigitalProductModule.linkable.digitalProduct,
    deleteCascade: true,
  },
  ProductModule.linkable.productVariant
)

This defines a link between DigitalProduct and the Product Module’s ProductVariant. This allows product variants that customers purchase to be digital products.

deleteCascades is enabled on the digitalProduct so that when a product variant is deleted, its linked digital product is also deleted.

Next, create the file src/links/digital-product-order.ts with the following content:

import DigitalProductModule from "../modules/digital-product"
import OrderModule from "@medusajs/medusa/order"
import { defineLink } from "@medusajs/framework/utils"

export default defineLink(
  {
    linkable: DigitalProductModule.linkable.digitalProductOrder,
    deleteCascade: true,
  },
  OrderModule.linkable.order
)

This defines a link between DigitalProductOrder and the Order Module’s Order. This keeps track of orders that include purchases of digital products.

deleteCascades is enabled on the digitalProductOrder so that when a Medusa order is deleted, its linked digital product order is also deleted.

Further Read

• How to Define Module Links

Step 4: Run Migrations and Sync Links

To create tables for the digital product data models in the database, start by generating the migrations for the Digital Product Module with the following command:

npx medusa db:generate digitalProductModuleService

This generates a migration in the src/modules/digital-product/migrations directory.

Then, reflect the migrations and links in the database with the following command:

npx medusa db:migrate

Step 5: List Digital Products Admin API Route

To expose custom commerce features to frontend applications, such as the Medusa Admin dashboard or a storefront, you expose an endpoint by creating an API route.

In this step, you will create the admin API route to list digital products.

Create the file src/api/admin/digital-products/route.ts with the following content:

import { 
  AuthenticatedMedusaRequest, 
  MedusaResponse,
} from "@medusajs/framework/http"
import { ContainerRegistrationKeys } from "@medusajs/framework/utils"

export const GET = async (
  req: AuthenticatedMedusaRequest,
  res: MedusaResponse
) => {
  const { 
    fields, 
    limit = 20, 
    offset = 0,
  } = req.validatedQuery || {}
  const query = req.scope.resolve(ContainerRegistrationKeys.QUERY)

  const { 
    data: digitalProducts,
    metadata: { count, take, skip } = {},
  } = await query.graph({
    entity: "digital_product",
    fields: [
      "*",
      "medias.*",
      "product_variant.*",
      ...(fields || []),
    ],
    pagination: {
      skip: offset,
      take: limit,
    },
  })

  res.json({
    digital_products: digitalProducts,
    count,
    limit: take,
    offset: skip,
  })
}

This adds a GET API route at /admin/digital-products.

In the route handler, you use Query to retrieve the list of digital products and their relations. The route handler also supports pagination.

Test API Route

To test out the API route, start the Medusa application:

npm run dev

Then, obtain a JWT token as an admin user with the following request:

curl -X POST 'http://localhost:9000/auth/user/emailpass' \
-H 'Content-Type: application/json' \
--data-raw '{
    "email": "admin@medusajs.com",
    "password": "supersecret"
}'

Finally, send the following request to retrieve the list of digital products:

curl -L 'http://localhost:9000/admin/digital-products' \
-H 'Authorization: Bearer {token}'

Make sure to replace {token} with the JWT token you retrieved.

Further Reads

• How to Create an API Route
• Learn more about Query

Step 6: Create Digital Product Workflow

To implement and expose a feature that manipulates data, you create a workflow that uses services to implement the functionality, then create an API route that executes that workflow.

In this step, you will create a workflow that creates a digital product. You will use this workflow in an API route in the next section.

This workflow has the following steps:

1. createProductsWorkflow: Create the Medusa product that the digital product is associated with its variant. Medusa provides this workflow through the @medusajs/medusa/core-flows package, which you can use as a step.
2. createDigitalProductStep: Create the digital product.
3. createDigitalProductMediasStep: Create the medias associated with the digital product.
4. createRemoteLinkStep: Create the link between the digital product and the product variant. Medusa provides this step through the @medusajs/medusa/core-flows package.

You will implement the second and third steps.

createDigitalProductStep (Second Step)

Create the file src/workflows/create-digital-product/steps/create-digital-product.ts with the following content:

import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import DigitalProductModuleService from "../../../modules/digital-product/service"
import { DIGITAL_PRODUCT_MODULE } from "../../../modules/digital-product"

export type CreateDigitalProductStepInput = {
  name: string
}

const createDigitalProductStep = createStep(
  "create-digital-product-step",
  async (data: CreateDigitalProductStepInput, { container }) => {
    const digitalProductModuleService: DigitalProductModuleService = 
      container.resolve(DIGITAL_PRODUCT_MODULE)

    const digitalProduct = await digitalProductModuleService
      .createDigitalProducts(data)
    
    return new StepResponse({
      digital_product: digitalProduct,
    }, {
      digital_product: digitalProduct,
    })
  },
  async (data, { container }) => {
    if (!data) {
      return
    }
    const digitalProductModuleService: DigitalProductModuleService = 
      container.resolve(DIGITAL_PRODUCT_MODULE)
    
    await digitalProductModuleService.deleteDigitalProducts(
      data.digital_product.id
    )
  }
)

export default createDigitalProductStep

This creates the createDigitalProductStep. In this step, you create a digital product.

In the compensation function, which is executed if an error occurs in the workflow, you delete the digital products.

createDigitalProductMediasStep (Third Step)

Create the file src/workflows/create-digital-product/steps/create-digital-product-medias.ts with the following content:

import {
  createStep,
  StepResponse,
} from "@medusajs/framework/workflows-sdk"
import DigitalProductModuleService from "../../../modules/digital-product/service"
import { DIGITAL_PRODUCT_MODULE } from "../../../modules/digital-product"
import { MediaType } from "../../../modules/digital-product/types"

export type CreateDigitalProductMediaInput = {
  type: MediaType
  fileId: string
  mimeType: string
  digital_product_id: string
}

type CreateDigitalProductMediasStepInput = {
  medias: CreateDigitalProductMediaInput[]
}

const createDigitalProductMediasStep = createStep(
  "create-digital-product-medias",
  async ({ 
    medias,
  }: CreateDigitalProductMediasStepInput, { container }) => {
    const digitalProductModuleService: DigitalProductModuleService = 
      container.resolve(DIGITAL_PRODUCT_MODULE)

    const digitalProductMedias = await digitalProductModuleService
      .createDigitalProductMedias(medias)

    return new StepResponse({
      digital_product_medias: digitalProductMedias,
    }, {
      digital_product_medias: digitalProductMedias,
    })
  },
  async (data, { container }) => {
    if (!data) {
      return
    }
    const digitalProductModuleService: DigitalProductModuleService = 
      container.resolve(DIGITAL_PRODUCT_MODULE)
    
    await digitalProductModuleService.deleteDigitalProductMedias(
      data.digital_product_medias.map((media) => media.id)
    )
  }
)

export default createDigitalProductMediasStep

This creates the createDigitalProductMediasStep. In this step, you create medias of the digital product.

In the compensation function, you delete the digital product medias.

Create createDigitalProductWorkflow

Finally, create the file src/workflows/create-digital-product/index.ts with the following content:

import { createWorkflow, transform, WorkflowResponse } from "@medusajs/framework/workflows-sdk"
import { CreateProductWorkflowInputDTO } from "@medusajs/framework/types"
import { createProductsWorkflow, createRemoteLinkStep } from "@medusajs/medusa/core-flows"
import { Modules } from "@medusajs/framework/utils"
import createDigitalProductStep, { CreateDigitalProductStepInput } from "./steps/create-digital-product"
import createDigitalProductMediasStep, { CreateDigitalProductMediaInput } from "./steps/create-digital-product-medias"
import { DIGITAL_PRODUCT_MODULE } from "../../modules/digital-product"

type CreateDigitalProductWorkflowInput = {
  digital_product: CreateDigitalProductStepInput & {
    medias: Omit<CreateDigitalProductMediaInput, "digital_product_id">[]
  }
  product: CreateProductWorkflowInputDTO
}

const createDigitalProductWorkflow = createWorkflow(
  "create-digital-product",
  (input: CreateDigitalProductWorkflowInput) => {
    const { medias, ...digitalProductData } = input.digital_product

    const product = createProductsWorkflow.runAsStep({
      input: {
        products: [input.product],
      },
    })

    const { digital_product } = createDigitalProductStep(
      digitalProductData
    )

    const { digital_product_medias } = createDigitalProductMediasStep(
      transform({
        digital_product,
        medias,
      },
      (data) => ({
        medias: data.medias.map((media) => ({
          ...media,
          digital_product_id: data.digital_product.id,
        })),
      })
      )
    )

    createRemoteLinkStep([{
      [DIGITAL_PRODUCT_MODULE]: {
        digital_product_id: digital_product.id,
      },
      [Modules.PRODUCT]: {
        product_variant_id: product[0].variants[0].id,
      },
    }])

    return new WorkflowResponse({
      digital_product: {
        ...digital_product,
        medias: digital_product_medias,
      },
    })
  }
)

export default createDigitalProductWorkflow

This creates the createDigitalProductWorkflow. The workflow accepts as a parameter the digital product and the Medusa product to create.

In the workflow, you run the following steps:

1. createProductsWorkflow as a step to create a Medusa product.
2. createDigitalProductStep to create the digital product.
3. createDigitalProductMediasStep to create the digital product’s medias.
4. createRemoteLinkStep to link the digital product to the product variant.

You will test out the workflow in the next section.

Further Reads

• How to Create a Workflow
• What is the Compensation Function
• Learn more about Link functions

Step 7: Create Digital Product API Route

In this step, you will add the API route to create a digital product using the createDigitalProductWorkflow.

In the file src/api/admin/digital-products/route.ts add a new route handler:

// other imports...
import { z } from "zod"
import createDigitalProductWorkflow from "../../../workflows/create-digital-product"
import { CreateDigitalProductMediaInput } from "../../../workflows/create-digital-product/steps/create-digital-product-medias"
import { createDigitalProductsSchema } from "../../validation-schemas"

// ...

type CreateRequestBody = z.infer<
  typeof createDigitalProductsSchema
>

export const POST = async (
  req: AuthenticatedMedusaRequest<CreateRequestBody>,
  res: MedusaResponse
) => {
  const query = req.scope.resolve(ContainerRegistrationKeys.QUERY)
  const { data: [shippingProfile] } = await query.graph({
    entity: "shipping_profile",
    fields: ["id"],
  })

  const { result } = await createDigitalProductWorkflow(
    req.scope
  ).run({
    input: {
      digital_product: {
        name: req.validatedBody.name,
        medias: req.validatedBody.medias.map((media) => ({
          fileId: media.file_id,
          mimeType: media.mime_type,
          ...media,
        })) as Omit<CreateDigitalProductMediaInput, "digital_product_id">[],
      },
      product: {
        ...req.validatedBody.product,
        shipping_profile_id: shippingProfile.id,
      },
    },
  })

  res.json({
    digital_product: result.digital_product,
  })
}

This adds a POST API route at /admin/digital-products. In the route handler, you first retrieve a shipping profile to associate it with the product, which is required.

Then, you execute the createDigitalProductWorkflow created in the previous step, passing data from the request body as input, along with the retrieved shipping profile.

The route handler imports a validation schema from a validation-schema file. So, create the file src/api/validation-schemas.ts with the following content:

import { AdminCreateProduct } from "@medusajs/medusa/api/admin/products/validators"
import { z } from "zod"
import { MediaType } from "../modules/digital-product/types"

export const createDigitalProductsSchema = z.object({
  name: z.string(),
  medias: z.array(z.object({
    type: z.nativeEnum(MediaType),
    file_id: z.string(),
    mime_type: z.string(),
  })),
  product: AdminCreateProduct(),
})

This defines the expected request body schema.

Finally, create the file src/api/middlewares.ts with the following content:

import { defineMiddlewares, validateAndTransformBody } from "@medusajs/framework/http"
import { createDigitalProductsSchema } from "./validation-schemas"

export default defineMiddlewares({
  routes: [
    {
      matcher: "/admin/digital-products",
      method: "POST",
      middlewares: [
        validateAndTransformBody(createDigitalProductsSchema),
      ],
    },
  ],
})

This adds a validation middleware to ensure that the body of POST requests sent to /admin/digital-products match the createDigitalProductsSchema.

Further Read

• How to Create a Middleware

Step 8: Upload Digital Product Media API Route

To upload the digital product media files, use Medusa’s File Module.

Your Medusa application uses the local file module provider by default, which uploads files to a local directory. However, you can use other file module providers, such as the S3 module provider.

In this step, you will create an API route for uploading preview and main digital product media files.

Before creating the API route, install the multer express middleware to support file uploads:

npm install multer
npm install --save-dev @types/multer

Then, create the file src/api/admin/digital-products/upload/[type]/route.ts with the following content:

import { AuthenticatedMedusaRequest, MedusaResponse } from "@medusajs/framework/http"
import { uploadFilesWorkflow } from "@medusajs/medusa/core-flows"
import { MedusaError } from "@medusajs/framework/utils"

export const POST = async (
  req: AuthenticatedMedusaRequest,
  res: MedusaResponse
) => {
  const access = req.params.type === "main" ? "private" : "public"
  const input = req.files as Express.Multer.File[]

  if (!input?.length) {
    throw new MedusaError(
      MedusaError.Types.INVALID_DATA,
      "No files were uploaded"
    )
  }

  const { result } = await uploadFilesWorkflow(req.scope).run({
    input: {
      files: input?.map((f) => ({
        filename: f.originalname,
        mimeType: f.mimetype,
        content: f.buffer.toString("binary"),
        access,
      })),
    },
  })

  res.status(200).json({ files: result })
}

This adds a POST API route at /admin/digital-products/upload/[type] where [type] is either preview or main.

In the route handler, you use uploadFilesWorkflow from Medusa's core workflows to upload the file. If the file type is main, it’s uploaded with private access, as only customers who purchased it can download it. Otherwise, it’s uploaded with public access.

Next, add to the file src/api/middlewares.ts the multer middleware on this API route:

// other imports...
import multer from "multer"

const upload = multer({ storage: multer.memoryStorage() })

export default defineMiddlewares({
  routes: [
    // ...
    {
      matcher: "/admin/digital-products/upload**",
      method: "POST",
      middlewares: [
        upload.array("files"),
      ],
    },
  ],
})

You will test out this API route in the next step as you use these API routes in the admin customizations.

Step 9: Add Digital Products UI Route in Admin

The Medusa Admin is customizable, allowing you to inject widgets into existing pages or add UI routes to create new pages.

In this step, you will add a UI route to the Medusa Admin that displays a list of digital products.

Before you create the UI route, create the file src/admin/types/index.ts that holds the following types:

import { ProductVariantDTO } from "@medusajs/framework/types"

export enum MediaType {
  MAIN = "main",
  PREVIEW = "preview"
}

export type DigitalProductMedia = {
  id: string
  type: MediaType
  fileId: string
  mimeType: string
  digitalProducts?: DigitalProduct
}

export type DigitalProduct = {
  id: string
  name: string
  medias?: DigitalProductMedia[]
  product_variant?:ProductVariantDTO
}

These types will be used by the UI route.

Next, create the file src/admin/routes/digital-products/page.tsx with the following content:

import { defineRouteConfig } from "@medusajs/admin-sdk"
import { PhotoSolid } from "@medusajs/icons"
import { Container, Heading, Table } from "@medusajs/ui"
import { useState } from "react"
import { Link } from "react-router-dom"
import { DigitalProduct } from "../../types"

const DigitalProductsPage = () => {
  const [digitalProducts, setDigitalProducts] = useState<
    DigitalProduct[]
  >([])
  // TODO fetch digital products...

  return (
    <Container>
      <div className="flex justify-between items-center mb-4">
        <Heading level="h2">Digital Products</Heading>
        {/* TODO add create button */}
      </div>
      <Table>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Name</Table.HeaderCell>
            <Table.HeaderCell>Action</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {digitalProducts.map((digitalProduct) => (
            <Table.Row key={digitalProduct.id}>
              <Table.Cell>
                {digitalProduct.name}
              </Table.Cell>
              <Table.Cell>
                <Link to={`/products/${digitalProduct.product_variant?.product_id}`}>
                  View Product
                </Link>
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
      {/* TODO add pagination component */}
    </Container>
  )
}

export const config = defineRouteConfig({
  label: "Digital Products",
  icon: PhotoSolid,
})

export default DigitalProductsPage

This creates a UI route that's displayed at the /digital-products path in the Medusa Admin. The UI route also adds a sidebar item with the label “Digital Products" pointing to the UI route.

In the React component of the UI route, you just display the table of digital products.

Next, replace the first TODO with the following:

// other imports...
import { useMemo } from "react"

const DigitalProductsPage = () => {
  // ...
    
  const [currentPage, setCurrentPage] = useState(0)
  const pageLimit = 20
  const [count, setCount] = useState(0)
  const pagesCount = useMemo(() => {
    return count / pageLimit
  }, [count])
  const canNextPage = useMemo(
    () => currentPage < pagesCount - 1, 
    [currentPage, pagesCount]
  )
  const canPreviousPage = useMemo(
    () => currentPage > 0, 
    [currentPage]
  )

  const nextPage = () => {
    if (canNextPage) {
      setCurrentPage((prev) => prev + 1)
    }
  }

  const previousPage = () => {
    if (canPreviousPage) {
      setCurrentPage((prev) => prev - 1)
    }
  }
  
  // TODO fetch digital products
    
  // ...
}

This defines the following pagination variables:

1. currentPage: The number of the current page.
2. pageLimit: The number of digital products to show per page.
3. count: The total count of digital products.
4. pagesCount: A memoized variable that holds the number of pages based on count and pageLimit.
5. canNextPage: A memoized variable that indicates whether there’s a next page based on whether the current page is less than pagesCount - 1.
6. canPreviousPage: A memoized variable that indicates whether there’s a previous pages based on whether the current page is greater than 0.
7. nextPage: A function that increments the currentPage.
8. previousPage: A function that decrements the currentPage.

Then, replace the new TODO fetch digital products with the following:

// other imports
import { useEffect } from "react"

const DigitalProductsPage = () => {
  // ...
    
  const fetchProducts = () => {
    const query = new URLSearchParams({
      limit: `${pageLimit}`,
      offset: `${pageLimit * currentPage}`,
    })
    
    fetch(`/admin/digital-products?${query.toString()}`, {
      credentials: "include",
    })
    .then((res) => res.json())
    .then(({ 
      digital_products: data, 
      count,
    }) => {
      setDigitalProducts(data)
      setCount(count)
    })
  }

  useEffect(() => {
    fetchProducts()
  }, [currentPage])
    
  // ...
}

This defines a fetchProducts function that fetches the digital products using the API route you created in step 4. You also call that function within a useEffect callback which is executed whenever the currentPage changes.

Finally, replace the TODO add pagination component in the return statement with Table.Pagination component:

return (
    <Container>
      {/* ... */}
      <Table.Pagination
        count={count}
        pageSize={pageLimit}
        pageIndex={currentPage}
        pageCount={pagesCount}
        canPreviousPage={canPreviousPage}
        canNextPage={canNextPage}
        previousPage={previousPage}
        nextPage={nextPage}
      />
    </Container>
  )

The Table.Pagination component accepts as props the pagination variables you defined earlier.

Test UI Route

To test the UI route out, start the Medusa application, go to localhost:9000/app, and log in as an admin user.

Once you log in, you will find a new sidebar item, “Digital Products.” If you click on it, you will see the UI route you created with a table of digital products.

Further Reads

• How to Create UI Routes
• How to Create Admin Widgets

Step 10: Add Create Digital Product Form in Admin

In this step, you will add a form for admins to create digital products. The form opens in a drawer or side window from within the Digital Products UI route you created in the previous section.

Create the file src/admin/components/create-digital-product-form/index.tsx with the following content:

import { useState } from "react"
import { Input, Button, Select, toast } from "@medusajs/ui"
import { MediaType } from "../../types"

type CreateMedia = {
  type: MediaType
  file?: File
}

type Props = {
  onSuccess?: () => void
}

const CreateDigitalProductForm = ({
  onSuccess,
}: Props) => {
  const [name, setName] = useState("")
  const [medias, setMedias] = useState<CreateMedia[]>([])
  const [productTitle, setProductTitle] = useState("")
  const [loading, setLoading] = useState(false)

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    // TODO handle submit
  }

  return (
    <form onSubmit={onSubmit}>
      {/* TODO show form inputs */}
      <Button 
        type="submit"
        isLoading={loading}
      >
        Create
      </Button>
    </form>
  )
}

export default CreateDigitalProductForm

This creates a React component that shows a form and handles creating a digital product on form submission.

You currently don’t display the form. Replace the return statement with the following:

return (
  <form onSubmit={onSubmit}>
    <Input
      name="name"
      placeholder="Name"
      type="text"
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
    <fieldset className="my-4">
      <legend className="mb-2">Media</legend>
      <Button type="button" onClick={onAddMedia}>Add Media</Button>
      {medias.map((media, index) => (
        <fieldset className="my-2 p-2 border-solid border rounded">
          <legend>Media {index + 1}</legend>
          <Select 
            value={media.type} 
            onValueChange={(value) => changeFiles(
              index,
              {
                type: value as MediaType,
              }
            )}
          >
            <Select.Trigger>
              <Select.Value placeholder="Media Type" />
            </Select.Trigger>
            <Select.Content>
              <Select.Item value={MediaType.PREVIEW}>
                Preview
              </Select.Item>
              <Select.Item value={MediaType.MAIN}>
                Main
              </Select.Item>
            </Select.Content>
          </Select>
          <Input
            name={`file-${index}`}
            type="file"
            onChange={(e) => changeFiles(
              index,
              {
                file: e.target.files?.[0],
              }
            )}
            className="mt-2"
          />
        </fieldset>
      ))}
    </fieldset>
    <fieldset className="my-4">
      <legend className="mb-2">Product</legend>
      <Input
        name="product_title"
        placeholder="Product Title"
        type="text"
        value={productTitle}
        onChange={(e) => setProductTitle(e.target.value)}
      />
    </fieldset>
    <Button 
      type="submit"
      isLoading={loading}
    >
      Create
    </Button>
  </form>
)

This shows input fields for the digital product and product’s names. It also shows a fieldset of media files, with the ability to add more media files on a button click.

Add in the component the onAddMedia function that is triggered by a button click to add a new media:

const onAddMedia = () => {
  setMedias((prev) => [
    ...prev,
    {
      type: MediaType.PREVIEW,
    },
  ])
}

And add in the component a changeFiles function that saves changes related to a media in the medias state variable:

const changeFiles = (
  index: number,
  data: Partial<CreateMedia>
) => {
  setMedias((prev) => [
    ...(prev.slice(0, index)),
    {
      ...prev[index],
      ...data,
    },
    ...(prev.slice(index + 1)),
  ])
}

On submission, the media files should first be uploaded before the digital product is created.

So, add before the onSubmit function the following new function:

const uploadMediaFiles = async (
  type: MediaType
) => {
  const formData = new FormData()
  const mediaWithFiles = medias.filter(
    (media) => media.file !== undefined && 
      media.type === type
  )

  if (!mediaWithFiles.length) {
    return
  }

  mediaWithFiles.forEach((media) => {
      if (!media.file) {
        return
      }
    formData.append("files", media.file)
  })

  const { files } = await fetch(`/admin/digital-products/upload/${type}`, {
    method: "POST",
    credentials: "include",
    body: formData,
  }).then((res) => res.json())

  return {
    mediaWithFiles,
    files,
  }
}

This function accepts a type of media to upload (preview or main). In the function, you upload the files of the specified type using the API route you created in step 7. You return the uploaded files and their associated media.

Next, you will implement the onSubmit function. Replace it with the following:

const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault()
  setLoading(true)

  try {
    const {
      mediaWithFiles: previewMedias,
      files: previewFiles,
    } = await uploadMediaFiles(MediaType.PREVIEW) || {}
    const {
      mediaWithFiles: mainMedias,
      files: mainFiles,
    } = await uploadMediaFiles(MediaType.MAIN) || {}

    const mediaData: {
        type: MediaType
        file_id: string
        mime_type: string
      }[] = []

    previewMedias?.forEach((media, index) => {
      mediaData.push({
        type: media.type,
        file_id: previewFiles[index].id,
        mime_type: media.file!.type,
      })
    })

    mainMedias?.forEach((media, index) => {
      mediaData.push({
        type: media.type,
        file_id: mainFiles[index].id,
        mime_type: media.file!.type,
      })
    })

    // TODO create digital product
  } catch (e) {
    console.error(e)
    setLoading(false)
  }
}

In this function, you use the uploadMediaFiles function to upload preview and main media files. Then, you prepare the media data that’ll be used when creating the digital product in a mediaData variable.

Notice that you use the id of uploaded files, as returned in the response of /admin/digital-products/upload/[type] as the file_id value of the media to be created.

Finally, replace the new TODO in onSubmit with the following:

fetch(`/admin/digital-products`, {
  method: "POST",
  credentials: "include",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name,
    medias: mediaData,
    product: {
      title: productTitle,
      options: [{
        title: "Default",
        values: ["default"],
      }],
      variants: [{
        title: productTitle,
        options: {
          Default: "default",
        },
        manage_inventory: false,
        // delegate setting the prices to the
        // product's page.
        prices: [],
        shipping_profile_id: "",
      }],
    },
  }),
})
.then((res) => res.json())
.then(({ message }) => {
  if (message) {
    throw message
  }
  onSuccess?.()
})
.catch((e) => {
  console.error(e)
  toast.error("Error", {
    description: `An error occurred while creating the digital product: ${e}`,
  })
})
.finally(() => setLoading(false))

In this snippet, you send a POST request to /admin/digital-products to create a digital product.

You will make changes now to src/admin/routes/digital-products/page.tsx to show the form.

First, add a new open state variable:

const DigitalProductsPage = () => {
  const [open, setOpen] = useState(false)
  // ...
}

Then, replace the TODO add create button in the return statement to show the CreateDigitalProductForm component:

// other imports...
import { Drawer } from "@medusajs/ui"
import CreateDigitalProductForm from "../../components/create-digital-product-form"

const DigitalProductsPage = () => {
  // ...
    
  return (
    <Container>
      {/* Replace the TODO with the following */}
      <Drawer open={open} onOpenChange={(openChanged) => setOpen(openChanged)}>
        <Drawer.Trigger 
          onClick={() => {
            setOpen(true)
          }}
          asChild
        >
          <Button>Create</Button>
        </Drawer.Trigger>
        <Drawer.Content>
          <Drawer.Header>
            <Drawer.Title>Create Product</Drawer.Title>
          </Drawer.Header>
          <Drawer.Body>
            <CreateDigitalProductForm onSuccess={() => {
              setOpen(false)
              if (currentPage === 0) {
                fetchProducts()
              } else {
                setCurrentPage(0)
              }
            }} />
          </Drawer.Body>
        </Drawer.Content>
      </Drawer>
    </Container>
  )
}

This adds a Create button in the Digital Products UI route and, when it’s clicked, shows the form in a drawer or side window.

You pass to the CreateDigitalProductForm component an onSuccess prop that, when the digital product is created successfully, re-fetches the digital products.

Test Create Form Out

To test the form, open the Digital Products page in the Medusa Admin. There, you will find a new Create button.

If you click on the button, a form will open in a drawer. Fill in the details of the digital product to create one.

After you create the digital product, you will find it in the table. You can also click on View Product to edit the product’s details, such as the variant’s price.

To use this digital product in later steps (such as to create an order), you must make the following changes to its associated product details:

1. Change the status to published.
2. Add it to the default sales channel.
3. Add prices to the variant.

Step 11: Handle Product Deletion

When a product is deleted, its product variants are also deleted, meaning that their associated digital products should also be deleted.

In this step, you'll build a flow that deletes the digital products associated with a deleted product's variants. Then, you'll execute this workflow whenever a product is deleted.

The workflow has the following steps:

• retrieveDigitalProductsToDeleteStep: Retrieve the digital products associated with a deleted product's variants.
• deleteDigitalProductsStep: Delete the digital products.

retrieveDigitalProductsToDeleteStep

The first step of the workflow receives the ID of the deleted product as an input and retrieves the digital products associated with its variants.

Create the file src/workflows/delete-product-digital-products/steps/retrieve-digital-products-to-delete.ts with the following content:

import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import DigitalProductVariantLink from "../../../links/digital-product-variant"

type RetrieveDigitalProductsToDeleteStepInput = {
  product_id: string
}

export const retrieveDigitalProductsToDeleteStep = createStep(
  "retrieve-digital-products-to-delete",
  async ({ product_id }: RetrieveDigitalProductsToDeleteStepInput, { container }) => {
    const productService = container.resolve("product")
    const query = container.resolve("query")

    const productVariants = await productService.listProductVariants({
      product_id: product_id,
    }, {
      withDeleted: true,
    })

    const { data } = await query.graph({
      entity: DigitalProductVariantLink.entryPoint,
      fields: ["digital_product.*"],
      filters: {
        product_variant_id: productVariants.map((v) => v.id),
      },
    })

    const digitalProductIds = data.map((d) => d.digital_product.id)

    return new StepResponse(digitalProductIds)
  }
)

You create a retrieveDigitalProductsToDeleteStep step that retrieves the product variants of the deleted product. Notice that you pass in the second object parameter of listProductVariants a withDeleted property that ensures deleted variants are included in the result.

Then, you use Query to retrieve the digital products associated with the product variants. Links created with defineLink have an entryPoint property that you can use with Query to retrieve data from the pivot table of the link between the data models.

Finally, you return the IDs of the digital products to delete.

deleteDigitalProductsSteps

Next, you'll implement the step that deletes those digital products.

Create the file src/workflows/delete-product-digital-products/steps/delete-digital-products.ts with the following content:

import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
import { DIGITAL_PRODUCT_MODULE } from "../../../modules/digital-product"
import DigitalProductModuleService from "../../../modules/digital-product/service"

type DeleteDigitalProductsStep = {
  ids: string[]
}

export const deleteDigitalProductsSteps = createStep(
  "delete-digital-products",
  async ({ ids }: DeleteDigitalProductsStep, { container }) => {
    const digitalProductService: DigitalProductModuleService = 
      container.resolve(DIGITAL_PRODUCT_MODULE)

    await digitalProductService.softDeleteDigitalProducts(ids)

    return new StepResponse({}, ids)
  },
  async (ids, { container }) => {
    if (!ids) {
      return
    }

    const digitalProductService: DigitalProductModuleService = 
      container.resolve(DIGITAL_PRODUCT_MODULE)

    await digitalProductService.restoreDigitalProducts(ids)
  }
)

In the deleteDigitalProductsSteps, you soft delete the digital products by the ID passed as a parameter. In the compensation function, you restore the digital products if an error occurs.

Create deleteProductDigitalProductsWorkflow

You can now create the workflow that executes those steps.

Create the file src/workflows/delete-product-digital-products/index.ts with the following content:

import { createWorkflow, WorkflowResponse } from "@medusajs/framework/workflows-sdk"
import { deleteDigitalProductsSteps } from "./steps/delete-digital-products"
import { retrieveDigitalProductsToDeleteStep } from "./steps/retrieve-digital-products-to-delete"

type DeleteProductDigitalProductsInput = {
  id: string
}

export const deleteProductDigitalProductsWorkflow = createWorkflow(
  "delete-product-digital-products",
  (input: DeleteProductDigitalProductsInput) => {
    const digitalProductsToDelete = retrieveDigitalProductsToDeleteStep({
      product_id: input.id,
    })

    deleteDigitalProductsSteps({
      ids: digitalProductsToDelete,
    })

    return new WorkflowResponse({})
  }
)

The deleteProductDigitalProductsWorkflow receives the ID of the deleted product as an input. In the workflow, you:

• Run the retrieveDigitalProductsToDeleteStep to retrieve the digital products associated with the deleted product.
• Run the deleteDigitalProductsSteps to delete the digital products.

Execute Workflow on Product Deletion

When a product is deleted, Medusa emits a product.deleted event. You can handle this event with a subscriber. A subscriber is an asynchronous function that, when an event is emitted, is executed. You can implement in subscribers features that aren't essential to the original flow that emitted the event.

Learn more about subscribers in this documentation.

So, you'll listen to the product.deleted event in a subscriber, and execute the workflow whenever the product is deleted.

Create the file src/subscribers/handle-product-deleted.ts with the following content:

import { SubscriberArgs, SubscriberConfig } from "@medusajs/framework"
import { 
  deleteProductDigitalProductsWorkflow,
} from "../workflows/delete-product-digital-products"

export default async function handleProductDeleted({
  event: { data },
  container,
}: SubscriberArgs<{ id: string }>) {
  await deleteProductDigitalProductsWorkflow(container)
    .run({
      input: data,
    })
}

export const config: SubscriberConfig = {
  event: "product.deleted",
}

A subscriber file must export:

• An asynchronous function that's executed whenever the specified event is emitted.
• A configuration object that specifies the event the subscriber listens to, which is in this case product.deleted.

The subscriber function receives as a parameter an object having the following properties:

• event: An object containing the data payload of the emitted event.
• container: Instance of the Medusa Container.

In the subscriber, you execute the workflow by invoking it, passing the Medusa container as an input, then executing its run method. You pass the product's ID, which is received through the event's data payload, as an input to the workflow.

Test it Out

To test this out, start the Medusa application and, from the Medusa Admin dashboard, delete a product that has digital products. You can confirm that the digital product was deleted by checking the Digital Products page.

Step 12: Create Digital Product Fulfillment Module Provider

In this step, you'll create a fulfillment module provider for digital products. It doesn't have any real fulfillment functionality as digital products aren't physically fulfilled.

Create Module Provider Service

Start by creating the src/modules/digital-product-fulfillment directory.

Then, create the file src/modules/digital-product-fulfillment/service.ts with the following content:

import { AbstractFulfillmentProviderService } from "@medusajs/framework/utils"
import { 
  CreateFulfillmentResult, 
  FulfillmentDTO, 
  FulfillmentItemDTO, 
  FulfillmentOption, 
  FulfillmentOrderDTO,
} from "@medusajs/framework/types"

class DigitalProductFulfillmentService extends AbstractFulfillmentProviderService {
  static identifier = "digital"

  constructor() {
    super()
  }

  async getFulfillmentOptions(): Promise<FulfillmentOption[]> {
    return [
      {
        id: "digital-fulfillment",
      },
    ]
  }

  async validateFulfillmentData(
    optionData: Record<string, unknown>,
    data: Record<string, unknown>,
    context: Record<string, unknown>
  ): Promise<any> {
    return data
  }

  async validateOption(data: Record<string, any>): Promise<boolean> {
    return true
  }

  async createFulfillment(
    data: Record<string, unknown>, 
    items: Partial<Omit<FulfillmentItemDTO, "fulfillment">>[], 
    order: Partial<FulfillmentOrderDTO> | undefined, 
    fulfillment: Partial<Omit<FulfillmentDTO, "provider_id" | "data" | "items">>
  ): Promise<CreateFulfillmentResult> {
    // No data is being sent anywhere
    return {
      data,
      labels: [],
    }
  }

  async cancelFulfillment(): Promise<any> {
    return {}
  }

  async createReturnFulfillment(): Promise<any> {
    return {}
  }
}

export default DigitalProductFulfillmentService

The fulfillment provider registers one fulfillment option, and doesn't perform actual fulfillment.

Create Module Provider Definition

Then, create the module provider's definition in the file src/modules/digital-product-fulfillment/index.ts:

import { ModuleProviderExports } from "@medusajs/framework/types"
import DigitalProductFulfillmentService from "./service"

const services = [DigitalProductFulfillmentService]

const providerExport: ModuleProviderExports = {
  services,
}

export default providerExport

Register Module Provider in Medusa's Configurations

Finally, register the module provider in medusa-config.ts:

// other imports...
import { Modules } from "@medusajs/framework/utils"

module.exports = defineConfig({
  modules: [
    // ...
    {
      resolve: "@medusajs/medusa/fulfillment",
      options: {
        providers: [
          {
            resolve: "@medusajs/medusa/fulfillment-manual",
            id: "manual",
          },
          {
            resolve: "./src/modules/digital-product-fulfillment",
            id: "digital",
          },
        ],
      },
    },
  ],
})

This registers the digital product fulfillment as a module provider of the Fulfillment Module.

Add Fulfillment Provider to Location

In the Medusa Admin, go to Settings -> Location & Shipping, and add the fulfillment provider and a shipping option for it in a location.

This is necessary to use the fulfillment provider's shipping option during checkout.

Step 13: Create Cart Completion Flow for Digital Products

In this step, you will create a new cart completion flow that not only creates a Medusa order, but also create a digital product order.

To create the cart completion flow, you will create a workflow and then use that workflow in an API route defined at src/api/store/carts/[id]/complete-digital/route.ts.

graph TD
  completeCartWorkflow["completeCartWorkflow (Medusa)"] --> useQueryGraphStep["useQueryGraphStep (Medusa)"]
  useQueryGraphStep --> when{order has digital products?}
  when -->|Yes| createDigitalProductOrderStep
  createDigitalProductOrderStep --> createRemoteLinkStep["createRemoteLinkStep (Medusa)"]
  createRemoteLinkStep --> createOrderFulfillmentWorkflow["createOrderFulfillmentWorkflow (Medusa)"]
  createOrderFulfillmentWorkflow --> emitEventStep["emitEventStep (Medusa)"]
  emitEventStep --> End
  when -->|No| End

The workflow has the following steps:

1. completeCartWorkflow to create a Medusa order from the cart. Medusa provides this workflow through the @medusajs/medusa/core-flows package and you can use it as a step.
2. useQueryGraphStep to retrieve the order’s items with the digital products associated with the purchased product variants. Medusa provides this step through the @medusajs/medusa/core-flows package.
3. If the order has digital products, you:
   1. create the digital product order.
   2. link the digital product order with the Medusa order. Medusa provides a createRemoteLinkStep in the @medusajs/medusa/core-flows package that can be used here.
   3. Create a fulfillment for the digital products in the order. Medusa provides a createOrderFulfillmentWorkflow in the @medusajs/medusa/core-flows package that you can use as a step here.
   4. Emit the digital_product_order.created custom event to handle it later in a subscriber and send the customer an email. Medusa provides a emitEventStep in the @medusajs/medusa/core-flows that you can use as a step here.

You will only implement the 3.a step of the workflow.

createDigitalProductOrderStep (Step 3.a)

Create the file src/workflows/create-digital-product-order/steps/create-digital-product-order.ts with the following content:

import {
  createStep,
  StepResponse,
} from "@medusajs/framework/workflows-sdk"
import { 
  OrderLineItemDTO,
  ProductVariantDTO,
  InferTypeOf,
} from "@medusajs/framework/types"
import { OrderStatus } from "../../../modules/digital-product/types"
import DigitalProductModuleService from "../../../modules/digital-product/service"
import { DIGITAL_PRODUCT_MODULE } from "../../../modules/digital-product"
import DigitalProduct from "../../../modules/digital-product/models/digital-product"

export type CreateDigitalProductOrderStepInput = {
  items: (OrderLineItemDTO & {
    variant: ProductVariantDTO & {
      digital_product: InferTypeOf<typeof DigitalProduct>
    }
  })[]
}

const createDigitalProductOrderStep = createStep(
  "create-digital-product-order",
  async ({ items }: CreateDigitalProductOrderStepInput, { container }) => {
    const digitalProductModuleService: DigitalProductModuleService = 
      container.resolve(DIGITAL_PRODUCT_MODULE)

    const digitalProductIds = items.map((item) => item.variant.digital_product.id)

    const digitalProductOrder = await digitalProductModuleService
      .createDigitalProductOrders({
        status: OrderStatus.PENDING,
        products: digitalProductIds,
      })

    return new StepResponse({
      digital_product_order: digitalProductOrder,
    }, {
      digital_product_order: digitalProductOrder,
    })
  },
  async (data, { container }) => {
    if (!data) {
      return
    }
    const digitalProductModuleService: DigitalProductModuleService = 
      container.resolve(DIGITAL_PRODUCT_MODULE)

    await digitalProductModuleService.deleteDigitalProductOrders(
      data.digital_product_order.id
    )
  }
)

export default createDigitalProductOrderStep

This creates the createDigitalProductOrderStep. In this step, you create a digital product order.

In the compensation function, you delete the digital product order.

Create createDigitalProductOrderWorkflow

Create the file src/workflows/create-digital-product-order/index.ts with the following content:

import {
  createWorkflow,
  transform,
  when,
  WorkflowResponse,
} from "@medusajs/framework/workflows-sdk"
import {
  completeCartWorkflow,
  useQueryGraphStep,
  createRemoteLinkStep,
  createOrderFulfillmentWorkflow,
  emitEventStep,
} from "@medusajs/medusa/core-flows"
import {
  Modules,
} from "@medusajs/framework/utils"
import createDigitalProductOrderStep, { 
  CreateDigitalProductOrderStepInput,
} from "./steps/create-digital-product-order"
import { DIGITAL_PRODUCT_MODULE } from "../../modules/digital-product"

type WorkflowInput = {
  cart_id: string
}

const createDigitalProductOrderWorkflow = createWorkflow(
  "create-digital-product-order",
  (input: WorkflowInput) => {
    const { id } = completeCartWorkflow.runAsStep({
      input: {
        id: input.cart_id,
      },
    })

    const { data: orders } = useQueryGraphStep({
      entity: "order",
      fields: [
        "*",
        "items.*",
        "items.variant.*",
        "items.variant.digital_product.*",
        "shipping_address.*",
      ],
      filters: {
        id,
      },
      options: {
        throwIfKeyNotFound: true,
      },
    })

    const itemsWithDigitalProducts = transform({
      orders,
    },
    (data) => {
        return data.orders[0].items?.filter((item) => item?.variant?.digital_product !== undefined)
      }
    )

    const digital_product_order = when(
      "create-digital-product-order-condition", 
      itemsWithDigitalProducts, 
      (itemsWithDigitalProducts) => {
        return !!itemsWithDigitalProducts?.length
      }
    ).then(() => {
      const { 
        digital_product_order,
      } = createDigitalProductOrderStep({
        items: orders[0].items,
      } as unknown as CreateDigitalProductOrderStepInput)
  
      createRemoteLinkStep([{
        [DIGITAL_PRODUCT_MODULE]: {
          digital_product_order_id: digital_product_order.id,
        },
        [Modules.ORDER]: {
          order_id: id,
        },
      }])

      createOrderFulfillmentWorkflow.runAsStep({
        input: {
          order_id: id,
          items: transform({
            itemsWithDigitalProducts,
          }, (data) => {
            return data.itemsWithDigitalProducts!.map((item) => ({
              id: item!.id,
              quantity: item!.quantity,
            }))
          }),
        },
      })
  
      emitEventStep({
        eventName: "digital_product_order.created",
        data: {
          id: digital_product_order.id,
        },
      })

      return digital_product_order
    })

    return new WorkflowResponse({
      order: orders[0],
      digital_product_order,
    })
  }
)

export default createDigitalProductOrderWorkflow