Questions and Answers

i18n.json

@@ -59,6 +59,8 @@
     "/ramadan-activities": ["ramadan-activities"],
     "/notification-settings": ["notification-settings"],
     "/calendar": ["quranic-calendar"],
-    "/media": ["media"]
+    "/media": ["media"],
+    "/[chapterId]/questions": ["quran-reader", "question"],
+    "/questions/[questionId]": ["quran-reader", "question"]
   }
 }

locales/en/question.json

@@ -0,0 +1,4 @@
+{
+    "q-and-a": "Questions and Answers related to ",
+    "question": "Question"
+}

locales/en/quran-reader.json

@@ -74,5 +74,16 @@
   "trans-change": "Change",
   "translation-by": "Translation by",
   "verses-range": "Range of verses",
-  "view-on-quran-reflect": "View on QuranReflect"
+  "view-on-quran-reflect": "View on QuranReflect",
+  "q-and-a": {
+    "clarification": "Clarification",
+    "community": "Community",
+    "tafsir": "Tafsir",
+    "explore_answers": "Explore Answers",
+    "explore_answers_tooltip": "'Explore Answers' is a curated list of thoughtful questions and essential notes relating to specific verses that will enhance your understanding and connection with the Quran.",
+    "answer": "Answer",
+    "summary": "Summary",
+    "references": "References",
+    "questions": "Questions"
+  }
 }

src/components/QuestionAndAnswer/Answer/Answer.module.scss

@@ -0,0 +1,18 @@
+.container {
+    padding-block: var(--spacing-large);
+}
+
+.rangesHeader {
+    font-size: var(--font-size-small);
+    color: var(--color-text-faded);
+    padding-block-end: var(--spacing-small);
+    font-weight: var(--font-weight-semibold);
+    flex-direction: column;
+    align-items: flex-end;
+
+    // this is the ranges indicator that we want to reverse to show the chevron on the right
+    div:first-child {
+        flex-direction: row-reverse;
+        align-items: center;
+    }
+}

src/components/QuestionAndAnswer/Answer/AnswerBody/AnswerBody.module.scss

@@ -0,0 +1,31 @@
+.answerBody {
+    background-color: var(--color-background-alternative-faded);
+    border-radius: var(--border-radius-rounded);
+    padding: var(--spacing-medium2-px);
+    font-size: var(--font-size-small);
+}
+
+.header {
+    font-size: var(--font-size-small);
+    color: var(--color-text-faded);
+    padding-block-end: var(--spacing-small);
+    font-weight: var(--font-weight-bold);
+}
+
+.text {
+    padding-block-end: var(--spacing-small);
+}
+
+.shareButton {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+}
+
+.shareButtonText {
+    color: var(--color-text-faded);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xxsmall);
+}

