I have a medusajs ecommerce project and trying to send a simple customer-inputted string from my frontend to my backend where it can be displayed on my admin dashboard for every order I receive. A way to do that they said was to add a property to the metadata object, which every entity has. The other way was to extend an entity/validator/use migration files etc but this was the simplest only other way.
Some old comments describe that I can pass metadata to the cart entity when a customer is making an order. I can’t for the life of me figure it out and obviously not that experienced with web dev
export default CustomString
"use client"
import { Heading, Text, clx } from "@medusajs/ui"
import React, { useState, useEffect, useMemo } from "react"
import { useSearchParams } from "next/navigation"
import { Cart } from "@medusajs/medusa"
import Input from "@modules/common/components/input"
const CustomString = ({
cart,
}: {
cart: Omit<Cart, "refundable_amount" | "refunded_total">
}) => {
const [formData, setFormData] = useState({
"cart.metadata": {"customString" : cart?.metadata || ""},
})
const searchParams = useSearchParams()
const isOpen = searchParams.get("step") === "review"
const previousStepsCompleted =
cart.shipping_address &&
cart.shipping_methods.length > 0 &&
cart.payment_session
useEffect(() => {
setFormData({
"cart.metadata": {"customString" : cart?.metadata || ""},
})
}, [cart?.metadata])
const handleChange = (
e: React.ChangeEvent<
HTMLInputElement | HTMLInputElement | HTMLSelectElement
>
) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
})
}
return (
<div>
{isOpen && previousStepsCompleted && (
<>
<div className="flex items-start gap-x-1 w-full mb-6">
<Input
label="Custom String"
name="cart.metadata"
maxLength={11}
value= { cart?.metadata} //I get errors here
onChange={handleChange}
/>
</div>
</>
)}
</div>
)
}
export default CustomString
This is my custom element where a user is supposed to enter a string. One of the errors I get is “Type ‘Record<string, unknown>’ is not assignable to type ‘string | number | readonly string[] | undefined. Type ‘Record<string, unknown>’ is missing the following properties from type ‘readonly string[]’: length, concat, join, slice, and 26 more.ts(2322)”. How exactly can I accomplish this task? Any pointers are appreciated
ron is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.