@constructor-io/constructorio-ui-quizzes 1.9.10 → 1.10.1

package/lib/mjs/utils.js

@@ -51,6 +51,7 @@ export const functionStrings = {
     onQuizResultsLoaded: `(results) => console.dir(results)`,
     onQuizNextQuestion: `(question) => console.dir(question)`,
     onQuizSkipQuestion: `(question) => console.dir(question)`,
+    onEmailResults: `(data) => console.dir(data)`,
     cioJsClient: `cioJsClient`,
 };
 export const stringifyWithDefaults = (obj) => {

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.9.7';
+export default '1.10.1';

package/lib/styles.css

@@ -99,6 +99,7 @@
   width: 100%;
   position: absolute;
   z-index: -1;
+  overflow: hidden;
 }
 
 /* Session Prompt Modal */
@@ -172,6 +173,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+  aspect-ratio: 1/1;
 }
 .cio-quiz .cio-question-image-container {
   box-sizing: border-box;
@@ -181,6 +183,7 @@
   height: var(--container-image-small-height); /* Fixed height for layout shifts */
   display: flex;
   align-self: stretch;
+  overflow: hidden;
 }
 
 /* Input */
@@ -399,7 +402,6 @@
   border-radius: 4px;
   object-fit: cover;
   margin-bottom: 16px;
-  aspect-ratio: 1/1;
 }
 
 /* Select Option Value */
@@ -678,6 +680,21 @@
   margin-top: 1px;
 }
 
+/* Share results Button Component */
+.cio-quiz .cio-question-share-results-button {
+  background: none;
+  border: none;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.cio-quiz .cio-question-share-results-button:hover {
+  text-decoration: underline;
+}
+.cio-quiz .cio-question-share-results-button span {
+  margin-top: 1px;
+}
+
 /* Container Queries */
 
 /* Small Tablet */
@@ -696,7 +713,7 @@
     align-self: normal;
   }
 
