@envive-ai/react-hooks 0.3.7 → 0.3.9

package/src/contexts/graphqlContext/mockV3Config.ts

@@ -7,11 +7,12 @@ import { AnimationSpeed, PromptCarouselRows } from '@envive-ai/react-toolkit-v3/
 import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { ChatHeaderVariant } from '@envive-ai/react-toolkit-v3/ChatHeader';
+import { WidgetKind } from '@envive-ai/react-toolkit-v3/SocialProof';
 import { SparkleIconColor } from '@envive-ai/react-toolkit-v3/WelcomeMessage';
 
 import { CustomerServiceType } from 'src/types/customerService';
 import { FloatingButtonLocation } from '@envive-ai/react-toolkit-v3/FloatingButton';
-import { ConfigVersionEnum, SocialProofWidgetKind, WidgetTypeV3 } from '../typesV3';
+import { ConfigVersionEnum, WidgetTypeV3 } from '../typesV3';
 
 const mockImages = [
   {
@@ -138,6 +139,10 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       enabled: false,
       suppressMerchantButton: false,
     },
+    singlePageApplicationSettings: {
+      enabled: false,
+      refreshInterval: 1000,
+    },
   },
   pageVariants: [],
   mountingConfigs: {},
@@ -188,7 +193,7 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       type: WidgetTypeV3.SocialProofV3,
 
       imageGalleryLayout: ImageGalleryLayout.FOUR_GRID,
-      kind: SocialProofWidgetKind.STATIC,
+      kind: WidgetKind.STATIC,
       variant: WidgetWrapperVariant.INLINE_WITH_BORDER,
       promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
       primaryButtonVariant: PromptButtonVariant.DARK,
@@ -201,7 +206,7 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       type: WidgetTypeV3.SocialProofV3,
 
       imageGalleryLayout: ImageGalleryLayout.SINGLE,
-      kind: SocialProofWidgetKind.STATIC,
+      kind: WidgetKind.STATIC,
       variant: WidgetWrapperVariant.CARD_NO_BORDER,
       promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
       primaryButtonVariant: PromptButtonVariant.DARK,
@@ -214,7 +219,7 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       type: WidgetTypeV3.SocialProofV3,
 
       imageGalleryLayout: ImageGalleryLayout.FOUR_HORIZONTAL,
-      kind: SocialProofWidgetKind.STATIC,
+      kind: WidgetKind.STATIC,
       variant: WidgetWrapperVariant.CARD_WITH_BORDER,
       promptCarouselRows: PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
       primaryButtonVariant: PromptButtonVariant.DARK,
@@ -247,5 +252,15 @@ export const mockV3FrontendConfig: FrontendConfigV3 = {
       image: mockImages[0],
       hideTextField: false,
     },
+    'product-card-test-widget': {
+      widgetConfigId: 'product-card-test-widget',
+      contentId: 'product-card-test-widget',
+      type: WidgetTypeV3.ProductCardV3,
+      promptButtonType: PromptButtonVariant.LIGHT,
+      italicizeHeadline: false,
+      fallbackColor: '#F9F6EA',
+      imageSrc:
+        'https://www.bandolierstyle.com/cdn/shop/files/Lily17_Black_Gold_Chrome_MOD_Dec25_6.jpg?v=1765844272',
+    },
   },
 };

package/src/contexts/hardcopyContext/hardcopyContext.tsx

@@ -137,6 +137,35 @@ const MOCK_HARDCOPY_RESPONSE: Partial<Record<WidgetTypeV3, HardcopyResponse>> =
       textFieldPlaceholderText: 'Ask me anything...',
     },
   },
