Show the Order Note on checkout , using checkout extension

Retired Boards Appdev Extensions
1

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”, () => );

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
/>
);
}

2

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);
}

3

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”, () => );

function NoteDealer() {
const purchasingCompany = usePurchasingCompany();
if(!purchasingCompany) {
return null;
}

const note = useNote();
const applyNoteChange = useApplyNoteChange();

return (

<TextField
label=“Notes(Optional)”
multiline={2}
onChange={(value) => {
// Apply the change to the order note
applyNoteChange({
type: “updateNote”,
note: value,
});
}}
value={note}
/>

);
}

4

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