Modèle de formation JDP de démonstration

Ce modèle génère une application autonome basée sur la ligne métier Véhicule personnel (LOB) pour les États-Unis à partir de la GO Marketplace de Guidewire. Il est utilisé à des fins pédagogiques et de formation.

Lors de la création d'une application avec ce modèle, assurez-vous que la LOB est téléchargée à partir de la place de marché et installée dans l'instance PolicyCenter de votre choix dans votre environnement GWCP pour que l'application fonctionne correctement. Le modèle effectue une transaction Quote and Buy et l'application qui en résulte génère un devis, avec une valeur basée sur la configuration de tarification appropriée au sein de l'instance PolicyCenter choisie. Si aucune tarification n'est configurée, un devis de zéro dollar est renvoyé et affiché dans l'application.

Cette implémentation suit un modèle qui sépare la logique de présentation en composants React, laissant la logique métier de l'application aux crochets React.

Dépendances

Pour accéder à ce modèle, vous devez avoir accès à l'interface utilisateur de Jutro Web Apps.

Configuration du modèle

Créez d'abord une application dans l'interface utilisateur de Jutro Web Apps à l'aide de ce modèle et vous aurez accès à un référentiel Bitbucket contenant ce modèle.

Configuration d'une connexion à PolicyCenter Cloud API

Pour configurer la connexion à PolicyCenter et au fournisseur d'autorisation, vous devez définir des valeurs pour les paramètres dans le fichier src/config/config.json :

  "env": {
    "JUTRO_PC_CLOUD_API_URL": "API_URL_HERE",
    "JUTRO_AUTH_ENABLED": true,
    "JUTRO_AUTH_ISSUER": "AUTH_ISSUER_HERE",
    "JUTRO_AUTH_CLIENT_ID": "CLIENT_ID_HERE",
    "JUTRO_AUTH_REDIRECT_BASE": "REDIRECT_BASE_HERE",
    "JUTRO_AUTH_REDIRECT_PATH": "/callback",
    "JUTRO_AUTH_PKCE_ENABLED": true
  }

Liste des paramètres

Param	Description
JUTRO_PC_CLOUD_API_URL	URL vers PolicyCenter Cloud API
JUTRO_AUTH_ENABLED	Activer (true) / Désactiver (false) l'authentification
JUTRO_AUTH_ISSUER	URL vers un émetteur d'autorisation
JUTRO_AUTH_CLIENT_ID	ID du client d'authentification
JUTRO_AUTH_REDIRECT_BASE	URL de redirection
JUTRO_AUTH_REDIRECT_PATH	Chemin de redirection
JUTRO_AUTH_PKCE_ENABLED	Activer le flux PKCE d'autorisation

Une fois la configuration du modèle terminée, procédez comme suit pour l'exécuter localement :

1. Exécutez la commande npm install dans votre terminal pour installer toutes les dépendances répertoriées dans le fichier package.json.
2. Exécutez npm start.

Comprendre le code

La structure du modèle se compose d'un composant Floorplan et d'un composant Wizard. Le composant Floorplan définit la structure générale du modèle et de l'assistant. Le composant Wizard gère chaque page contenue dans le répertoire steps. Ce modèle contient également trois fichiers importants :

1. index.tsx qui fait office de point d'entrée de l'application et affiche le composant App.tsx.
2. App.tsx qui configure et affiche le plan sur la page de l'assistant Devis.
3. QuoteWizard.tsx qui configure et affiche le composant de l'assistant, ainsi que les étapes de l'assistant. Il gère l'état au niveau de l'application qui est partagé entre les étapes.

Le code et les paramètres de chacune des pages de l'assistant se trouvent dans le répertoire src/pages/QuoteWizard/steps de leur propre sous-dossier. Il existe également des crochets et des composants spécifiques à certaines pages. Ils se trouvent également dans les sous-dossiers de la page.

Gestion d'état

Trois éléments gèrent les données qui transitent par le modèle :

• L'état de niveau page est géré par les crochets personnalisés d'une page. Chaque page possède son propre crochet individuel.
• L'état au niveau de l'application est géré par le composant ApplicationContext, qui sert de magasin centralisé pour les données transmises entre les pages. C'est ce que l'on appelle l'état de l'application.
• L'état au niveau du produit est géré par le composant PAStateContext. Les données au niveau du produit incluent des éléments tels que les valeurs actuelles de certains champs, garanties et conditions. C'est ce que l'on appelle l'état PA (Véhicule personnel).

Pages

Page d'informations sur le compte

Dans la première étape de l'assistant, vous devez entrer les informations sur le titulaire du compte. Pour passer à l'étape suivante, remplissez les champs obligatoires et cliquez sur Suivant.

Cette page n'est pas pilotée par définition de produit, ce qui permet une personnalisation accrue. Cette page dispose d'un crochet personnalisé pour gérer l'état de l'application et interagir avec les API, tandis que le composant de la page gère la structure et la validation côté client, qui repose uniquement sur des composants Jutro pour la validation. Cette page accède à l'état de l'application, mais n'a pas besoin d'interagir avec l'état PA.

Pages de détails du véhicule et du conducteur

Dans ces pages, vous devez renseigner des informations sur le véhicule et le conducteur.

Ces deux pages sont pilotées par la définition du produit, ce qui permet le rendu automatique des champs en fonction des schémas InsuranceSuite. Elles disposent chacune d'un crochet personnalisé pour récupérer les champs à afficher et appliquer des contraintes dynamiques à partir du schéma. Cela signifie que certains champs peuvent apparaître ou disparaître en fonction des valeurs sélectionnées dans d'autres champs. La validation côté client basée sur les composants Jutro est gérée par le composant de chaque page. Ils utilisent l'état de l'application et l'état PA pour accéder aux données et les stocker.

Page Garanties de véhicule et de police

Dans ces pages, vous devez sélectionner les garanties de véhicule et de police à ajouter.

Note: Des suggestions de garanties sont indiquées pour aider l'utilisateur, tandis que les garanties obligatoires sont présélectionnées et désactivées.

Les deux pages disposent d'un crochet personnalisé pour récupérer les champs à afficher et appliquer des contraintes dynamiques à partir des schémas InsuranceSuite. Elles partagent un composant Coverage qui se trouve dans le dossier src/components. Ce composant utilise un crochet personnalisé qui lui est propre. Ces pages sont pilotées par la définition du produit, ce qui permet le rendu automatique des garanties et des conditions en fonction du schéma. Cela signifie que certains champs peuvent apparaître ou disparaître en fonction des valeurs sélectionnées dans d'autres champs. Ils utilisent à la fois l'état de l'application et l'état PA pour accéder aux données et les stocker.

Pages Devis, Synthèse de la police, Paiement et Confirmation

Hormis la création du devis et sa souscription, il s'agit de pages en lecture seule conçues à des fins d'information et ne contenant aucun élément exécutable. Ces pages affichent des données provenant à la fois de l'état de l'application et de l'état PA. Le rendu automatique est uniquement appliqué pour afficher les conditions de garantie de manière dynamique.

Page Devis automobile

Page Synthèse de la police

Page Paiement de la police

Page Confirmation du paiement