+  [WidgetTypeV3.ProductCardV3]: {
+    language: 'en',
+    values: {
+      headline: 'Discover Your Perfect Style',
+      animatedText: [
+        'the perfect outfit for any occasion',
+        'trending fashion that fits your lifestyle',
+        'quality pieces that last',
+      ],
+      prompts: [
+        'What are your best sellers?',
+        'Show me summer dresses',
+        'Do you have free shipping?',
+        'What sizes are available?',
+        'Can I return items?',
+      ],
+      placeholder: 'Ask me anything...',
+    },
+  },
+  [WidgetTypeV3.FloatingChatV3]: {
+    language: 'en',
+    values: {
+      welcomeMessageTitle: 'Welcome to Envive AI',
+      welcomeMessageText:
+        'Your personal shopper trained on the collective knowledge of thousands of real experts!',
+      chatFooterTextFieldPlaceholderText: 'Ask me anything...',
+      disclaimerText: 'This is a disclaimer...',
+    },
+  },
 };
 
 const HardcopyContext = createContext<HardcopyContextType | undefined>(undefined);

package/src/contexts/pageContext/mapping.ts

@@ -15,7 +15,7 @@ import { isApiSearchAttributes } from 'src/application/models/guards/api/isApiSe
 import { isApiSuggestionClickedAttributes } from 'src/application/models/guards/api/isApiSuggestionClickedEventAttributes';
 import { isApiFormSubmittedResponseAttributes } from 'src/application/models/guards/api/isApiFormSubmittedResponseAttributes';
 
-import { PageVariantInfo, VisitPageVariantInfo } from './types';
+import { HomeVariantInfo, OtherVariantInfo, PageVariantInfo, VisitPageVariantInfo } from './types';
 
 export const mapUrlResolverResponseToVariantInfo = (
   url: string,
@@ -51,6 +51,21 @@ export const mapUrlResolverResponseToVariantInfo = (
       url,
     } as VisitPageVariantInfo;
   }
+
+  if (response.variant_type === VariantTypeEnum.Home) {
+    return {
+      variantType: VariantTypeEnum.Home,
+      url,
+    } as HomeVariantInfo;
+  }
+
+  if (response.variant_type === VariantTypeEnum.Other) {
+    return {
+      variantType: VariantTypeEnum.Other,
+      url,
+    } as OtherVariantInfo;
+  }
+
   throw new Error('Invalid variant type');
 };
 

package/src/contexts/pageContext/pageContext.tsx

@@ -22,7 +22,12 @@ import { mapApiUserEventToUserEvent, mapUrlResolverResponseToVariantInfo } from
 import { PageDetails } from './types';
 
 const PageContext = createContext<
