Facing an Issue While Creating a Shopify Checkout UI Extension

[zhaidafirid]

Facing an Issue While Creating a Shopify Checkout UI Extension
I created a simple Checkout UI Extension for the EZ Delivery shipping service.
Now, my task is to update the total price when someone selects my shipping method. However, I am facing some challenges in implementing this functionality.
Can you please help? This is Shopify checkout Ui react js extension

import React, { useState } from "react";
import {
  reactExtension,
  BlockStack,
  Checkbox,
  Select,
  Text,
  Banner,
  useApplyCartLinesChange,
  useCartLines,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension("purchase.checkout.shipping-option-list.render-after", () => (
  <Extension />
));

function Extension() {
  const [isEZDeliverySelected, setIsEZDeliverySelected] = useState(false);
  const [checked, setChecked] = useState({
    sameday: false,
    nextday: false,
    priority: false,
  });
  const [selectedTimeframe, setSelectedTimeframe] = useState("");
  const [loading, setLoading] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");
  const updateCartLines = useApplyCartLinesChange();
  const cartLines = useCartLines();

  console.log("updateCartLines", updateCartLines);
  console.log("cartLines", cartLines);

  const deliveryOptions = {
    sameday: 23.5,
    nextday: 18.5,
    priority: 85.0,
  };

  const handleDeliveryCheck = (option) => {
    const updatedCheckedState = {
      sameday: option === "sameday",
      nextday: option === "nextday",
      priority: option === "priority",
    };
    setChecked(updatedCheckedState);
  };

  const handleEZDeliveryChange = (isChecked) => {
    setIsEZDeliverySelected(isChecked);
  };

  return (
    <BlockStack spacing="loose">
      {loading && <Text>Loading... Please wait.</Text>}
      {errorMessage && <Banner status="critical" title={errorMessage} />}

      <Checkbox checked={isEZDeliverySelected} onChange={handleEZDeliveryChange}>
        EZ Delivery as a shipping service
      </Checkbox>

      {isEZDeliverySelected && (
        <>
          <Text size="medium" emphasis="strong">
            Choose Your Delivery Option:
          </Text>

          <Checkbox
            onChange={() => handleDeliveryCheck("sameday")}
            checked={checked.sameday}
          >
            Same Day Delivery - ${deliveryOptions.sameday}
          </Checkbox>

          <Checkbox
            onChange={() => handleDeliveryCheck("nextday")}
            checked={checked.nextday}
          >
            Next Day Delivery - ${deliveryOptions.nextday}
          </Checkbox>

          {checked.nextday && (
            <Select
              label="Select Timeframe"
              options={[
                { label: "8 AM - 12 PM", value: "8-12" },
                { label: "12 PM - 4 PM", value: "12-4" },
                { label: "4 PM - 8 PM", value: "4-8" },
              ]}
              onChange={setSelectedTimeframe}
              value={selectedTimeframe}
            />
          )}

          <Checkbox
            onChange={() => handleDeliveryCheck("priority")}
            checked={checked.priority}
          >
            Top Priority Delivery - ${deliveryOptions.priority}
          </Checkbox>
        </>
      )}
    </BlockStack>
  );
}

 

[admin-gh]

Why not just create this as Shipping options in the Admin?