SettingsView-Komponente für Stripe-Apps

import React from 'react';
import {ExtensionContextValue} from '@stripe/ui-extension-sdk/context';
import {Box, SettingsView, TextField} from '@stripe/ui-extension-sdk/ui';

type FormStatus = 'initial' | 'saving' | 'saved' | 'error';

const AppSettings = ({userContext}: ExtensionContextValue) => {
  const [storedValue, setStoredValue] = React.useState<string>('');
  const [status, setStatus] = React.useState<FormStatus>('initial');

  // use the current user id to retrieve the stored value from an external api
  const key = userContext.id;

  React.useEffect(() => {
    if (!key) {
      return;
    }

    const fetchSetting = async (key: string) => {
      try {
        const response = await fetch(`https://www.my-api.com/${key}`);
        const storedSettingValue = await response.text();
        if (storedSettingValue) {
          setStoredValue(storedSettingValue);
        }
      } catch (error) {
        console.log('Error fetching setting: ', error);
      }
    };
    fetchSetting(key);
  }, [key]);

  const saveSettings = React.useCallback(async (values) => {
    setStatus('saving');
    try {
      const {greeting} = values;
      const result = await fetch('https://www.my-api.com/', {
        method: 'POST',
        body: JSON.stringify(values),
      });
      await result.text();
      setStatus('saved');
      setStoredValue(greeting);
    } catch (error) {
      console.error(error);
      setStatus('error');
    }
  }, []);

  const getStatusLabel = React.useCallback(() => {
    switch (status) {
      case 'saving':
        return 'Saving...';
      case 'saved':
        return 'Saved!';
      case 'error':
        return 'Error: There was an error saving your settings.';
      case 'initial':
      default:
        return '';
    }
  }, [status]);
  const statusLabel = getStatusLabel();

  return (
    <SettingsView onSave={saveSettings} statusMessage={statusLabel}>
      <Box
        css={{
          padding: 'medium',
          backgroundColor: 'container',
        }}
      >
        <Box
          css={{
            font: 'lead',
          }}
        >
          Please enter a greeting
        </Box>
        <Box
          css={{
            marginBottom: 'medium',
            font: 'caption',
          }}
        >
          Saved value: {storedValue || 'None'}
        </Box>
        <TextField
          name="greeting"
          type="text"
          label="Greeting:"
          size="medium"
        />
      </Box>
    </SettingsView>
  );
};