OnboardingView-Komponente für Stripe AppsÖffentliche Vorschau

import React, {useState, useReducer, useCallback} from 'react';
import {
  FormFieldGroup,
  TextField,
  OnboardingView,
  Switch,
  TaskListItemProps,
} from '@stripe/ui-extension-sdk/ui';

const onboardingTasks: Record<TaskName, TaskListItemProps> = {
  addInfo: {
    title: 'Add business info',
    status: 'in-progress',
    onPress: () => handlePress('addInfo'),
  },
  connectBank: {
    title: 'Connect your bank',
    status: 'not-started',
    onPress: () => handlePress('connectBank'),
  },
  review: {
    title: 'Review and finish',
    status: 'not-started',
    onPress: () => handlePress('review'),
  },
};

// These view implement the UI required by a particular onboarding step
const steps: Record<TaskName, React.FunctionComponent> = {
  addInfo: () => (
    <FormFieldGroup legend="Business Info" description="Add business info">
      <TextField
        label="Company name"
        placeholder="Company name"
        hiddenElements={['label']}
      />
    </FormFieldGroup>
  ),
  connectBank: () => (
    <FormFieldGroup
      legend="Connect your bank"
      description="Enter the bank account to which withdrawals will be sent."
    >
      <TextField
        label="Bank name"
        placeholder="Bank name"
        hiddenElements={['label']}
      />
    </FormFieldGroup>
  ),
  review: () => (
    <FormFieldGroup legend="Specify settings" layout="vertical">
      <Switch
        label="Enable automatic transfers"
        description="Enable automatic transfers"
      />
      <Switch
        label="Enable auto-import of transactions"
        description="Enable auto-import of transactions"
      />
    </FormFieldGroup>
  ),
};

const handlePress = useCallback((taskName: TaskName) => {
  setTaskName(taskName);
  dispatch({type: 'TOGGLE_STATUS', taskName});
}, []);

const [taskName, setTaskName] = useState<TaskName>('addInfo');
const [tasks, dispatch] = useReducer(taskReducer, onboardingTasks);
const taskListItems = Object.values(tasks);

const title = tasks[taskName].title;
const description = `Please complete the onboarding step.`;
const completed = taskListItems.every((item) => item.status === 'complete');
const OnboardingViewContent = steps[taskName];

return (
  <OnboardingView
    title={title}
    description={description}
    completed={completed}
    tasks={taskListItems}
  >
    <OnboardingViewContent />
  </OnboardingView>
);

function getNextStatus(
  status: string,
): 'not-started' | 'in-progress' | 'complete' {
  switch (status) {
    case 'complete':
      return 'not-started';
    case 'not-started':
      return 'in-progress';
    case 'in-progress':
      return 'complete';
    default:
      return 'not-started';
  }
}

type TaskName = 'addInfo' | 'connectBank' | 'review';

type TaskAction = {
  type: 'TOGGLE_STATUS';
  taskName: TaskName;
};

// Reducer function to handle state updates
function taskReducer(
  state: Record<TaskName, TaskListItemProps>,
  action: TaskAction,
): Record<TaskName, TaskListItemProps> {
  switch (action.type) {
    case 'TOGGLE_STATUS':
      return {
        ...state,
        [action.taskName]: {
          ...state[action.taskName],
          status: getNextStatus(state[action.taskName].status as string),
        },
      };
    default:
      return state;
  }
}

import React, {useCallback, useEffect, useState} from 'react';
import {
  FormFieldGroup,
  TextField,
  Button,
  OnboardingView,
  TaskListItemProps,
} from '@stripe/ui-extension-sdk/ui';

type OnboardingData = {
  state: 'pending' | 'error' | 'ready';
  tasks: TaskListItemProps[];
};

const [onboarding, setOnboarding] = useState<OnboardingData>({
  state: 'pending',
  tasks: [],
});

const fetchTasks = useCallback(
  (() => {
    let isFirstTry = true;

    return () => {
      setOnboarding({state: 'pending', tasks: []});

      setTimeout(() => {
        if (isFirstTry) {
          isFirstTry = false;
          setOnboarding((prev) => ({...prev, state: 'error'}));
        } else {
          setOnboarding({
            state: 'ready',
            tasks: [
              {title: 'Add business info', status: 'in-progress'},
              {title: 'Connect your bank', status: 'not-started'},
              {title: 'Review and finish', status: 'not-started'},
            ],
          });
        }
      }, 2000);
    };
  })(),
  [],
);

useEffect(fetchTasks, [fetchTasks]);

const error =
  onboarding.state === 'error' ? (
    <Button onPress={fetchTasks}>Try again!</Button>
  ) : null;
const pending = onboarding.state === 'pending';

return (
  <OnboardingView
    error={error}
    pending={pending}
    title="Onboarding title"
    description="Onboarding description"
    completed={false}
    tasks={onboarding.tasks}
  >
    <FormFieldGroup legend="Business Info" description="Add business info!">
      <TextField
        label="Company name"
        placeholder="Company name"
        hiddenElements={['label']}
      />
    </FormFieldGroup>
  </OnboardingView>
)