src/components/QuestionAndAnswer/Answer/AnswerBody/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import useTranslation from 'next-translate/useTranslation';
+
+import styles from './AnswerBody.module.scss';
+
+import Button, { ButtonSize, ButtonVariant } from '@/dls/Button/Button';
+import ShareIcon from '@/icons/share.svg';
+import { Question } from '@/types/QuestionsAndAnswers/Question';
+
+type Props = {
+  question: Question;
+};
+
+const AnswerBody: React.FC<Props> = ({ question }) => {
+  const { t } = useTranslation('quran-reader');
+  return (
+    <>
+      <div className={styles.answerBody}>
+        <p className={styles.header}>{t('q-and-a.answer')}</p>
+        <div className={styles.text}>{question?.answers[0]?.body}</div>
+        {question?.summary && (
+          <>
+            <p className={styles.header}>{t('q-and-a.summary')}</p>
+            <div className={styles.text}>{question?.summary}</div>
+          </>
+        )}
+        {question?.references && (
+          <>
+            <p className={styles.header}>{t('q-and-a.references')}</p>
+            {question?.references.map((reference) => (
+              <li key={reference}>{reference}</li>
+            ))}
+          </>
+        )}
+      </div>
+      <div className={styles.shareButton}>
+        <Button variant={ButtonVariant.Compact} size={ButtonSize.Small}>
+          <div className={styles.shareButtonText}>
+            <ShareIcon /> {t('common:share')}
+          </div>
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default AnswerBody;

src/components/QuestionAndAnswer/Answer/RangesIndicator/index.tsx

@@ -0,0 +1,29 @@
+import { useContext } from 'react';
+
+import useTranslation from 'next-translate/useTranslation';
+
+import DataContext from '@/contexts/DataContext';
+import { getChapterData } from '@/utils/chapter';
+import { toLocalizedNumber, toLocalizedVerseKey } from '@/utils/locale';
+import { VerseRangeInfo } from '@/utils/verseKeys';
+
+type Props = {
+  parsedRanges: VerseRangeInfo<number>;
+};
+
+const RangesIndicator: React.FC<Props> = ({ parsedRanges }) => {
+  const chaptersData = useContext(DataContext);
+  const { lang } = useTranslation('quran-reader');
+  const [rangeStartData, rangeEndData] = parsedRanges;
+  const chapterData = getChapterData(chaptersData, rangeStartData.chapter.toString());
+  let verseKeyName = `${chapterData.transliteratedName} ${toLocalizedVerseKey(
+    `${rangeStartData.chapter}:${rangeStartData.verse}`,
+    lang,
+  )}`;
+  if (rangeStartData.verse !== rangeEndData.verse) {
+    verseKeyName += `-${toLocalizedNumber(rangeEndData.verse, lang)}`;
+  }
+  return <div>{verseKeyName}</div>;
+};
+
+export default RangesIndicator;

src/components/QuestionAndAnswer/Answer/index.tsx

@@ -0,0 +1,52 @@
+import styles from './Answer.module.scss';
+import AnswerBody from './AnswerBody';
+import RangesIndicator from './RangesIndicator';
+
+import VerseAndTranslation from '@/components/Verse/VerseAndTranslation';
+import Collapsible from '@/dls/Collapsible/Collapsible';
+import ChevronDownIcon from '@/icons/chevron-down.svg';
+import { Question } from '@/types/QuestionsAndAnswers/Question';
+import { logEvent } from '@/utils/eventLogger';
+import { parseVerseRange } from '@/utils/verseKeys';
+
+interface AnswerProps {
+  question: Question;
+}
+
+const Answer = ({ question }: AnswerProps) => {
+  const parsedRanges = parseVerseRange(question.ranges[0], true);
+  const [rangeStartData, rangeEndData] = parsedRanges;
+
+  const onRangesCollapseOpenChange = (isOpen: boolean) => {
+    logEvent('question_ranges_collapse_open', {
+      isOpen,
+    });
+  };
+
+  return (
+    <div className={styles.container}>
+      <Collapsible
+        title={<RangesIndicator parsedRanges={parsedRanges} />}
+        prefix={<ChevronDownIcon />}
+        shouldRotatePrefixOnToggle
+        onOpenChange={onRangesCollapseOpenChange}
+        headerClassName={styles.rangesHeader}
+      >
+        {({ isOpen: isOpenRenderProp }) => {
+          if (!isOpenRenderProp) return null;
+
+          return (
+            <VerseAndTranslation
+              chapter={rangeStartData.chapter}
+              from={rangeStartData.verse}
+              to={rangeEndData.verse}
+            />
+          );
+        }}
+      </Collapsible>
+      <AnswerBody question={question} />
+    </div>
+  );
+};
+
+export default Answer;

src/components/QuestionAndAnswer/Pill/QuestionAndAnswerPill.module.scss

@@ -0,0 +1,41 @@
+@use "src/styles/theme";
+@use "src/components/QuestionAndAnswer/Pill/shared.module.scss" as shared;
+
+.container {
+    padding-inline: var(--spacing-xsmall-px) !important;
+    padding-block: var(--spacing-xxsmall-px) !important;
+    gap: var(--spacing-xxsmall-px) !important;
+    border-radius: var(--spacing-medium2-px) !important;
+
+    color: var(--text-color) !important;
+    background-color: var(--background-color) !important;
+    text-transform: capitalize !important;
+
+    > svg {
+        width: 16px;
+        height: 16px;
+        padding-inline-end: var(--spacing-xxsmall);
+    }
+}
+
+.clarification {
+    @extend %clarification;
+}
+
+.explore_answers {
+    @extend %explore_answers;
+}
+
+.community {
+    --background-color: var(--shade-1);
+    --text-color: var(--color-text-faded);
+}
+
+.tafsir {
+    --background-color: var(--color-success-faded);
+    --text-color: #2ca4ab;
+}
+
+.button {
+    cursor: pointer;
+}

src/components/QuestionAndAnswer/Pill/QuestionAndAnswerPill.stories.tsx

@@ -0,0 +1,28 @@
+import QuestionAndAnswerPill from '.';
+
+import QuestionType from '@/types/QuestionsAndAnswers/QuestionType';
+
+export default {
+  title: 'QuestionsAndAnswers/Pill',
+  component: QuestionAndAnswerPill,
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+      },
+      options: Object.values(QuestionType),
+      table: {
+        category: 'Required',
+      },
+    },
+  },
+};
+
+export const Default = (args) => (
+  <span className="previewWrapper">
+    <QuestionAndAnswerPill {...args} />
+  </span>
+);
+Default.args = {
+  type: QuestionType.CLARIFICATION,
+};

