Composant FocusView pour les applications StripeDashboard uniquement

Utilisez FocusView pour ouvrir un espace dédié permettant à l'utilisateur d'effectuer une tâche spécifique.

Version du SDK

Un composant FocusView peut être ouvert à partir d’autres composants View et permet aux développeurs d’ouvrir un espace dédié pour que le client final puisse effectuer une tâche spécifique. En voici quelques exemples :

Saisir des informations pour créer une nouvelle entrée dans une base de données
Suivre les indications d’un assistant pour décider des prochaines étapes
Confirmer que l’utilisateur souhaite effectuer l’action qu’il a indiquée

Apparence de la vue FocusView

FocusView doit être un enfant de ContextView. N’intégrez pas FocusView à une structure conditionnelle. Utilisez plutôt la propriété shown pour contrôler s’il est à l’état visible. Pour en savoir plus, consultez la page ContextView.

Pour ajouter le composant FocusView à votre application :

import {FocusView} from '@stripe/ui-extension-sdk/ui';

Propriétés de FocusView

Propriété	Type
`children`	Obligatoire `React.ReactNode` Contenu du composant.
`title`	Obligatoire `string` Le titre de la `FocusView`. Il sera affiché en haut du volet sous le nom de votre application.
`confirmCloseMessages`	Facultatif `ConfirmCloseMessages \| undefined` S’il est fourni, confirmCloseMessages sera affiché lorsque l’utilisateur fermera la `FocusView`. Types associés : ConfirmCloseMessages.
`footerContent`	Facultatif `React.ReactNode` Node React adjacent à toute action dans le pied de page.
`primaryAction`	Facultatif `React.ReactElement \| undefined` Un `Button` d’appel à l’action principal (« Enregistrer » ou « Continuer ») placé dans le pied de page.
`secondaryAction`	Facultatif `React.ReactElement \| undefined` Un `Button` d’appel à l’action secondaire (« Annuler ») placé dans le pied de page.
`setShown`	Facultatif `((shown: boolean) => void) \| undefined` Permet à `FocusView` de gérer l’état affiché si un utilisateur demande à fermer la fenêtre, ou si elle doit rester ouverte en raison de la boîte de dialogue de confirmation de la fermeture.
`shown`	Facultatif `boolean \| undefined` Indique si la `FocusView` doit être affichée ou non. Cette propriété est gérée par une vue parent.
`onClose`	FacultatifObsolète Utilisez plutôt `setShown`. Si l’utilisateur clique hors de la `FocusView` ou quitte la fenêtre, l’extension est informée que l’utilisateur a fermé la vue. `(() => void) \| undefined`

ConfirmCloseMessages

Propriété	Type
`cancelAction`	Obligatoire `string`
`description`	Obligatoire `string`
`exitAction`	Obligatoire `string`
`title`	Obligatoire `string`

Fermer la boîte de dialogue de confirmation

Lors de la transmission de confirmCloseMessages, pour que la boîte de dialogue de confirmation de fermeture fonctionne correctement dans chaque scénario de fermeture, transmettez la propriété setShown afin que FocusView puisse gérer son état shown. Pour contrôler le moment où la boîte de dialogue de confirmation de fermeture s’affiche, vous pouvez utiliser l’état pour conditionner le passage de confirmCloseMessages à FocusView, comme dans l’exemple suivant :

Exemple

import React from 'react';
import {
  Box,
  Button,
  ContextView,
  FocusView,
  Select,
} from '@stripe/ui-extension-sdk/ui';

type Mood = 'Happy' | 'Sad';

const confirmCloseMessages = {
  title: 'Your mood will not be saved',
  description: 'Are you sure you want to exit?',
  cancelAction: 'Cancel',
  exitAction: 'Exit',
};

const MoodView = () => {
  const [mood, setMood] = React.useState<Mood>('Happy');
  const [shown, setShown] = React.useState<boolean>(false);
  const [confirmClose, setConfirmClose] = React.useState<boolean>(false);

  const open = () => {
    setConfirmClose(true);
    setShown(true);
  };

  const closeWithoutConfirm = () => {
    setConfirmClose(false);
    setShown(false);
  };

  const closeWithConfirm = () => {
    setShown(false);
  };

  const updateMood = (newMood: Mood) => {
    setMood(newMood);
    closeWithoutConfirm();
  };

  return (
    <ContextView
      title="Mood picker"
      description="This section communicates my extension's feelings"
    >
      <FocusView
        title="Pick your mood"
        shown={shown}
        setShown={setShown}
        confirmCloseMessages={confirmClose ? confirmCloseMessages : undefined}
        secondaryAction={<Button onPress={closeWithConfirm}>Cancel</Button>}
      >
        <Select onChange={(e) => updateMood(e.target.value as Mood)}>
          <option label="">Select mood</option>
          <option label="Happy">Happy</option>
          <option label="Sad">Sad</option>
        </Select>
      </FocusView>
      <Box css={{stack: 'x', gap: 'medium'}}>
        <Box
          css={{
            font: 'subheading',
            color: mood === 'Happy' ? 'success' : 'info',
          }}
        >
          {mood}
        </Box>
        <Button onPress={open}>Change mood</Button>
      </Box>
    </ContextView>
  );
};