インストール後のアクションとオンボーディング

{ "post_install_action": { "type": "default" } }

{ "post_install_action": { "type": "onboarding" } }

{ "post_install_action": { "type": "settings" } }

{
  "post_install_action": {
    "type": "external",
    "url": "https://app.tajo.io/stripe/setup"
  }
}

import {
  Box, Button, Inline, Banner, TextField, Select, Divider,
} from '@stripe/ui-extension-sdk/ui';
import type { ExtensionContextValue } from '@stripe/ui-extension-sdk/context';
import { useState } from 'react';

const OnboardingView = ({ environment, userContext }: ExtensionContextValue) => {
  const [step, setStep] = useState(1);
  const [brevoApiKey, setBrevoApiKey] = useState('');
  const totalSteps = 3;

  return (
    <Box css={{ padding: 'large' }}>
      <Inline css={{ marginBottom: 'large' }}>
        ステップ {step} / {totalSteps}
      </Inline>

      {step === 1 && (
        <Box>
          <Inline css={{ fontWeight: 'bold', fontSize: 'large' }}>
            Brevoアカウントを接続
          </Inline>
          <TextField
            label="Brevo API Key"
            placeholder="xkeysib-..."
            value={brevoApiKey}
            onChange={(e) => setBrevoApiKey(e.target.value)}
            css={{ marginTop: 'medium' }}
          />
          <Button
            type="primary"
            onPress={() => setStep(2)}
            disabled={!brevoApiKey}
            css={{ marginTop: 'medium' }}
          >
            Brevoに接続
          </Button>
        </Box>
      )}
    </Box>
  );
};

export default OnboardingView;