@constructor-io/constructorio-ui-quizzes 1.3.1 → 1.3.3

package/lib/mjs/hooks/useQuizLocalState.js

@@ -1,16 +1,47 @@
-import { useReducer } from 'react';
+import { useEffect, useReducer } from 'react';
 import { QuestionTypes } from '../components/CioQuiz/actions';
-import quizLocalReducer, { initialState } from '../components/CioQuiz/quizLocalReducer';
-const useQuizLocalState = () => {
+import quizLocalReducer, { initialState, } from '../components/CioQuiz/quizLocalReducer';
+import { quizSessionStateKey } from '../constants';
+const useQuizLocalState = (sessionStateKey) => {
     const [quizLocalState, dispatch] = useReducer(quizLocalReducer, initialState);
+    const quizStateKey = sessionStateKey || quizSessionStateKey;
+    const getStateFromSessionStorage = () => {
+        const state = window?.sessionStorage?.getItem(quizStateKey);
+        if (state) {
+            return JSON.parse(state);
+        }
+        return null;
+    };
+    useEffect(() => {
+        // don't save state if initial state
+        if (quizLocalState?.answers?.length) {
+            window?.sessionStorage?.setItem(quizStateKey, JSON.stringify(quizLocalState));
+        }
+    }, [quizLocalState, quizStateKey]);
     const resetQuizLocalState = () => {
         dispatch({
             type: QuestionTypes.Reset,
         });
     };
+    const hydrateQuizLocalState = () => {
+        const quizState = getStateFromSessionStorage();
+        if (quizState) {
+            dispatch({
+                type: QuestionTypes.Hydrate,
+                payload: quizState,
+            });
+        }
+    };
+    const resetQuizStoredState = () => {
+        window?.sessionStorage?.removeItem(quizStateKey);
+    };
+    const hasQuizStoredState = () => getStateFromSessionStorage() !== null;
     return {
         quizLocalState,
         resetQuizLocalState,
+        hydrateQuizLocalState,
+        hasQuizStoredState,
+        resetQuizStoredState,
         dispatchLocalState: dispatch,
     };
 };

package/lib/styles.css

@@ -73,6 +73,49 @@
   padding-bottom: var(--bottom-bar-height);
 }
 
+/* Session Prompt Modal */
+.cio-session-prompt-modal {
+  position: absolute;
+  display: flex;
+  z-index: 100;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.5);
+  justify-content: space-between;
+}
+
+.cio-session-prompt-container {
+  margin: auto;
+}
+
+.cio-session-prompt-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: fit-content;
+  margin: 2rem;
+  padding: 2rem;
+  border-radius: 8px;
+  background: #ffffff;
+  line-height: 1.5;
+}
+
+.cio-session-prompt-controls-container {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.cio-session-prompt-content .cio-button-container {
+  margin: 0px;
+  padding: 0px;
+}
+
+.cio-session-prompt-controls-container .cio-button-container:nth-child(1) .cio-question-cta-button {
+  color: var(--primary-color);
+  background-color: #ffffff;
+}
+
 /* Content */
 .cio-question-content {
   display: flex;
@@ -113,17 +156,18 @@
   width: 100%;
   padding: 0.5rem;
   border: 0;
-  border-bottom: 1px solid var(--blue-denim-100);
+  border-bottom: 1px solid var(--gray-dust-100);
   color: var(--blue-denim-500);
   padding: 0.8rem;
   outline: none;
   font-size: 1rem;
 }
-.cio-question-input-text:focus {
+.cio-question-input-text:focus,
+.cio-question-input-text:active {
   border-bottom: 1px solid var(--blue-denim-500);
 }
 .cio-question-input-text::placeholder {
-  color: var(--blue-denim-100);
+  color: var(--gray-dust-100);
 }
 
 /* CTA Button Component */
@@ -164,10 +208,15 @@
   background: var(--blue-denim-700);
   border: 2px solid var(--blue-denim-800);
 }
+.cio-question-cta-button:focus {
+  outline: 3px solid var(--blue-denim-100);
+}
 .cio-question-cta-button:disabled,
 .cio-question-cta-button.disabled {
-  background: var(--blue-denim-200);
-  border: 2px solid var(--blue-denim-100);
+  background: var(--gray-dust-200);
+  border: 2px solid var(--gray-dust-200);
+  cursor: auto;
+  outline: none;
 }
 
 /* Back Button Component */
@@ -187,6 +236,9 @@
 .cio-question-back-button:active {
   border: 2px solid var(--blue-denim-700);
 }
+.cio-question-back-button:focus {
+  outline: 3px solid var(--blue-denim-100);
+}
 .cio-question-back-button svg {
   display: inline;
 }
@@ -379,7 +431,8 @@
   display: flex;
   flex-direction: column;
 }