-  (PageDetails & { isLoading: boolean; isSupported: boolean }) | undefined
+  | (PageDetails & {
+      isLoading: boolean;
+      isSupported: boolean;
+      setPageUrl: (url: string) => void;
+    })
+  | undefined
 >(undefined);
 
 export const PageProvider: React.FC<{
@@ -36,7 +41,6 @@ export const PageProvider: React.FC<{
   const [userEvent, setUserEvent] = useAtom(pageUserEventAtom);
   const [isSupported, setIsSupported] = useState(false);
   useEffect(() => {
-    // TODO: Add support for SPA's and other changes to the URL to ensure that the pageUrl is set correctly
     setPageUrl(window.location.href);
   }, []);
 
@@ -109,6 +113,10 @@ export const PageProvider: React.FC<{
     previewMode,
   ]);
 
+  const setPageUrlStable = useCallback((url: string) => {
+    setPageUrl(url);
+  }, []);
+
   const value = useMemo(
     () => ({
       pageUrl,
@@ -116,8 +124,9 @@ export const PageProvider: React.FC<{
       userEvent,
       isLoading,
       isSupported,
+      setPageUrl: setPageUrlStable,
     }),
-    [pageUrl, userEvent, variantInfo, isLoading, isSupported],
+    [pageUrl, userEvent, variantInfo, isLoading, isSupported, setPageUrlStable],
   );
 
   return <PageContext.Provider value={value}>{children}</PageContext.Provider>;

package/src/contexts/pageContext/types.ts

@@ -21,7 +21,22 @@ export type VisitPageVariantInfo = {
   url: string;
 };
 
-export type PageVariantInfo = PDPPageVariantInfo | PLPPageVariantInfo | VisitPageVariantInfo;
+export type HomeVariantInfo = {
+  variantType: VariantTypeEnum.Home;
+  url: string;
+};
+
+export type OtherVariantInfo = {
+  variantType: VariantTypeEnum.Other;
+  url: string;
+};
+
+export type PageVariantInfo =
+  | PDPPageVariantInfo
+  | PLPPageVariantInfo
+  | VisitPageVariantInfo
+  | HomeVariantInfo
+  | OtherVariantInfo;
 
 export interface PageDetails {
   pageUrl: string | undefined;

package/src/contexts/salesAgentContext/chatAPI.ts

@@ -1,25 +1,38 @@
 // This component will interact with the backend API to get the responses from the sales agent.
 
 import { PageVisitCategory, UserEventCategory } from '@spiffy-ai/commerce-api-client';
-import { Suggestion, UserEvent } from 'src/application/models';
+import {
+  ChatElementDisplayLocationV3,
+  FormSubmittedAttributes,
+  MessageRole,
+  MessageType,
+  Suggestion,
+  UserEvent,
+} from 'src/application/models';
 import { useSetAtom } from 'jotai';
 import { useCallback } from 'react';
 import { v4 as uuid } from 'uuid';
+import { formSubmitAtom, replyEventCategoryAtom } from 'src/atoms/chat';
 import { queueUserEventAtom } from 'src/atoms/chat/messageQueue';
 import { SpiffyMetricsEventName, useAmplitude } from '../amplitudeContext';
 
 export interface SalesAgentChatAPI {
   logPageVisit: ({ pageVisitCategory }: { pageVisitCategory: PageVisitCategory }) => void;
   logUserEvent: (event: UserEvent) => void;
-  onSuggestionClicked: (suggestion: Suggestion) => void;
+  onSuggestionClicked: (
+    suggestion: Suggestion,
+    displayLocation: ChatElementDisplayLocationV3,
+  ) => void;
   onTypedMessageSubmitted: ({ query, userTyped }: { query: string; userTyped: boolean }) => void;
-  onFormResponseSubmitted: (formResponse: any) => void; // TODO: Figure out the right type
+  onFormResponseSubmitted: (formResponse: FormSubmittedAttributes) => void;
 }
 
 export const useSalesAgentChatAPI = () => {
   // TODO: Each of these functions will trigger both the necessary amplitude events and initiate the
   // necessary actions to trigger the backend API
   const queueUserEvent = useSetAtom(queueUserEventAtom);
+  const setReplyEventCategory = useSetAtom(replyEventCategoryAtom);
+  const setFormSubmit = useSetAtom(formSubmitAtom);
   const { trackEvent } = useAmplitude();
 
   const logPageVisit = useCallback(
@@ -45,12 +58,20 @@ export const useSalesAgentChatAPI = () => {
     [queueUserEvent],
   );
   const onSuggestionClicked = useCallback(
-    (suggestion: Suggestion) => {
+    (suggestion: Suggestion, displayLocation: ChatElementDisplayLocationV3) => {
       trackEvent({
         eventName: SpiffyMetricsEventName.ChatSuggestionClicked,
         eventProps: {
-          suggestionId: suggestion.id,
-          content: suggestion.content,
+          message_id: suggestion.id,
+          message_role: MessageRole.User,
+          message_type: MessageType.SuggestionClicked,
+          message_metadata: {
+            content: suggestion.content,
+            created_at: suggestion.createdAt,
+            category: suggestion.category,
+            is_answer: suggestion.isAnswer,
+            display_location: displayLocation,
+          },
         },
       });
       const event: UserEvent = {
@@ -68,15 +89,24 @@ export const useSalesAgentChatAPI = () => {
   );
   const onTypedMessageSubmitted = useCallback(
     ({ query, userTyped }: { query: string; userTyped: boolean }) => {
+      const eventId = uuid();
       trackEvent({
         eventName: SpiffyMetricsEventName.ChatUserMessageInput,
         eventProps: {
           query,
-          userTyped,
+          user_typed: userTyped,
+          message_id: eventId,
+          message_role: MessageRole.User,
+          message_type: MessageType.QueryTyped,
+          message_metadata: {
+            content: query,
+            created_at: new Date().toISOString(),
+            user_typed: userTyped,
+          },
         },
       });
       const event: UserEvent = {
-        eventId: uuid(),
+        eventId,
         category: UserEventCategory.QueryTyped,
         createdAt: new Date().toISOString(),
         attributes: {
@@ -88,9 +118,20 @@ export const useSalesAgentChatAPI = () => {
     },
     [queueUserEvent, trackEvent],
   );
-  const onFormResponseSubmitted = useCallback(() => {
-    // TODO: Implement the form response submitted
-  }, []);
+  const onFormResponseSubmitted = useCallback(
+    (form: FormSubmittedAttributes) => {
+      setReplyEventCategory(UserEventCategory.FormSubmitted);
+      setFormSubmit(form);
+      const event: UserEvent = {
+        eventId: uuid(),
+        category: UserEventCategory.FormSubmitted,
+        createdAt: new Date().toISOString(),
+        attributes: form,
+      };
+      queueUserEvent(event);
+    },
+    [queueUserEvent, setReplyEventCategory, setFormSubmit],
+  );
 
   return {
     logPageVisit,

package/src/contexts/salesAgentContext/formSubmittedUtils.ts

@@ -0,0 +1,57 @@
+import { Message, MessageRole, MessageType } from 'src/application/models/message';
+import { UserEvent } from 'src/application/models';
+
+/**
+ * Searches the chat history for the form message by form response ID and builds the display string for the form.
+ */
+export const buildFormSubmittedDisplayContent = (
+  messages: Message[][],
+  formResponseId: string,
+  filledSchema: Record<string, unknown>,
+): string => {
+  let formFields: { key: string; title: string }[] = [];
+  // Find the form message in the chat history
+  for (const turn of messages) {
+    for (const msg of turn) {
+      if (
+        msg.type === MessageType.Form &&
+        msg.id === formResponseId &&
+        msg.metadata &&
+        'fields' in msg.metadata &&
+        Array.isArray(msg.metadata.fields)
+      ) {
+        formFields = msg.metadata.fields.map((field: { key: string; title: string }) => ({
+          key: field.key,
+          title: field.title,
+        }));
+        break;
+      }
+    }
+    if (formFields.length > 0) break;
+  }
+  // Build the display string for the form
+  const formStringContent =
+    formFields.length > 0
+      ? formFields.map(({ key, title }) => `${title}: ${filledSchema[key] ?? ''}`).join('\n')
+      : Object.entries(filledSchema)
+          .map(([key, value]) => `${key}: ${value}`)
+          .join('\n');
+  return formStringContent;
+};
+
+/**
+ * Creates a user message representing a submitted form for display in the chat.
+ */
+export const createFormSubmittedUserMessage = (
+  userEvent: UserEvent,
+  formSubmittedContent: string,
+): Message => {
+  const newMessage: Message = {
+    id: userEvent.eventId,
+    role: MessageRole.User,
+    type: MessageType.QueryTyped,
+    createdAt: userEvent.createdAt,
+    metadata: { content: formSubmittedContent },
+  };
+  return newMessage;
+};

package/src/contexts/salesAgentContext/salesAgentContext.tsx

@@ -1,5 +1,5 @@
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import { ReactNode, createContext, useCallback, useEffect, useMemo } from 'react';
+import { ReactNode, createContext, useCallback, useEffect, useMemo, useRef } from 'react';
 import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
 import Logger from 'src/application/logging/logger';
 import { Message, MessageRole, MessageType } from 'src/application/models/message';
@@ -17,6 +17,10 @@ import {
   userQueueEventCountAtom,
 } from 'src/atoms/chat/messageQueue';
 import { useSystemSettingsContext } from 'src/hooks/SystemSettingsContext';
+import {
+  buildFormSubmittedDisplayContent,
+  createFormSubmittedUserMessage,
+} from './formSubmittedUtils';
 import { SalesAgentChatAPI, useSalesAgentChatAPI } from './chatAPI';
 import { useSalesAgentService } from './salesAgentService';
 
@@ -35,19 +39,50 @@ export interface SalesAgent extends SalesAgentChatAPI {
   isInitialized: boolean;
 }
 
+export interface MockSalesAgentData {
+  messages?: Message[][];
+  suggestions?: Suggestion[];
+}
+
 const SalesAgentContext = createContext<SalesAgent | undefined>(undefined);
 
-export const SalesAgentProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+export interface SalesAgentProviderProps {
+  children: ReactNode;
+  previewMode?: boolean;
+  mockData?: MockSalesAgentData;
+}
+
+export const SalesAgentProvider: React.FC<SalesAgentProviderProps> = ({
+  children,
+  previewMode = false,
+  mockData,
+}) => {
   const userEvents = useAtomValue(userEventQueueAtom);
   const userQueueEventCount = useAtomValue(userQueueEventCountAtom);
   const markUserEventsProcessed = useSetAtom(processUserEventAtom);
   const [isInitialized, setIsInitialized] = useAtom(initializedAtom);
   const settingsContext = useSystemSettingsContext();
   const setMessages = useSetAtom(messagesAtom);
+  const setSuggestions = useSetAtom(suggestionsAtom);
 
   const { getStreamingResponses, createResponsePayload, getSuggestions, hydrateMessages } =
     useSalesAgentService();
 
+  const isSendingRef = useRef(false);
+
+  // Initialize with mock data in preview mode
+  useEffect(() => {
+    if (previewMode && mockData) {
+      if (mockData.messages) {
+        setMessages(mockData.messages);
+      }
+      if (mockData.suggestions) {
+        setSuggestions(mockData.suggestions);
+      }
+      setIsInitialized(true);
+    }
+  }, [previewMode, mockData, setMessages, setSuggestions, setIsInitialized]);
+
   // TODO: Ensure that amplitude events are being emitted
 
   // TODO: Add support for the streaming responses to function
@@ -72,7 +107,13 @@ export const SalesAgentProvider: React.FC<{ children: ReactNode }> = ({ children
   // It will be triggered when there are pending messages to be sent to the backend
   // It will be responsible for sending the messages to the backend and receiving the responses
   useEffect(() => {
-    if (userQueueEventCount > 0) {
+    // Skip backend communication in preview mode
+    if (previewMode) {
+      return;
+    }
+
+    if (userQueueEventCount > 0 && !isSendingRef.current) {
+      isSendingRef.current = true;
       const payloadEvents = userEvents.slice(0, userQueueEventCount);
 
       payloadEvents.forEach(userEvent => {
@@ -100,6 +141,23 @@ export const SalesAgentProvider: React.FC<{ children: ReactNode }> = ({ children
           };
           setMessages(current => [...current, [newMessage]]);
         }
+        if (userEvent && userEvent.category === UserEventCategory.FormSubmitted) {
+          const { formResponseId, filledSchema } = userEvent.attributes;
+          setMessages(prevMessagesState => {
+            const formSubmittedContent = buildFormSubmittedDisplayContent(
+              prevMessagesState,
+              formResponseId,
+              filledSchema,
+            );
+            const newUserMessage = createFormSubmittedUserMessage(userEvent, formSubmittedContent);
+            const turnsWithoutForm = prevMessagesState
+              .map(turn =>
+                turn.filter(msg => !(msg.type === MessageType.Form && msg.id === formResponseId)),
+              )
+              .filter(turn => turn.length > 0);
+            return [...turnsWithoutForm, [newUserMessage]];
+          });
+        }
       });
 
       sendMessagesToBackend(
@@ -107,7 +165,9 @@ export const SalesAgentProvider: React.FC<{ children: ReactNode }> = ({ children
           userEvents: payloadEvents,
           generationParams: settingsContext.generationParams,
         }),
-      );
+      ).finally(() => {
+        isSendingRef.current = false;
+      });
     } else if (isInitialized) {
       getSuggestions(
         createResponsePayload({
@@ -125,14 +185,20 @@ export const SalesAgentProvider: React.FC<{ children: ReactNode }> = ({ children
     settingsContext.generationParams,
     userEvents,
     userQueueEventCount,
+    previewMode,
   ]);
 
   useEffect(() => {
+    // Skip hydration in preview mode
+    if (previewMode) {
+      return;
+    }
+
     if (isInitialized) {
       // Rehydrate any messages from the backend
       hydrateMessages();
     }
-  }, [isInitialized, hydrateMessages]);
+  }, [isInitialized, hydrateMessages, previewMode]);
 
   return <SalesAgentContext.Provider value={undefined}>{children}</SalesAgentContext.Provider>;
 };

package/src/contexts/salesAgentContext/salesAgentService.ts

@@ -44,12 +44,14 @@ const inputPropsToTrackingProps = (
   const [userEvent] = payload.userEvents || [];
   if (userEvent.category === UserEventCategory.SuggestionClicked) {
     return {
+      message_id: userEvent.eventId,
       user_event_type: 'suggestion_clicked',
       user_query: userEvent.attributes.content,
     };
   }
   if (userEvent.category === UserEventCategory.QueryTyped) {
     return {
+      message_id: userEvent.eventId,
       user_event_type: 'query_typed',
       user_query: userEvent.attributes.query,
     };
@@ -216,6 +218,7 @@ export const useSalesAgentService: () => SalesAgentService = () => {
   const getStreamingResponses = useCallback(
     async (payload: NextMessageRequest): Promise<void> => {
       const startTime = Date.now();
+      let successfulResponse: boolean | undefined;
       setPendingResponse(true);
       const stream = CommerceApiClient.getNextResponseStreaming(payload);
 
@@ -228,16 +231,8 @@ export const useSalesAgentService: () => SalesAgentService = () => {
           setMessages,
           setResponseStreaming,
         );
+        successfulResponse = true;
 
-        // Log successful next_responses call
-        const responseTime = Date.now() - startTime;
-        trackEvent({
-          eventName: SpiffyMetricsEventName.ChatAssistantResponse,
-          eventProps: {
-            responseTimeMs: responseTime.toString(),
-            ...inputPropsToTrackingProps(payload),
-          },
-        });
         // TODO: Add support for the Chrome Extension communication
         // await logBundleEvent({
         //   level: 'info',
@@ -251,6 +246,7 @@ export const useSalesAgentService: () => SalesAgentService = () => {
         // });
       } catch (e) {
         console.error('error getting streaming responses', e);
+        successfulResponse = false;
         // Log failed next_responses call
         // const responseTime = Date.now() - startTime;
         // await logBundleEvent({
@@ -268,6 +264,16 @@ export const useSalesAgentService: () => SalesAgentService = () => {
         handleStreamingError(e, setRequestFailure, setMessages);
         throw e;
       } finally {
+        // Log next_responses call
+        const responseTime = Date.now() - startTime;
+        trackEvent({
+          eventName: SpiffyMetricsEventName.ChatAssistantResponse,
+          eventProps: {
+            responseTimeMs: responseTime.toString(),
+            successful_response: successfulResponse,
+            ...inputPropsToTrackingProps(payload),
+          },
+        });
         setPendingResponse(false);
         setResponseStreaming(false);
         // logPerfMetric(PerfMetricsEvents.FirstResponseCompleted);

package/src/contexts/searchContext/__tests__/searchContext.test.tsx

@@ -21,6 +21,7 @@ import { SearchResult } from 'src/application/models/api/search';
 
 import { useAppDetails } from 'src/hooks/AppDetails/useAppDetails';
 import * as commerceApiClient from '@spiffy-ai/commerce-api-client';
+import { UserIdentityService } from 'src/services/userIdentityService';
 import { SearchProvider, useSearchService } from '../searchContext';
 
 // Mock the commerce-api-client
@@ -61,6 +62,7 @@ vi.mock('@spiffy-ai/commerce-api-client', () => {
 
 // FeatureFlagService
 const testFeatureFlagService = new FeatureFlagService([]);
+const testUserIdService = new UserIdentityService({ apiKey: '' });
 
 // Mock useAppDetails
 vi.mock('src/hooks/AppDetails/useAppDetails', () => ({
@@ -197,7 +199,7 @@ const TestWrapper: React.FC<{
       >
         <LocalStorageProvider>
           <GraphQLProvider>
-            <UserIdentityProvider>
+            <UserIdentityProvider userIdService={testUserIdService}>
               <FeatureFlagServiceProvider featureFlagService={testFeatureFlagService}>
                 <SearchProvider>{children}</SearchProvider>
               </FeatureFlagServiceProvider>