<dl>
  <dt><label for="">lineItemProperty1</label></dt>
  <dd><input type="text" name="properties[lineItemProperty1]" value="`lineItemProperty1`" form="{{ product_form_id }}"></dd>
</dl>
<dl>
  <dt><label for="">_lineItemProperty2</label></dt>
  <dd><input type="text" name="properties[_lineItemProperty2]" value="`_lineItemProperty2`" form="{{ product_form_id }}"></dd>
</dl>

<dl>
  <dt>cartAttribute1</dt>
  <dd><input type="text" name="attributes[cartAttribute1]" value="`cartAttribute1`" form="cart"></dd>
</dl>
<dl>
  <dt>_cartAttribute2</dt>
  <dd><input type="text" name="attributes[_cartAttribute2]" value="`_cartAttribute2`" form="cart"></dd>
</dl>

import { useState, useEffect } from "react";
import {
  reactExtension,
  useApi,
  useApplyAttributeChange,
  useAttributeValues,
  useCartLines,
} from "@shopify/ui-extensions-react/checkout";

import {
  Heading,
  BlockSpacer,
  BlockStack,
  Checkbox,
  TextBlock,
  Text,
  View,
  Divider,
} from "@shopify/ui-extensions-react/checkout";


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

function App() {
  const { query } = useApi();
  const [products, setProducts] = useState([]);
  const cartLine = useCartLines();
  const cartLineString = JSON.stringify(cartLine);
  const cartLinesIds = cartLine.map((item) => item.merchandise.product.id);

  async function fetchProducts(productIds) {
    const results = [];
    const uniqueIds = Array.from(new Set(productIds));
    for (const id of uniqueIds) {
      results.push(fetchProduct(id))
    }

    const productsData = await Promise.all(results);
    setProducts(productsData);
  }

  async function fetchProduct(id) {
    try {
      const { data } = await query(
        `query {
          product(id: "${id}") {
            id
            title
            handle
            tags
          }
        }`,
      );
      return data;
    } catch (error) {
      console.error(error);
    }
    return null;
  }

  useEffect(() => {
    if (cartLinesIds && products.length === 0) {
      fetchProducts(cartLinesIds);
    }
  }, [cartLinesIds, products]);

  const [cartAttribute1, _cartAttribute2] =
    useAttributeValues([
      'cartAttribute1',
      '_cartAttribute2',
    ]);
  const applyAttributeChange = useApplyAttributeChange();

  const handleChange = async () => {
    setChecked(!checked);

    await applyAttributeChange({
      type: "updateAttribute",
      key: "cartAttribute1",
      value: "update cartAttribute1",
    });
  };

  // Render the extension components
  return (
    <BlockStack>
      <Heading>Debug</Heading>

      <View padding="base" border="base">
        <Text size="base">CartLine</Text>
        <TextBlock size="small">
          {cartLineString}
        </TextBlock>
        <BlockSpacer />
        <Text size="base">Products</Text>
        <TextBlock size="small">
          {JSON.stringify(products)}
        </TextBlock>
      </View>

      <View padding="base" border="base">
        <Text size="base">cartAttribute</Text>
        <TextBlock size="small">cartAttribute1 : {cartAttribute1}</TextBlock>
        <TextBlock size="small">_cartAttribute2: {_cartAttribute2}</TextBlock>
      </View>

      <Divider />

      <Checkbox checked={checked} onChange={handleChange}>
        Update
      </Checkbox>
    </BlockStack>
  );
}

[[extensions.targeting]]
module = "./src/Debug.tsx"
target = "purchase.checkout.block.render"

[[extensions.targeting]]
module = "./src/Header.tsx"
target = "purchase.checkout.header.render-after"

  mutation {
    cartBuyerIdentityUpdate(
      cartId: "gid://shopify/Cart/${cartToken}"
      buyerIdentity: {
        email: "${customerEmail}"
        countryCode: JP
        customerAccessToken: "${customerAccessToken}"
        deliveryAddressPreferences: [
          {
            customerAddressId: "${customerAddress.id}"
          }
        ]
      }
    ) {
      cart {
        id
        checkoutUrl
        buyerIdentity {
          email
          phone
          countryCode
          customer {
            id
          }
          deliveryAddressPreferences {
            ... on MailingAddress {
              id
              formatted
              firstName
              lastName
            }
          }
        }
      }
    }
  }

[extensions.settings]
[[extensions.settings.fields]]
key = "target"
type = "single_line_text_field"
name = "Block のターゲット (behavior)"
description = ""
  [[extensions.settings.fields.validations]]
  name = "choices"
  value = "[\"INFORMATION1\", \"INFORMATION2\", \"INFORMATION3\"]"

import { reactExtension, useSettings } from '@shopify/ui-extensions-react/checkout';

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

import INFORMATION1 from './information/INFORMATION1';
import INFORMATION2 from './information/INFORMATION2';

const checkoutBlock = reactExtension('purchase.checkout.block.render', () => <App />);
export { checkoutBlock };

function App() {
  const { target } = useSettings();

  if (target === 'INFORMATION1') {
    return <INFORMATION1 />;
  }

  if (target === 'INFORMATION2') {
    return <INFORMATION2 />;
  }

  return <BlockStack>{target}</BlockStack>;
}

<input type="text" name="properties[_.ItemId]" value="{{ "now" | date: "%Y%m%d%H%M%S" }}" form="{{ product_form_id }}">