Untitled

import {
  BlockStack,
  Choice,
  reactExtension,
  ChoiceList,
  useSettings,
  useAttributes,
  useApplyAttributeChange
} from '@shopify/ui-extensions-react/checkout';
import { useState } from 'react';

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

function Extension() {
  const { direct_mail_label: directMailFormLabel, third_party_label: thirdPartyFormLabel } =
    useSettings();
  const applyAttributesChange = useApplyAttributeChange();

  /**
   * Get the checkbox labels and set defaults
   */
  const directMailLabel = directMailFormLabel ?? 'Direct Mail';
  const thirdPartyLabel = thirdPartyFormLabel ?? '3rd Party';

  /**
   * Set the default state for the checkboxes
   */
  const [directMailChecked, setDirectMailChecked] = useState(false);
  const [thirdPartyChecked, setThirdPartyChecked] = useState(false);

  /**
   * Handle when direct mail is clicked
   * @param {string} value
   */
  async function handleDirectMailChange(value) {
    const isChecked = value.length === 1;

    /**
     * Update the order attribute for direct_mail
     */
    const result = await applyAttributesChange({
      type: 'updateAttribute',
      key: 'direct_mail',
      value: isChecked ? 'true' : 'false'
    });

    /**
     * If attribute is added, updat the checkbox state
     */
    if (result.type === 'success') {
      setDirectMailChecked(isChecked);
    }
  }

  /**
   * Handle when third party is clicked
   * @param {string} value
   */
  async function handleThirdPartyChange(value) {
    const isChecked = value.length === 1;

    /**
     * Update the order attribute for third_party
     */
    const result = await applyAttributesChange({
      type: 'updateAttribute',
      key: 'third_party',
      value: isChecked ? 'true' : 'false'
    });

    /**
     * If attribute is added, updat the checkbox state
     */
    if (result.type === 'success') {
      setThirdPartyChecked(isChecked);
    }
  }

  const directMailSelected = [];
  const thirdPartySelected = [];

  if (directMailChecked) {
    directMailSelected.push('direct_mail');
  }

  if (thirdPartyChecked) {
    thirdPartySelected.push('third_party');
  }

  return (
    <BlockStack>
      <ChoiceList
        name="consentDirectMail"
        value={directMailSelected}
        onChange={handleDirectMailChange}>
        <BlockStack>
          <Choice id="direct_mail" accessibilityLabel={directMailLabel}>
            {directMailLabel}
          </Choice>
        </BlockStack>
      </ChoiceList>

      <ChoiceList
        name="consentThirdParty"
        value={thirdPartySelected}
        onChange={handleThirdPartyChange}>
        <BlockStack>
          <Choice id="third_party" accessibilityLabel={thirdPartyLabel}>
            {thirdPartyLabel}
          </Choice>
        </BlockStack>
      </ChoiceList>
    </BlockStack>
  );
}