i18n question text & questionnaire order title

packages/app/src/components/Questionnaire/Question.tsx

@@ -1,14 +1,20 @@
 import { IQuestionHasId } from '~/interfaces/questionnaire/question';
+import { useCurrentUser } from '~/stores/context';
 
 type QuestionProps = {
   question: IQuestionHasId,
 }
 
 const Question = ({ question }: QuestionProps): JSX.Element => {
+  const { data: currentUser } = useCurrentUser();
+  const lang = currentUser?.lang;
+
+  const questionText = lang === 'en_US' ? question.text.en_US : question.text.ja_JP;
+
   return <div className="row mt-4">
     <div className="col-6 d-flex align-items-center">
       <span>
-        {question.text}
+        {questionText}
       </span>
     </div>
     <div className="col-1 d-flex align-items-center p-0">

packages/app/src/components/Questionnaire/QuestionnaireModal.tsx

@@ -17,6 +17,7 @@ type QuestionnaireModalProps = {
 
 const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JSX.Element => {
   const { data: currentUser } = useCurrentUser();
+  const lang = currentUser?.lang;
 
   const { data: questionnaireModalData, close: closeQuestionnaireModal } = useQuestionnaireModal();
   const isOpened = questionnaireModalData?.openedQuestionnaireId === questionnaireOrder._id;
@@ -37,6 +38,8 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
     closeQuestionnaireModal();
   };
 
+  const questionnaireOrderTitle = lang === 'en_US' ? questionnaireOrder.title.en_US : questionnaireOrder.title.ja_JP;
+
   return (<Modal
     size="lg"
     isOpen={isOpened}
@@ -50,7 +53,7 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
     </ModalHeader>
     <ModalBody className="my-4">
       <div className="container">
-        <h3 className="grw-modal-head">{questionnaireOrder.title}</h3>
+        <h3 className="grw-modal-head">{questionnaireOrderTitle}</h3>
         <div className="row mt-4">
           <div className="col-6"></div>
           <div className="col-1 p-0 font-weight-bold text-center align-items-center">{t('questionnaire.no_answer')}</div>

packages/app/src/components/Questionnaire/QuestionnaireToast.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { useTranslation } from 'next-i18next';
 
 import { IQuestionnaireOrderHasId } from '~/interfaces/questionnaire/questionnaire-order';
+import { useCurrentUser } from '~/stores/context';
 import { useQuestionnaireModal } from '~/stores/modal';
 
 
@@ -12,6 +13,9 @@ type QuestionnaireToastProps = {
 
 const QuestionnaireToast = ({ questionnaireOrder }: QuestionnaireToastProps): JSX.Element => {
   const { open: openQuestionnaireModal } = useQuestionnaireModal();
+  const { data: currentUser } = useCurrentUser();
+  const lang = currentUser?.lang;
+
   const [isOpen, setIsOpen] = useState(true);
 
   const { t } = useTranslation();
@@ -21,9 +25,11 @@ const QuestionnaireToast = ({ questionnaireOrder }: QuestionnaireToastProps): JS
     openQuestionnaireModal(questionnaireOrder._id);
   };
 
+  const questionnaireOrderTitle = lang === 'en_US' ? questionnaireOrder.title.en_US : questionnaireOrder.title.ja_JP;
+
   return <div className={`toast ${isOpen ? 'show' : 'hide'}`}>
     <div className="toast-header bg-info">
-      <strong className="mr-auto text-light">{questionnaireOrder.title}</strong>
+      <strong className="mr-auto text-light">{questionnaireOrderTitle}</strong>
       <button type="button" className="ml-2 mb-1 close" onClick={() => setIsOpen(false)}>
         <span aria-hidden="true" className="text-light">&times;</span>
       </button>

packages/app/src/interfaces/questionnaire/question.ts

@@ -6,7 +6,10 @@ type QuestionType = typeof QuestionType[keyof typeof QuestionType];
 
 export interface IQuestion {
   type: QuestionType
-  text: string
+  text: {
+    ja_JP: string
+    en_US: string
+  }
 }
 
 export type IQuestionHasId = IQuestion & HasObjectId;

packages/app/src/interfaces/questionnaire/questionnaire-order.ts

@@ -4,7 +4,10 @@ import { ICondition, IConditionHasId } from './condition';
 import { IQuestion, IQuestionHasId } from './question';
 
 export interface IQuestionnaireOrder {
-  title: string,
+  title: {
+    ja_JP: string
+    en_US: string
+  }
   showFrom: Date
   showUntil: Date
   questions: IQuestion[]
@@ -12,7 +15,10 @@ export interface IQuestionnaireOrder {
 }
 
 export type IQuestionnaireOrderHasId = {
-  title: string,
+  title: {
+    ja_JP: string
+    en_US: string
+  }
   showFrom: Date
   showUntil: Date
   questions: IQuestionHasId[]

packages/app/src/server/models/questionnaire/questionnaire-order.ts

@@ -10,8 +10,13 @@ export interface QuestionnaireOrderDocument extends IQuestionnaireOrder, Documen
 
 export type QuestionnaireOrderModel = Model<QuestionnaireOrderDocument>
 
+const questionnaireOrderTitleSchema = new Schema<IQuestionnaireOrder['title']>({
+  ja_JP: { type: String, required: true },
+  en_US: { type: String, required: true },
+});
+
 const questionnaireOrderSchema = new Schema<QuestionnaireOrderDocument>({
-  title: { type: String, required: true },
+  title: { type: questionnaireOrderTitleSchema, required: true },
   showFrom: { type: Date, required: true },
   showUntil: {
     type: Date,

packages/app/src/server/models/questionnaire/schema/question.ts

@@ -2,9 +2,14 @@ import { Schema } from 'mongoose';
 
 import { IQuestion, QuestionType } from '~/interfaces/questionnaire/question';
 
+const questionTextSchema = new Schema<IQuestion['text']>({
+  ja_JP: { type: String, required: true },
+  en_US: { type: String, required: true },
+});
+
 const questionSchema = new Schema<IQuestion>({
   type: { type: String, required: true, enum: Object.values(QuestionType) },
-  text: { type: String, required: true },
+  text: { type: questionTextSchema, required: true },
 }, { timestamps: true });
 
 export default questionSchema;