Add support for variations on quiz results page #228

mocca102 · 2025-05-05T22:38:53Z

Pull Request Checklist

Before you submit a pull request, please make sure you have to following:

I have added or updated TypeScript types for my changes, ensuring they are compatible with the existing codebase.
I have added tests that prove my fix is effective or that my feature works.
I have added any necessary documentation (if appropriate).

PR Type

What kind of change does this PR introduce?

Feature

What are the changes?

Support updating the rendered quiz result data (image, price, ids) based on the selected variation swatch.
Send the selected variation_id with tracking events

How?

`hooks/useResult.tsx`

Responsible for returning the correct item data based on the currently selected variation
Look up the docs page for useResult for detailed documentation

Usage scenarios

Component

Supported OOB with ResultCardSwatches component

RenderProps

getQuizResultSwatchProps
- Spread on the swatch component, and it works OOB
- Updated the CioQuiz usage example with getQuizResultSwatchProps

Hooks

The user will need to utilize the useResult hook
Look up the docs page for useResult for detailed documentation

Before and After

.github/workflows/spell-check.yml

Mudaafi

First review, I didn't take a look at the tests in-depth yet, but at a glance they look good. Implementation looks good as well, I just had a couple of questions/comments first

Mudaafi · 2025-06-03T01:28:23Z

src/hooks/useResult.tsx

+import { useCallback, useState } from 'react';
+import { GetQuizResultSwatchProps, QuizResultDataPartial } from '../types';
+
+const useResult = (result: QuizResultDataPartial, swatchImageKey?: string) => {


Should we name this useResultCard instead to match the component it's tied to? I got confused with the Results component a couple of times but I might just be slow

Rename hook userResult -> useResultCard

Mudaafi · 2025-06-03T01:30:11Z

src/components/ResultCard/ResultCard.tsx

-    getNestedValueUsingDotNotation(result?.data, salePriceKey)
-  );
+  const { faceOutResult, getQuizResultSwatchProps } = useResult(result, swatchImageKey);
+  const { data, value } = faceOutResult || {};


I like the defensive programming. Just curious, is there ever a case where faceOutResult would be null? From the types, it doesn't seem to be something we'd expect to happen.

src/hooks/useResultCard.tsx

Mudaafi · 2025-06-03T01:44:15Z

src/hooks/useResultCard.tsx

+      const style = {
+        background: `url(${
+          swatchImageKey ? variation?.data?.[swatchImageKey] : variation?.data?.image_url
+        })`,
+        backgroundSize: 'fit-object',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+      };


Rather than this being a style we inject into the ResultCardsSwatches later, would it be better to just return a custom class like cio-result-card-swatch .cio-result-card-swatch-selected?

I understand background can't be a static css and needs to be computed, so we can keep it as a style, but I'd also want to return the swatchImage as a separate prop itself so that custom renderFunctions can make use of it w/o needing to rely on background or navigate into the result object to retrieve it. wdyt?

so we can keep it as a style

Alternatively, the component can do the setting of the background style if we already return the image as a prop

Created a story for that
https://linear.app/constructor/issue/CDX-268/quizzes-ui-useresultcard-return-a-custom-class-instead-of-injecting-a

Mudaafi · 2025-06-04T16:45:21Z

src/components/ResultCard/ResultCard.tsx

-import { QuizResultDataPartial } from '../../types';
+import { QuizResultDataPartial, RenderResultCard } from '../../types';
 import { getNestedValueUsingDotNotation, validateNumberOrString } from '../../utils';
+import ResultCardSwatches from '../ResultCardSwatches/ResultCardSwatches';


No change required, but it would be nice if we had an index.ts export file structure. We use this pattern throughout the repo so let's keep it as is until we have the time to refactor

src/components/ResultCardSwatches/ResultCardSwatches.tsx

src/hooks/useResultCard.tsx

src/stories/Quiz/Hooks/Docs/markdown/UseResultDocs.md

Mudaafi · 2025-06-04T18:39:39Z

src/stories/Quiz/Hooks/Docs/useResult.mdx

+import { Meta, Markdown } from '@storybook/blocks';
+import UseResultDocs from './markdown/UseResultDocs.md';
+
+<Meta title="Quiz/useResult" />


Thoughts? Felt a little weird having it just dangling there

Suggested change

<Meta title="Quiz/useResult" />

<Meta title="Quiz/Other Hooks/useResult" />

Move useResultCard to Other Hooks

Copilot

Pull Request Overview

This PR introduces support for variation-based quiz results, allowing updated content (image, price, IDs) based on the selected variation swatch and enabling tracking with the selected variation_id.

Added new hook (useResult) and TypeScript types to manage variation selection.
Updated components (ResultCard, ResultCardSwatches, Results, etc.), documentation, and tests to support the new swatch behavior.

Reviewed Changes

