Only some metafield values are being saved

[Turbofan1178]

I'm trying to save some values to the order metafield but for some reason, only `FOO_METAFIELD_NAMESPACE` and `FOO_METAFIELD_KEY`  are being saved to the order. The `BAR_METAFIELD_NAMESPACE` and `BAR_METAFIELD_KEY` isn't being saved. Here's what my code looks like:

import React from 'react';
import {
  reactExtension,
  TextField,
  useMetafield,
  useApplyMetafieldsChange,
  useExtensionCapability,
  BlockStack,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  const FOO_METAFIELD_NAMESPACE = "FOO_NAMESPACE";
  const FOO_METAFIELD_KEY = "foo_key";
  const BAR_METAFIELD_NAMESPACE = "BAR_NAMESPACE";
  const BAR_METAFIELD_KEY = "bar_key";

  const fooState = useMetafield({
    namespace: FOO_METAFIELD_NAMESPACE,
    key: FOO_METAFIELD_KEY,
  });
  const barState = useMetafield({
    namespace: BAR_METAFIELD_NAMESPACE,
    key: BAR_METAFIELD_KEY,
  });

  const updateMetafield = useApplyMetafieldsChange();
  const canBlockProgress = useExtensionCapability("block_progress");
  const fooLabel = canBlockProgress ? "Foo Label" : "Foo Label (optional)";
  const barLabel = canBlockProgress ? "Bar Label" : "Bar Label (optional)";

  ...

  const handleFooFieldChange = (value) => {
    updateMetafield({
      type: "updateMetafield",
      namespace: FOO_METAFIELD_NAMESPACE,
      key: FOO_METAFIELD_KEY,
      valueType: "string",
      value,
    });
  };

  const handleBarFieldChange = (value) => {
    updateMetafield({
      type: "updateMetafield",
      namespace: BAR_METAFIELD_NAMESPACE,
      key: BAR_METAFIELD_KEY,
      valueType: "string",
      value,
    });
  }


  return (
    <BlockStack>
      <TextField label={barLabel} value={barState?.value} name="bar-field" onChange={(value) => handleBarFieldChange(value)} />
      <TextField label={fooLabel} value={fooState?.value} name="foo-field" onChange={(value) => {handleFooFieldChange(value)}} />
    </BlockStack>
  );
}

[Liam]

Hi Turbofan1178,

Is there any differences between creating the foo and the bar metafields? From the code you shared it looks the same, but just wanted to confirm.

[Turbofan1178]

Hey @Liam ,

I changed the code a bit before posting but this one is more similar to what I've in my app, if you notice both namespaces are both prepended with TEST_APP. I wonder if that has something to do with the bug?

import React from 'react';
import {
  reactExtension,
  TextField,
  useMetafield,
  useApplyMetafieldsChange,
  useExtensionCapability,
  BlockStack,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  const FOO_METAFIELD_NAMESPACE = "TEST_APP_FOO_NAMESPACE";
  const FOO_METAFIELD_KEY = "test_app_foo_key";
  const BAR_METAFIELD_NAMESPACE = "TEST_APP_BAR_NAMESPACE";
  const BAR_METAFIELD_KEY = "test_app_bar_key";

  const fooState = useMetafield({
    namespace: FOO_METAFIELD_NAMESPACE,
    key: FOO_METAFIELD_KEY,
  });
  const barState = useMetafield({
    namespace: BAR_METAFIELD_NAMESPACE,
    key: BAR_METAFIELD_KEY,
  });

  const updateMetafield = useApplyMetafieldsChange();
  const canBlockProgress = useExtensionCapability("block_progress");
  const fooLabel = canBlockProgress ? "Foo Label" : "Foo Label (optional)";
  const barLabel = canBlockProgress ? "Bar Label" : "Bar Label (optional)";

  ...

  const handleFooFieldChange = (value) => {
    updateMetafield({
      type: "updateMetafield",
      namespace: FOO_METAFIELD_NAMESPACE,
      key: FOO_METAFIELD_KEY,
      valueType: "string",
      value,
    });
  };

  const handleBarFieldChange = (value) => {
    updateMetafield({
      type: "updateMetafield",
      namespace: BAR_METAFIELD_NAMESPACE,
      key: BAR_METAFIELD_KEY,
      valueType: "string",
      value,
    });
  }


  return (
    <BlockStack>
      <TextField label={barLabel} value={barState?.value} name="bar-field" onChange={(value) => handleBarFieldChange(value)} />
      <TextField label={fooLabel} value={fooState?.value} name="foo-field" onChange={(value) => {handleFooFieldChange(value)}} />
    </BlockStack>
  );
}