src/components/QuestionAndAnswer/Pill/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import classNames from 'classnames';
+import useTranslation from 'next-translate/useTranslation';
+
+import styles from './QuestionAndAnswerPill.module.scss';
+
+import Pill from '@/dls/Pill';
+import TafsirIcon from '@/icons/book-open.svg';
+import CommunityIcon from '@/icons/head-dot.svg';
+import ScholarsSayIcon from '@/icons/lighbulb.svg';
+import ClarificationIcon from '@/icons/notebook.svg';
+import QuestionType from '@/types/QuestionsAndAnswers/QuestionType';
+
+type Props = {
+  type: QuestionType;
+  isButton?: boolean;
+};
+
+const TYPE_TO_ICON = {
+  [QuestionType.TAFSIR]: TafsirIcon,
+  [QuestionType.COMMUNITY]: CommunityIcon,
+  [QuestionType.CLARIFICATION]: ClarificationIcon,
+  [QuestionType.EXPLORE_ANSWERS]: ScholarsSayIcon,
+};
+
+const QuestionAndAnswerPill: React.FC<Props> = ({ type, isButton = true }) => {
+  const { t } = useTranslation();
+  const Icon = TYPE_TO_ICON[type];
+  const typeLabel = type.toLowerCase();
+  const typeText = t(`quran-reader:q-and-a.${typeLabel}`);
+  const prefix = type === QuestionType.EXPLORE_ANSWERS ? ` >` : '';
+  return (
+    <Pill
+      containerClassName={classNames(styles[typeLabel], styles.container, {
+        [styles.button]: isButton,
+      })}
+    >
+      <Icon />
+      <span>
+        {typeText}
+        {prefix}
+      </span>
+    </Pill>
+  );
+};
+
+export default QuestionAndAnswerPill;

src/components/QuestionAndAnswer/Pill/shared.module.scss

@@ -0,0 +1,21 @@
+@use "src/styles/theme";
+
+%clarification {
+    font-weight: var(--font-weight-semibold) !important;
+    @include theme.light {
+        --background-color: #fff8e4;
+        --text-color: #7c6e21;
+    }
+    @include theme.dark {
+        --background-color: #fff8e4;
+        --text-color: #7c6e21;
+    }
+    @include theme.sepia {
+        --background-color: #f1d5b7;
+        --text-color: #7c6e21;
+    }
+}
+
+%explore_answers {
+    @extend %clarification;
+}