-.cio-result-card-anchor {
+.cio-result-card-anchor,
+.cio-result-card-container {
   text-decoration: none;
   background-color: transparent;
   color: inherit;
@@ -404,6 +457,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  text-decoration: none;
 }
 .cio-result-card-title {
   color: var(--gray-dust-500);
@@ -445,6 +499,9 @@
   background: var(--blue-denim-700);
   border: 2px solid var(--blue-denim-800);
 }
+.cio-result-card-cta-button:focus {
+  outline: 3px solid var(--blue-denim-100);
+}
 .cio-result-card-cta-button:disabled,
 .cio-result-card-cta-button.disabled {
   background: var(--blue-denim-200);

package/lib/types/components/CioQuiz/actions.d.ts

@@ -1,11 +1,13 @@
 import { NextQuestionResponse, QuizResultsResponse } from '../../types';
+import type { QuizLocalReducerState } from './quizLocalReducer';
 export declare enum QuestionTypes {
     OpenText = "open",
     Cover = "cover",
     SingleSelect = "single",
     MultipleSelect = "multiple",
     Back = "back",
-    Reset = "reset"
+    Reset = "reset",
+    Hydrate = "hydrate"
 }
 export interface QuestionAnswer<Value> {
     questionId: number;
@@ -22,7 +24,7 @@ interface Action<Type, Payload = {}> {
     payload?: Payload;
 }
 export type ActionAnswerInputQuestion = Action<QuestionTypes.OpenText, OpenTextQuestionPayload> | Action<QuestionTypes.SingleSelect, SelectQuestionPayload> | Action<QuestionTypes.MultipleSelect, SelectQuestionPayload>;
-export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Cover, CoverQuestionPayload> | Action<QuestionTypes.Back> | Action<QuestionTypes.Reset>;
+export type ActionAnswerQuestion = ActionAnswerInputQuestion | Action<QuestionTypes.Cover, CoverQuestionPayload> | Action<QuestionTypes.Back> | Action<QuestionTypes.Reset> | Action<QuestionTypes.Hydrate, Partial<QuizLocalReducerState>>;
 export declare enum QuizAPIActionTypes {
     SET_IS_LOADING = 0,
     SET_IS_ERROR = 1,

package/lib/types/components/CioQuiz/quizApiReducer.d.ts

@@ -3,8 +3,6 @@ import { NextQuestionResponse, QuizResultsResponse } from '../../types';
 import { ActionQuizAPI } from './actions';
 export type QuizAPIReducerState = {
     quizRequestState: RequestStates;
-    quizVersionId?: string;
-    quizSessionId?: string;
     quizFirstQuestion?: NextQuestionResponse;
     quizCurrentQuestion?: NextQuestionResponse;
     quizResults?: QuizResultsResponse;

package/lib/types/components/CioQuiz/quizLocalReducer.d.ts

@@ -4,6 +4,8 @@ export type QuizLocalReducerState = {
     answers: Answers;
     answerInputs: {};
     isLastAnswer: boolean;
+    quizVersionId?: string;
+    quizSessionId?: string;
 };
 export type AnswerInputState = {
     [key: string]: OpenTextQuestionPayload | SelectQuestionPayload;

package/lib/types/components/SessionPromptModal/SessionPromptModal.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface SessionPromptModalProps {
+    continueSession: () => void;
+    resetStoredState: () => void;
+    setShowSessionPrompt: (showSessionPrompt: boolean) => void;
+    showSessionPrompt: boolean;
+}
+export default function SessionPromptModal({ continueSession, resetStoredState, setShowSessionPrompt, showSessionPrompt, }: SessionPromptModalProps): JSX.Element | null;
+export {};

package/lib/types/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const apiKey = "key_wJSdZSiesX5hiVLt";
 export declare const quizId = "coffee-quiz";
+export declare const quizSessionStateKey = "constructorIOQuizState";
 export declare const componentDescription = "- import `CioQuiz` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, `quizId`, `resultsPageOptions`, and one of `apiKey` or `cioJsClient` are required.\n- `resultsPageOptions` lets you configure the results page\n  - `onAddToCartClick` is a callback function that will be called when the \"Add to cart\" button is clicked\n  - `onQuizResultClick` is an optional callback function that will be called when the result card is clicked. The default behavior is redirecting the user to the item's URL\n  - `onQuizResultsLoaded` is an optional callback function that will be called when the quiz results are loaded\n  - `resultCardRegularPriceKey` is a parameter that specifies the metadata field name for the regular price\n  - `resultCardSalePriceKey` is an optional parameter that specifies the metadata field name for the sale price\n- Use different props to configure the behavior of this component.\n- The following stories show how different props affect the component's behavior\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
 export declare const basicDescription = "Pass an `apiKey` and a `quizId` to request questions and quiz results from Constructor's servers";
 export declare const cioJsClientDescription = "If you are already using an instance of the `ConstructorIOClient`, you can pass a `cioJsClient` instead of an `apiKey` to request results from Constructor's servers\n\n> Note: `cioJsClient` refers to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)";

package/lib/types/hooks/useQuizApiState.d.ts

@@ -1,7 +1,8 @@
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
+import { ActionAnswerQuestion } from '../components/CioQuiz/actions';
 import { QuizLocalReducerState } from '../components/CioQuiz/quizLocalReducer';
 import { ResultsPageOptions } from '../types';
-declare const useFetchQuiz: (quizId: string, quizLocalState: QuizLocalReducerState, resultsPageOptions: ResultsPageOptions, quizVersionIdProp: string | undefined, cioClient: ConstructorIOClient) => {
+declare const useFetchQuiz: (quizId: string, quizLocalState: QuizLocalReducerState, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>, resultsPageOptions: ResultsPageOptions, quizVersionIdProp: string | undefined, cioClient: ConstructorIOClient) => {
     cioClient: ConstructorIOClient;
     quizApiState: import("../components/CioQuiz/quizApiReducer").QuizAPIReducerState;
     isFirstQuestion: boolean;

package/lib/types/hooks/useQuizEvents/index.d.ts

@@ -10,6 +10,9 @@ export type UseQuizEventOptions = {
     dispatchLocalState: React.Dispatch<ActionAnswerQuestion>;
     resetQuizApiState: () => void;
     resetQuizLocalState: () => void;
+    hydrateQuizLocalState: () => void;
+    resetQuizStoredState: () => void;
+    hasQuizStoredState: () => boolean;
 };
 declare const useQuizEvents: (options: UseQuizEventOptions) => QuizEventsReturn;
 export default useQuizEvents;

package/lib/types/hooks/useQuizLocalState.d.ts

@@ -1,6 +1,10 @@
-declare const useQuizLocalState: () => {
-    quizLocalState: import("../components/CioQuiz/quizLocalReducer").QuizLocalReducerState;
+import { QuizLocalReducerState } from '../components/CioQuiz/quizLocalReducer';
+declare const useQuizLocalState: (sessionStateKey?: string) => {
+    quizLocalState: QuizLocalReducerState;
     resetQuizLocalState: () => void;
+    hydrateQuizLocalState: () => void;
+    hasQuizStoredState: () => boolean;
+    resetQuizStoredState: () => void;
     dispatchLocalState: import("react").Dispatch<import("../components/CioQuiz/actions").ActionAnswerQuestion>;
 };
 export default useQuizLocalState;

package/lib/types/types.d.ts

@@ -19,12 +19,17 @@ export interface ResultsPageOptions extends ResultsProps {
     onQuizResultClick?: QuizResultsEventsProps.OnQuizResultClick;
     onAddToCartClick: QuizResultsEventsProps.OnAddToCartClick;
 }
+export interface SessionStateOptions {
+    showSessionModal?: boolean;
+    sessionStateKey?: string;
+}
 export interface IQuizProps {
     apiKey?: string;
     cioJsClient?: ConstructorIOClient;
     quizId: string;
     quizVersionId?: string;
     resultsPageOptions: ResultsPageOptions;
+    sessionStateOptions?: SessionStateOptions;
 }
 export interface QuizReturnState {
     answers: {
@@ -48,6 +53,9 @@ export declare namespace QuizEventsReturn {
     type ResetQuiz = () => void;
     type ResultClick = (result: QuizResultDataPartial, position: number) => void;
     type AddToCart = (e: React.MouseEvent<HTMLElement>, result: QuizResultDataPartial, price?: number) => void;
+    type HydrateQuiz = () => void;
+    type HasStoredState = () => boolean;
+    type ResetStoredState = () => void;
 }
 export interface QuizEventsReturn {
     nextQuestion: QuizEventsReturn.NextQuestion;
@@ -55,6 +63,9 @@ export interface QuizEventsReturn {
     resetQuiz: QuizEventsReturn.ResetQuiz;
     resultClick: QuizEventsReturn.ResultClick;
     addToCart: QuizEventsReturn.AddToCart;
+    hydrateQuiz: QuizEventsReturn.HydrateQuiz;
+    hasStoredState: QuizEventsReturn.HasStoredState;
+    resetStoredState: QuizEventsReturn.ResetStoredState;
 }
 export interface UseQuizReturn {
     cioClient?: ConstructorIOClient;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",