Adding notes to order in checkout ui extension

[imabhijithak]

Hey, I'm a young Shopify developer, and I'm trying to create a Shopify checkout extension where the text the user added should be added to the order note as well. Could you please help me figure this out?
Also, please suggest how I could use 
useNote()
import {

  reactExtension,

  TextField,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

  'purchase.checkout.block.render',

  () => <Extension />,

);

function Extension() {

  return <TextField name="checkout[note]" id="checkout_note" label="PO # / Note" />;

}

[Huptech-Web · Accepted solution]

Hello @imabhijithak 

You can use the below code to add notes in order

import {
  reactExtension,
  TextField,
  useApplyNoteChange,
} from '@shopify/ui-extensions-react/checkout';
import { Button } from '@shopify/ui-extensions/checkout';
import {  useState } from 'react';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
 const applyNoteChange= useApplyNoteChange();
 const [note,setNote]=useState("")
 const [loader,setLoader]=useState(false)
const handleValue=async(value)=>{
  setNote(value)
}
const addNote=async()=>{
  setLoader(true)
  try {
    const data=await applyNoteChange({
      type:"updateNote",
      note:note
     })
     console.log(data)
     if(data?.type =="success"){
      setLoader(false)
     }
  } catch (error) {
    setLoader(false)
  }
}
  return<>
  <TextField name="checkout[note]" onInput={handleValue} id="checkout_note" label="PO # / Note" />
  <Button  onPress={addNote}>{loader?"Adding..":"Add Note"} </Button>
  </> 
}

If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.