-  /* Image */
+  /* Image Container */
   .cio-quiz .cio-question-image-container {
     flex-basis: 50%;
     flex-shrink: 0;
@@ -721,7 +738,7 @@
   .cio-quiz .cio-results-container {
     padding: 3rem 4rem;
   }
-  .cio-quiz .cio-results-filter-and-redo-container {
+  .cio-quiz .cio-results-button-group {
     display: flex;
     justify-content: space-between;
     align-items: end;
@@ -897,3 +914,175 @@
     transform: rotate(360deg);
   }
 }
+
+/* Share results modal */
+.cio-quiz .cio-share-results-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-quiz .cio-share-results-container {
+  max-width: 600px;
+  width: 100%;
+  margin: auto;
+}
+
+.cio-quiz .cio-share-results-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  background: #ffffff;
+  line-height: 1.5;
+  padding: 40px;
+  padding-bottom: 80px;
+  border-radius: 8px;
+}
+
+.cio-quiz .cio-share-results-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.cio-quiz .cio-share-results-description {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.cio-quiz .cio-share-results-title {
+  font-weight: 700;
+  font-size: 24px;
+  text-transform: capitalize;
+}
+
+.cio-quiz .cio-modal-close-button {
+  background: none;
+  border: none;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.cio-quiz .cio-share-results-button-group {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.cio-quiz .cio-share-results-feature-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.cio-quiz .cio-results-redo-and-share-button-group {
+  display: flex;
+  gap: 8px;
+  align-items: end;
+  justify-content: space-between;
+}
+
+.cio-quiz .cio-share-results-share-button {
+  background: #d3e5fb;
+  color: var(--primary-color);
+  border: 2px solid #d3e5fb;
+  border-radius: 4px;
+  height: 3rem;
+  font-size: 1rem;
+  flex-grow: 1;
+  width: 100%;
+  padding: 12px 32px;
+}
+
+.cio-quiz .cio-share-results-share-button:hover {
+  background: var(--primary-color-variant-500);
+  border: 2px solid var(--primary-color-variant-600);
+  color: white;
+}
+.cio-quiz .cio-share-results-share-button:active {
+  background: var(--primary-color-variant-700);
+  border: 2px solid var(--primary-color-variant-800);
+  color: white;
+}
+.cio-quiz .cio-share-results-share-button:focus {
+  outline: 3px solid var(--primary-color-variant-100);
+}
+
+.cio-quiz .cio-share-results-notification {
+  width: 100%;
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px;
+  font-weight: 500;
+  border: 1px solid #c8daee;
+  box-shadow: 0px 4px 10px 0px rgba(93, 124, 232, 0.15);
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+}
+
+.cio-quiz .cio-share-results-link-input {
+  font-size: 1rem;
+  padding: 12px 20px;
+  border-radius: 4px;
+  border: 1px solid #c8daee;
+  color: var(--gray-dust-100);
+  width: '100%';
+  flex-grow: 1;
+}
+
+.cio-quiz .cio-share-results-email-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex-grow: 1;
+}
+
+.cio-quiz .cio-share-results-email-input-error-message {
+  color: #e0182d;
+}
+
+.cio-quiz .cio-share-results-email-input {
+  padding: 0.5rem;
+  border: 0;
+  border-bottom: 1px solid var(--gray-dust-100);
+  color: var(--primary-color-variant-500);
+  padding: 0.8rem;
+  outline: none;
+  font-size: 1rem;
+  width: 100%;
+  flex-grow: 1;
+}
+
+.cio-quiz .cio-share-results-email-input--error {
+  border-bottom: 1px solid #e0182d;
+}
+
+@container (max-width: 500px) {
+  .cio-quiz .cio-share-results-button-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .cio-quiz .cio-share-results-share-button {
+    max-width: 100%;
+  }
+}
+
+@container (min-width: 500px) {
+  .cio-quiz .cio-share-results-button-group {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+  }
+
+  .cio-quiz .cio-share-results-share-button {
+    max-width: 138px;
+  }
+}

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

@@ -1,4 +1,4 @@
-import { CurrentQuestion, NextQuestionResponse, QuestionOption, QuizResultsResponse } from '../../types';
+import { CurrentQuestion, NextQuestionResponse, QuestionOption, QuizResultsResponse, QuizSharedResultsData } from '../../types';
 import type { QuizLocalReducerState } from './quizLocalReducer';
 export declare enum QuestionTypes {
     OpenText = "open",
@@ -30,18 +30,22 @@ export declare enum QuizAPIActionTypes {
     SET_IS_ERROR = 1,
     SET_QUIZ_RESULTS = 2,
     SET_CURRENT_QUESTION = 3,
-    RESET_QUIZ = 4
+    RESET_QUIZ = 4,
+    SET_QUIZ_SHARED_RESULTS = 5
 }
 export type ActionSetIsLoading = Action<QuizAPIActionTypes.SET_IS_LOADING>;
 export type ActionSetIsError = Action<QuizAPIActionTypes.SET_IS_ERROR>;
 export type ActionSetQuizResults = Action<QuizAPIActionTypes.SET_QUIZ_RESULTS, {
     quizResults: QuizResultsResponse;
 }>;
+export type ActionSetQuizSharedResults = Action<QuizAPIActionTypes.SET_QUIZ_SHARED_RESULTS, {
+    quizResults: QuizSharedResultsData;
+}>;
 export type ActionSetCurrentQuestion = Action<QuizAPIActionTypes.SET_CURRENT_QUESTION, {
     quizCurrentQuestion: NextQuestionResponse;
     quizSessionId?: string;
     quizVersionId?: string;
 }>;
 export type ActionResetQuiz = Action<QuizAPIActionTypes.RESET_QUIZ>;
-export type ActionQuizAPI = ActionSetIsLoading | ActionSetIsError | ActionSetQuizResults | ActionSetCurrentQuestion | ActionResetQuiz;
+export type ActionQuizAPI = ActionSetIsLoading | ActionSetIsError | ActionSetQuizResults | ActionSetCurrentQuestion | ActionResetQuiz | ActionSetQuizSharedResults;
 export {};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { GetAddToCartButtonProps, GetAddToFavoritesButtonProps, GetCoverQuestionProps, GetHydrateQuizButtonProps, GetNextQuestionButtonProps, GetSkipQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetResetQuizButtonProps, GetSelectInputProps, PrimaryColorStyles, QuizReturnState } from '../../types';
+import { GetAddToCartButtonProps, GetAddToFavoritesButtonProps, GetCoverQuestionProps, GetHydrateQuizButtonProps, GetNextQuestionButtonProps, GetSkipQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetResetQuizButtonProps, GetSelectInputProps, PrimaryColorStyles, QuizReturnState, GetShareResultsButtonProps } from '../../types';
 export interface QuizContextValue {
     cioClient?: ConstructorIOClient;
     state?: QuizReturnState;
@@ -12,6 +12,7 @@ export interface QuizContextValue {
     getSelectInputProps: GetSelectInputProps;
     getCoverQuestionProps: GetCoverQuestionProps;
     getResetQuizButtonProps: GetResetQuizButtonProps;
+    getShareResultsButtonProps: GetShareResultsButtonProps;
     getHydrateQuizButtonProps: GetHydrateQuizButtonProps;
     getAddToCartButtonProps: GetAddToCartButtonProps;
     getAddToFavoritesButtonProps: GetAddToFavoritesButtonProps;

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

@@ -1,11 +1,11 @@
 import { RequestStates } from '../../constants';
-import { CurrentQuestion, NextQuestionResponse, QuizResultsResponse } from '../../types';
+import { CurrentQuestion, NextQuestionResponse, QuizResultsResponse, QuizSharedResultsData } from '../../types';
 import { ActionQuizAPI } from './actions';
 export type QuizAPIReducerState = {
     quizRequestState: RequestStates;
     quizCurrentQuestion?: CurrentQuestion;
     quizFirstQuestion?: NextQuestionResponse;
-    quizResults?: QuizResultsResponse;
+    quizResults?: QuizResultsResponse | QuizSharedResultsData;
     selectedOptionsWithAttributes?: string[];
 };
 export declare const initialState: QuizAPIReducerState;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { QuizResultDataPartial } from '../../types';
-interface ResultCardProps {
+interface ResultCardOptions {
     result: QuizResultDataPartial;
     salePriceKey?: string;
     regularPriceKey?: string;
@@ -9,5 +9,5 @@ interface ResultCardProps {
     resultPosition: number;
     renderResultCardPriceDetails?: (result: QuizResultDataPartial) => JSX.Element;
 }
-export default function ResultCard(props: ResultCardProps): JSX.Element;
+export default function ResultCard(props: ResultCardOptions): JSX.Element;
 export {};

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

@@ -1,6 +1,8 @@
 /// <reference types="react" />
-import { ResultCardProps } from '../../types';
+import { ResultCardOptions, ResultsPageOptions } from '../../types';
 export interface IResultContainerProps {
-    options: ResultCardProps;
+    resultCardOptions?: ResultCardOptions;
+    resultsPageOptions?: ResultsPageOptions;
+    onShare: () => void;
 }
-export default function ResultContainer(props: IResultContainerProps): JSX.Element;
+export default function ResultContainer(props: IResultContainerProps): JSX.Element | null;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ResultCardProps } from '../../types';
-interface ResultsProps extends ResultCardProps {
+import { ResultCardOptions } from '../../types';
+interface ResultsProps extends ResultCardOptions {
 }
 declare function Results(props: ResultsProps): JSX.Element;
 export default Results;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+declare function ShareButton(props: Props): JSX.Element | null;
+interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    shareText?: string;
+    onClick: () => void;
+}
+export default ShareButton;

package/lib/types/components/ShareButton/ShareSVG.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function ShareSVG(): JSX.Element;

package/lib/types/components/ShareResultsModal/AlertCircleSVG.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function AlertCircleSVG(): JSX.Element;

package/lib/types/components/ShareResultsModal/CheckMarkCircleSVG.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function CheckMarkCircleSVG(): JSX.Element;

package/lib/types/components/ShareResultsModal/CloseSVG.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function CloseSVG(): JSX.Element;

package/lib/types/components/ShareResultsModal/EmailField.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface EmailFieldProps {
+    onSubmit: (email: string) => Promise<void>;
+}
+export default function EmailField({ onSubmit }: EmailFieldProps): JSX.Element;
+export {};

package/lib/types/components/ShareResultsModal/LinkField.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface LinkFieldProps {
+    url: string;
+}
+export default function LinkField({ url }: LinkFieldProps): JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { QuizResultsEventsProps, QuizReturnState } from '../../types';
+interface ShareResultsModalProps {
+    onClose: () => void;
+    quizState: QuizReturnState['quiz'];
+    onEmailResults?: QuizResultsEventsProps.OnEmailResults;
+}
+export default function ShareResultsModal({ onClose, quizState, onEmailResults, }: ShareResultsModalProps): JSX.Element;
+export {};

package/lib/types/constants.d.ts

@@ -1,14 +1,10 @@
 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  - `onAddToFavoritesClick` is an optional callback function that will be called when the \"Add To Favorites\" heart icon 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  - `resultCardRatingCountKey` is an optional parameter that specifies the metadata field name for the ratings count \n  - `resultCardRatingScoreKey` is an optional parameter that specifies the metadata field name for the ratings score \n  - `renderResultCardPriceDetails` is an optional render function to render custom prices section in result card \n  - `numResultsToDisplay` is an optional parameter that determines how many results should be displayed on results page\n- `callbacks` lets you pass callback functions that will be called on certain actions\n  - `onQuizNextQuestion` is an optional callback function that will be called when user moves to the next question\n  - `onQuizSkipQuestion` is an optional callback function that will be called when user skips a question\n- `sessionStateOptions` lets you configure the session modal behavior\n  - `showSessionModal` is a boolean used to decide whether to show the session modal. The default behavior is to show the session modal\n  - `showSessionModalOnResults` is a boolean to decide whether to show the session modal after reaching the results page. The default behavior is to not show the session modal\n  - `sessionStateKey` is a custom string that will be used as a session storage key\n- `questionsPageOptions` lets you configure the question page\n  - `skipQuestionButtonText` is an optional string that will be used as the skip button text\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 hookDescription = "- import `useCioQuiz` and call this custom hook in a functional component.\n- This hook leaves rendering logic up to you, while handling:\n  - state management\n  - data fetching\n  - keyboard navigation\n  - mouse interactions\n  - focus and submit event handling\n- Since the markup is controlled by you, the default styles might not be applied if you have a different DOM structure\n- To use this hook, an `apiKey` and `quizId` are required, and `resultsPageOptions` must be passed to the `useCioQuiz` hook to configure behavior. All other values are optional.\n- use the <a href=\"https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters\" target=\"__blank\">prop getters</a> and other variables returned by this hook (below) to leverage the functionality described above with jsx elements in your react component definitions\n\nCalling the `useCioQuiz` hook returns an object with the following keys:\n\n```jsx\nconst {\n  // must be used for a hooks integrations\n  state: QuizReturnState, // Quiz state\n  events: [{...}], // array of quiz events\n  getAddToCartButtonProps: () => ({...})), // prop getter for jsx add to cart button for quiz result,\n  getAddToFavoritesButtonProps: () => ({...})), // prop getter for jsx add to favorites button for quiz result,\n  getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,\n  getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,\n  getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,\n  getSkipQuestionButtonProps: () => ({...})), // prop getter for jsx skip button to traverse the quiz,\n  getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, \n  getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,\n  getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,\n  getQuizImageProps: () => ({...})), // prop getter for jsx quiz image,\n  getQuizResultButtonProps: () => ({...})), // prop getter for jsx result card click as a button,\n  getQuizResultLinkProps: () => ({...})), // prop getter for jsx result card click as a link. Should be spread into <a> tags,\n  getResetQuizButtonProps: () => ({...})), // prop getter for jsx reset quiz button,\n  cioClient, // instance of constructorio-client-javascript\n } = useCioQuiz(args);\n```\n\n> Note: when we say `cioClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
+export declare const hookDescription = "- Import `useCioQuiz` and call this custom hook in a functional component.\n- This hook leaves rendering logic up to you, while handling:\n  - state management\n  - data fetching\n  - keyboard navigation\n  - mouse interactions\n  - focus and submit event handling\n- Since the markup is controlled by you, the default styles might not be applied if you have a different DOM structure\n- To use this hook, an `apiKey` and `quizId` are required, and `resultsPageOptions` must be passed to the `useCioQuiz` hook to configure behavior. All other values are optional.\n- Use the <a href=\"https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters\" target=\"__blank\">prop getters</a> and other variables returned by this hook (below) to leverage the functionality described above with jsx elements in your react component definitions\n\nCalling the `useCioQuiz` hook returns an object with the following keys:\n\n```jsx\nconst {\n  // must be used for a hooks integrations\n  state: QuizReturnState, // Quiz state\n  events: [{...}], // array of quiz events\n  getAddToCartButtonProps: () => ({...})), // prop getter for jsx add to cart button for quiz result,\n  getAddToFavoritesButtonProps: () => ({...})), // prop getter for jsx add to favorites button for quiz result,\n  getCoverQuestionProps: () => ({...})), // prop getter for jsx quiz cover question,\n  getHydrateQuizButtonProps: () => ({...})), // prop getter for jsx hydrate quiz button,\n  getNextQuestionButtonProps: () => ({...})), // prop getter for jsx next button to traverse the quiz,\n  getSkipQuestionButtonProps: () => ({...})), // prop getter for jsx skip button to traverse the quiz,\n  getPreviousQuestionButtonProps: () => ({...})), // prop getter for jsx back button to traverse the quiz, \n  getOpenTextInputProps: () => ({...})), // prop getter for jsx open text input,\n  getSelectInputProps: () => ({...})), // prop getter for jsx select input for select type questions,\n  getQuizImageProps: () => ({...})), // prop getter for jsx quiz image,\n  getQuizResultButtonProps: () => ({...})), // prop getter for jsx result card click as a button,\n  getQuizResultLinkProps: () => ({...})), // prop getter for jsx result card click as a link. Should be spread into <a> tags,\n  getResetQuizButtonProps: () => ({...})), // prop getter for jsx reset quiz button,\n  cioClient, // instance of constructorio-client-javascript\n } = useCioQuiz(args);\n```\n\n> Note: when we say `cioClient`, we are referring 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)";
 export declare const smallContainerDescription = "If you are using the provided styles, CioQuiz component will respect the height and width of its parent container and use responsive styles based on the parent container's dimensions";
 export declare const changePrimaryColorDescription = "\nIf you would like to use a different primary color, pass a `primaryColor` string in RGB format ('R, G, B').\n\nAccent colors for borders and different states (hover, focus, active) will be calculated automatically based on the primary color you provided.\n\nBy default, the primary color has a value of \"35, 71, 199\" (Constructor Blue).\n\nIn the example below, the `primaryColor` prop has been used to override this color to \"255, 82, 48\" (Orange).\n\n> Advanced Option: Instead of passing a primaryColor prop, you can also override `--primary-color-h`, `--primary-color-s`, and `--primary-color-l` CSS variables within a `.cio-quiz` container element. If explicitly given a value in your CSS, then the values of these variables will be used as the HSL values for your quiz.\n";
-export declare const callbacksDescription = "Pass an `apiKey`, a `quizId`, and `callbacks`";
-export declare const favoritesDescription = "\nAdd `const [favorites, setFavorites] = useState([]);` or equivalent to manage the favorite items' state.\n\nPass favorites as an array to `favoriteItems` in `resultsPageOptions` as a prop to CioQuiz.\n\nPass a callback function to `onAddToFavoritesClick` in `resultsPageOptions` as a prop to CioQuiz to handle favorites state changes to update `favorites` array.    \n";
 export declare enum RequestStates {
     Stale = "STALE",
     Loading = "LOADING",

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

@@ -1,4 +1,4 @@
-import { GetResetQuizButtonProps, GetCoverQuestionProps, GetNextQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetSelectInputProps, QuizEventsReturn, GetHydrateQuizButtonProps, GetAddToCartButtonProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetSelectQuestionImageProps, GetAddToFavoritesButtonProps, GetSkipQuestionButtonProps } from '../../types';
+import { GetResetQuizButtonProps, GetCoverQuestionProps, GetNextQuestionButtonProps, GetOpenTextInputProps, GetPreviousQuestionButtonProps, GetQuizImageProps, GetSelectInputProps, QuizEventsReturn, GetHydrateQuizButtonProps, GetAddToCartButtonProps, GetQuizResultButtonProps, GetQuizResultLinkProps, GetSelectQuestionImageProps, GetAddToFavoritesButtonProps, GetSkipQuestionButtonProps, GetShareResultsButtonProps } from '../../types';
 import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
 import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
 declare const usePropsGetters: (quizEvents: QuizEventsReturn, quizApiState: QuizAPIReducerState, quizLocalState: QuizLocalReducerState, favoriteItems?: string[]) => {
@@ -10,6 +10,7 @@ declare const usePropsGetters: (quizEvents: QuizEventsReturn, quizApiState: Quiz
     getSelectInputProps: GetSelectInputProps;
     getCoverQuestionProps: GetCoverQuestionProps;
     getResetQuizButtonProps: GetResetQuizButtonProps;
+    getShareResultsButtonProps: GetShareResultsButtonProps;
     getHydrateQuizButtonProps: GetHydrateQuizButtonProps;
     getAddToCartButtonProps: GetAddToCartButtonProps;
     getAddToFavoritesButtonProps: GetAddToFavoritesButtonProps;

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

@@ -0,0 +1,7 @@
+declare const useQueryParams: () => {
+    queryItems: string[];
+    queryAttributes: string[];
+    isSharedResultsQuery: boolean;
+    removeSharedResultsQueryParams: () => void;
+};
+export default useQueryParams;

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

@@ -1,6 +1,6 @@
 import { ActionAnswerQuestion } from '../../components/CioQuiz/actions';
 import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
 import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
-import { QuizEventsReturn, OnQuizNextQuestion } from '../../types';
-declare const useQuizNextClick: (quizApiState: QuizAPIReducerState, quizLocalState: QuizLocalReducerState, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>, onQuizNextQuestion?: OnQuizNextQuestion) => QuizEventsReturn.NextQuestion;
+import { QuizEventsReturn, QuizResultsEventsProps } from '../../types';
+declare const useQuizNextClick: (quizApiState: QuizAPIReducerState, quizLocalState: QuizLocalReducerState, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>, onQuizNextQuestion?: QuizResultsEventsProps.OnQuizNextQuestion) => QuizEventsReturn.NextQuestion;
 export default useQuizNextClick;

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

@@ -1,4 +1,11 @@
+/// <reference types="react" />
 import { ActionAnswerQuestion, ActionQuizAPI } from '../../components/CioQuiz/actions';
-import { QuizEventsReturn, QuizResultsResponse } from '../../types';
-declare const useQuizResetClick: (resetQuizSessionStorageState: () => void, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>, dispatchApiState: React.Dispatch<ActionQuizAPI>, quizResults?: QuizResultsResponse) => QuizEventsReturn.NextQuestion;
+import { QuizEventsReturn, QuizResultsResponse, QuizSharedResultsData } from '../../types';
+type IUseQuizResetClickProps = {
+    resetQuizSessionStorageState: () => void;
+    dispatchLocalState: React.Dispatch<ActionAnswerQuestion>;
+    dispatchApiState: React.Dispatch<ActionQuizAPI>;
+    quizResults?: QuizResultsResponse | QuizSharedResultsData;
+};
+declare const useQuizResetClick: (props: IUseQuizResetClickProps) => QuizEventsReturn.NextQuestion;
 export default useQuizResetClick;

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

@@ -1,6 +1,6 @@
 import { ActionAnswerQuestion } from '../../components/CioQuiz/actions';
 import { QuizAPIReducerState } from '../../components/CioQuiz/quizApiReducer';
 import { QuizLocalReducerState } from '../../components/CioQuiz/quizLocalReducer';
-import { QuizEventsReturn, OnQuizSkipQuestion } from '../../types';
-declare const useQuizSkipClick: (quizApiState: QuizAPIReducerState, quizLocalState: QuizLocalReducerState, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>, onQuizSkipQuestion?: OnQuizSkipQuestion) => QuizEventsReturn.NextQuestion;
+import { QuizEventsReturn, QuizResultsEventsProps } from '../../types';
+declare const useQuizSkipClick: (quizApiState: QuizAPIReducerState, quizLocalState: QuizLocalReducerState, dispatchLocalState: React.Dispatch<ActionAnswerQuestion>, onQuizSkipQuestion?: QuizResultsEventsProps.OnQuizSkipQuestion) => QuizEventsReturn.NextQuestion;
 export default useQuizSkipClick;

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

@@ -0,0 +1,2 @@
+import { QuizReturnState } from '../types';
+export default function useShareResultsLink(quizState: QuizReturnState['quiz']): string;

package/lib/types/index.d.ts

@@ -1,5 +1,6 @@
 import CioQuiz from './components/CioQuiz';
 export { default as useCioQuiz } from './hooks/useQuiz';
+export { default as useShareResultsLink } from './hooks/useShareResultsLink';
 export { default as QuizQuestions } from './components/QuizQuestions/index';
 export { default as OpenTextQuestion } from './components/OpenTextTypeQuestion/OpenTextTypeQuestion';
 export { default as CoverQuestion } from './components/CoverTypeQuestion/CoverTypeQuestion';

package/lib/types/services/index.d.ts

@@ -1,8 +1,9 @@
-import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
-import { QuizzesParameters, QuizzesResultsParameters, NextQuestionResponse, QuizResultsResponse, QuizResultDataPartial } from '../types';
+import ConstructorIOClient, { type GetBrowseResultsForItemIdsResponse } from '@constructor-io/constructorio-client-javascript';
+import { QuizzesParameters, QuizzesResultsParameters, NextQuestionResponse, QuizResultsResponse, QuizResultDataPartial, QuizSharedResultsData } from '../types';
 export declare const getCioClient: (apiKey?: string) => ConstructorIOClient | undefined;
 export declare const getNextQuestion: (cioClient: ConstructorIOClient, quizId: string, parameters: QuizzesParameters) => Promise<NextQuestionResponse>;
 export declare const getQuizResults: (cioClient: ConstructorIOClient, quizId: string, parameters: QuizzesResultsParameters) => Promise<QuizResultsResponse>;
-export declare const trackQuizResultsLoaded: (cioClient: ConstructorIOClient, quizResults: QuizResultsResponse) => void;
-export declare const trackQuizResultClick: (cioClient: ConstructorIOClient, quizResults: QuizResultsResponse, result: QuizResultDataPartial, position: number) => void;
-export declare const trackQuizConversion: (cioClient: ConstructorIOClient, quizResults: QuizResultsResponse, result: QuizResultDataPartial, price?: number, type?: string) => void;
+export declare const getBrowseResultsForItemIds: (cioClient: ConstructorIOClient, itemIds: string[]) => Promise<GetBrowseResultsForItemIdsResponse>;
+export declare const trackQuizResultsLoaded: (cioClient: ConstructorIOClient, quizResults: QuizResultsResponse | QuizSharedResultsData) => void;
+export declare const trackQuizResultClick: (cioClient: ConstructorIOClient, quizResults: QuizResultsResponse | QuizSharedResultsData, result: QuizResultDataPartial, position: number) => void;
+export declare const trackQuizConversion: (cioClient: ConstructorIOClient, quizResults: QuizResultsResponse | QuizSharedResultsData, result: QuizResultDataPartial, price?: number, type?: string) => void;