Copilot reviewed 22 out of 22 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/types.ts	Added new types and updated options to include swatch-related props.
src/styles.css	Introduced CSS classes for quiz swatches and selected states.
src/stories/Quiz/**	Updated documentation and usage examples for useResult and render props.
src/services/index.ts	Adjusted tracking event to correctly read variation_id.
src/hooks/useResult.tsx	Created new hook managing variations and swatch props with minor styling.
src/components/**	Updated ResultCard and related components to use new hook and props.
spec/**	Extended tests to cover the new variation swatch behaviors and hook usage.
.github/workflows/spell-check.yml	Updated Node.js version for spell-checking.

src/hooks/useResultCard.tsx

…d collision

Co-authored-by: Ahmad Mudaafi' <ahmad.mudaafi@constructor.io>

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Co-authored-by: Ahmad Mudaafi' <ahmad.mudaafi@constructor.io>

…n_id-being-sent-with

Mudaafi

lgtm

mocca102 requested a review from a team as a code owner May 5, 2025 22:38

mocca102 removed the request for review from a team May 5, 2025 22:40

Add support for variations on quiz results page

577ef88

mocca102 force-pushed the ci-4249-os-ui-quizzes-fix-incorrect-variation_id-being-sent-with branch from 9fb0bb6 to 577ef88 Compare May 5, 2025 22:59

Add tests

c0cfabc

mocca102 force-pushed the ci-4249-os-ui-quizzes-fix-incorrect-variation_id-being-sent-with branch from 534feb7 to c0cfabc Compare May 6, 2025 13:25

mocca102 added 5 commits May 6, 2025 17:45

support render props

e738759

update test

c9f1ad6

refactor

5d04451

Add hooks docs

e59ec43

Fix cspell action

62002c0

mocca102 requested a review from a team May 6, 2025 21:09

mocca102 commented May 7, 2025

View reviewed changes

.github/workflows/spell-check.yml Show resolved Hide resolved

update result card tests

9bb3dfd

mocca102 removed the request for review from a team May 7, 2025 12:29

Update tests

c0a69ab

mocca102 requested a review from a team May 7, 2025 13:21

Mudaafi reviewed Jun 4, 2025

View reviewed changes

esezen requested a review from Copilot June 20, 2025 14:12

Copilot AI reviewed Jun 20, 2025

View reviewed changes

src/hooks/useResultCard.tsx Outdated Show resolved Hide resolved

Rename hook userResult -> useResultCard

400d0d5

mocca102 requested review from HHHindawy and TarekAlQaddy as code owners September 30, 2025 10:42

mocca102 and others added 7 commits September 30, 2025 13:52

Rename ResultCardOptions in ResultCard.tsx to ResultCardProps to avoi…

4f6387f

…d collision

Move swatchImageKey with the rest of keys

57db220

Apply suggestion from @Mudaafi

a7eaa57

Co-authored-by: Ahmad Mudaafi' <ahmad.mudaafi@constructor.io>

Apply suggestion from @Mudaafi

f2f9023

Co-authored-by: Ahmad Mudaafi' <ahmad.mudaafi@constructor.io>

Apply suggestion from @Copilot

a5881cb

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Apply suggestion from @Mudaafi

90ee163

Co-authored-by: Ahmad Mudaafi' <ahmad.mudaafi@constructor.io>

Apply suggestion from @Mudaafi

972bcf2

Co-authored-by: Ahmad Mudaafi' <ahmad.mudaafi@constructor.io>

mocca102 added 4 commits September 30, 2025 14:12

Move useResultCard to Other Hooks

b4bff18

Add missing import

dd74228

Add key to swatches buttons

59ce493

Merge branch 'main' into ci-4249-os-ui-quizzes-fix-incorrect-variatio…

f55ea4c

…n_id-being-sent-with

mocca102 requested a review from Mudaafi September 30, 2025 11:23

Mudaafi added 2 commits October 8, 2025 07:17

fix breaking ui tests

f799d52

Merge branch 'main' into ci-4249-os-ui-quizzes-fix-incorrect-variatio…

b50e056

…n_id-being-sent-with

Mudaafi approved these changes Oct 7, 2025

View reviewed changes

	<Meta title="Quiz/useResult" />
	<Meta title="Quiz/Other Hooks/useResult" />

Add support for variations on quiz results page #228

Are you sure you want to change the base?

Add support for variations on quiz results page #228

Uh oh!

Conversation

mocca102 commented May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Checklist

PR Type

What are the changes?

How?

hooks/useResult.tsx

Usage scenarios

Component

RenderProps

Hooks

Before and After

Uh oh!

Uh oh!

Mudaafi left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mocca102 Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Mudaafi left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mocca102 commented May 5, 2025 •

edited

Loading

`hooks/useResult.tsx`

mocca102 Sep 30, 2025 •

edited

Loading