Show the Order Note on checkout , using checkout extension

[VsisodiyaDesign]

I need help to understand why i not got value based on following code -

Its working fine order note is showing on the checkout but no value on order note , can anyone help me ?

import React from 'react';

import { useApplyNoteChange, useNote, reactExtension, TextField } from "@shopify/ui-extensions-react/checkout";

export default reactExtension("purchase.checkout.payment-method-list.render-after", () => <NoteDealer />);

function NoteDealer() {

  const applyNoteChange = useApplyNoteChange();

  const note = useNote();

  // Function to handle note change

  const handleNoteChange = (newNote) => {

    applyNoteChange(newNote); // Apply the new note using the provided hook

  };

  return (

    <TextField

      id="note"

      name="note"

      placeholder="Add a note to your order"

      value={note || ''} // Bind the value of the TextField to the note state

      onChange={handleNoteChange} // Call handleNoteChange function on change

      multiline // Enable multiline for the TextField

    />

  );

}

[saumya__22]

I also get the same error but I have completed this task with the help of metafields if it helps you.
Here is the code

import {
extension,
TextField,
BlockStack,
Checkbox,
} from "@shopify/ui-extensions/checkout";
// Set the entry point for the extension
export default extension("purchase.checkout.payment-method-list.render-after", (root, api) => {
// Keep track of the UI state
const state = {
metafields: api.metafields.current,
showDeliveryInstructions: false,
};

// Render the initial extension UI
renderUI({ root, api, state });
// Keep track if metafields change. If they do, then re-render.
api.metafields.subscribe((newMetafields) => {
state.metafields = newMetafields;
renderUI({ root, api, state });
});
});

function renderUI({ root, api, state }) {
const { applyMetafieldChange } = api;

// In case this is a re-render, then remove all previous children
for (const child of root.children) {
root.removeChild(child);
}

// Define the metafield namespace and key
const metafieldNamespace = "custom";
const metafieldKey = "delivery_instructions";

// Get a reference to the metafield
const delivery_instructions = state.metafields?.find(
(field) =>
field.namespace === metafieldNamespace && field.key === metafieldKey
);
// Create the Checkbox component
const app = root.createComponent(BlockStack, {}, [
root.createComponent(
Checkbox,
{
checked: state.showDelivery_instructions,
onChange: () => {
state.showDelivery_instructions = !state.showDelivery_instructions;
renderUI({ root, api, state });
},
},
"Provide delivery instructions"
),
]);

// If the Checkbox component is selected, then create a TextField component
if (state.showDelivery_instructions) {
app.appendChild(
root.createComponent(TextField, {
multiline: 3,
label: "Delivery instructions",
onChange: (value) => {
// Apply the change to the metafield
applyMetafieldChange({
type: "updateMetafield",
namespace: metafieldNamespace,
key: metafieldKey,
valueType: "string",
note:`there comes the note`,
value,
});
},
value: delivery_instructions?.value,
})
);
}

// Render the extension components
root.appendChild(app);
}

[VsisodiyaDesign]

Without using metafield - thats show the order note for only to b2b customer .

import React, { useState } from 'react';

import {

  useApplyNoteChange,

  useNote,

  reactExtension,

  TextField,

  BlockStack,

  usePurchasingCompany,

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

// Define the extension point where the component will be injected

export default reactExtension("purchase.checkout.payment-method-list.render-after", () => <NoteDealer />);

function NoteDealer() {

  const purchasingCompany = usePurchasingCompany();

  if(!purchasingCompany) {

    return null;

  }

  const note = useNote();

const applyNoteChange = useApplyNoteChange();

  return (

    <BlockStack>

      <TextField

        label="Notes(Optional)"

        multiline={2}

        onChange={(value) => {

          // Apply the change to the order note

          applyNoteChange({

            type: "updateNote",

            note: value,

          });

        }}

        value={note}

      />

    </BlockStack>

  );

}

[saumya__22]

I want this value in note_attribute but it's not working Can you please guide me.