From b4d6944076f1df6eedaae35c4c2a7072fe988e8a Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期二, 30 四月 2024 15:34:02 +0800
Subject: [PATCH] update: package-lock.json

---
 PAMapp/pages/questionnaire/_agentNo.vue |  555 ++++++++++++++++++++++++++++++++++++++----------------
 1 files changed, 387 insertions(+), 168 deletions(-)

diff --git a/PAMapp/pages/questionnaire/_agentNo.vue b/PAMapp/pages/questionnaire/_agentNo.vue
index 547af0a..a2552b9 100644
--- a/PAMapp/pages/questionnaire/_agentNo.vue
+++ b/PAMapp/pages/questionnaire/_agentNo.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="ques-page--reset" v-if="isLogin">
+  <div class="ques-page--reset" v-if="isUserLogin">
     <div class="ques-header">
         <div class="ques-header__mob-banner"></div>
         <div
           class="ques-header__info"
           v-if="myRequest.contactType==='phone'">
           <div class="text--middle">
-              <div class="mdTxt">雿���蝜急撘�</div>
+              <div class="mdTxt">�����蝜急撘�</div>
               <div class="mt-10">
                   <span>�����</span>
                   <span>{{myRequest.phone}}</span>
@@ -16,32 +16,36 @@
               <div class="datepicker required">
                   <span class="mdTxt">�����蝯∠�靘踵���</span>
                   <PhoneContactTimePicker
-                  :scheduleList.sync="myRequest.hopeContactTime"/>
+                  :scheduleList="myRequest.hopeContactTime"/>
               </div>
           </div>
           <div class="mt-30">
               <div class="mdTxt">�隞��蝜急撘�</div>
               <div class="ques-header__input-block">
                   <span>Email嚗�</span>
-                  <input class="ques-header__input"
+                  <input class="ques-header__input  break"
+                    :class="{ 'is-invalid': !emailValid}"
                     placeholder="隢撓�"
                     v-model="myRequest.email">
+              </div>
+              <div class="error mt-5 mb-5" style="margin-left:65px">
+                  <span v-show="!emailValid">Email�撘�炊</span>
               </div>
           </div>
         </div>
         <div class="ques-header__info" v-else>
           <div class="text--middle">
-              <div class="mdTxt">雿���蝜急撘�</div>
+              <div class="mdTxt">�����蝜急撘�</div>
               <div class="mt-10 ques-header__input-block">
                   <span>Email嚗�</span>
-                  <span>{{myRequest.email}}</span>
+                  <span class=" break">{{myRequest.email}}</span>
               </div>
           </div>
           <div class="mt-30">
               <div class="mdTxt">�隞��蝜急撘�</div>
               <div class="ques-header__input-block">
-                  <span>�����</span>
-                  <input class="ques-header__input"
+                  <span>���� : </span>
+                  <input class="ques-header__input ml-4"
                     :class="{'is-invalid': !phoneValid}"
                     placeholder="隢撓�"
                     maxlength="10"
@@ -55,7 +59,7 @@
               <div class="datepicker">
                   <span class="mdTxt">�����蝯∠�靘踵���</span>
                   <PhoneContactTimePicker
-                  :scheduleList.sync="myRequest.hopeContactTime"/>
+                  :scheduleList="myRequest.hopeContactTime"/>
               </div>
           </div>
         </div>
@@ -63,7 +67,7 @@
     <div class="ques-container">
       <div class="pam-paragraph">
         <div class="mdTxt">
-            �閬岷������
+            �鈭圾�����
             <span class="hint text--bold">
                 (�銴)
             </span>
@@ -74,13 +78,19 @@
           :options="requirementOptions" />
       </div>
       <div class="pam-paragraph">
+        <div class="mdTxt">隢株岷�撘�</div>
+        <SingleSelectBtn class="mt-10"
+           :singleSelected.sync="myRequest.consultationMethod"
+           :options="consultationMethodOptions" />
+      </div>
+      <div class="pam-paragraph">
         <div class="mdTxt">����批</div>
         <SingleSelectBtn class="mt-10"
           :singleSelected.sync="myRequest.gender"
           :options="genderOptions" />
       </div>
       <div class="pam-paragraph">
-        <div class="mdTxt">撟湧翩</div>
+        <div class="mdTxt">���僑朣�</div>
         <SingleSelectBtn class="mt-10"
           :singleSelected.sync="myRequest.age"
           :options="ageRangeOptions" />
@@ -92,14 +102,14 @@
         <el-button type="primary"
           :disabled="isDisabledSubmitBtn"
           @click.native="sentDemand">
-          �
+          {{isEditBtn ? '��' : '�'}}
         </el-button>
       </div>
     </div>
 
-    <PopUpFrame :isOpen.sync="showDrawer" :drawerSize=" '95%' ">
+    <PopUpFrame :isOpen.sync="showDrawer">
       <div class="qaTextTitle mdTxt">
-        <strong>�閬岷������</strong>
+        <strong>�鈭圾�����</strong>
       </div>
       <div class="qa-dialog">
           <div v-for="(qaText,index) in quesAboutList" :key="index" >
@@ -115,29 +125,76 @@
     </PopUpFrame>
 
     <PopUpFrame :isOpen.sync="sendReserve" @update:isOpen="closeReservePopUp">
-        <div class="text--middle  mt-30 sendReserve-txt">�����������憿批���</div>
-        <div class="text--middle  sendReserve-txt">�����蝯∴��</div>
+        <div class="mdTxt mt-30 sendReserve-txt">�������</div>
+        <div class="mdTxt sendReserve-txt mb-30">�����“�������蝯∴��</div>
+        <div class="pam-app-review mb-10">
+          <div class="mdTxt mb-10">撠
+                <span class="mdTxt text--primary text--bold ">������</span>
+                撟喳��擃����
+            </div>
+          <div class="mdTxt">�蝯虫�嗾憿��嚗�</div>
+        </div>
+        <el-rate v-model="score" class="pam-satisfaction-rate fix-chrome-click--issue"></el-rate>
         <div class="text--center mdTxt">
+          <el-button @click="closeReservePopUp">����</el-button>
           <el-button type="primary"
-            @click="closeReservePopUp">
-            ������
+            @click="reviewPlatform">
+            �
           </el-button>
         </div>
+    </PopUpFrame>
+
+    <PopUpFrame :isOpen.sync="isEditPopup">
+      <div class="text--middle text--center mb-10">撌脫
+        <span class="bold">{{appointmentTime | formatDate}}</span>
+      �脰�����</div>
+      <div class="text--middle text--center mb-30">��蝜潛�楊頛荔��</div>
+      <div class="text--center mdTxt">
+        <el-button @click="$router.go(-1)">餈��</el-button>
+        <el-button @click="isEditPopup = false" type="primary">蝺刻摩</el-button>
+      </div>
     </PopUpFrame>
   </div>
 </template>
 
 <script lang="ts">
-  import { Vue, Component } from 'nuxt-property-decorator';
-  import { addFavoriteConsultant, appointmentDemand, AppointmentParams, AppointmentRequests ,RegisterInfo } from '~/assets/ts/api/consultant';
-  import { getRequestsFromStorage, setRequestsToStorage, getRequestQuestionFromStorage, removeRequestQuestionFromStorage  } from '~/assets/ts/storageRequests';
-  import { Gender } from '~/assets/ts/models/enum/Gender';
-  import { ContactType } from '~/assets/ts/models/enum/ContactType';
-  import _ from 'lodash';
-  import { isLogin } from '~/assets/ts/auth';
+import { Vue, Component, State, Action, Watch, namespace } from 'nuxt-property-decorator';
+import { getRequestsFromStorage, removeRequestQuestionFromStorage, setRequestsToStorage } from '~/shared/storageRequests';
 
+import accountSettingService from '~/shared/services/account-setting.service';
+import appointmentService from '~/shared/services/appointment.service';
+import authService from '~/shared/services/auth.service';
+import queryConsultantService from '~/shared/services/query-consultant.service';
+import reviewsService from '~/shared/services/reviews.service';
+import { Consultant } from '~/shared/models/consultant.model';
+import { ContactType } from '~/shared/models/enum/ContactType';
+import { Gender } from '~/shared/models/enum/Gender';
+import { RegisterInfo } from '~/shared/models/registerInfo';
+import { AppointmentParams, AppointmentRequests } from '~/shared/models/appointment.model';
+import { UserSetting } from '~/shared/models/account.model';
+import { SatisfactionType } from '~/shared/models/enum/satisfaction-type';
+import { UserReviewParams } from '~/shared/models/reviews.model';
+
+  const roleStorage = namespace('localStorage');
   @Component
   export default class Questionnaire extends Vue {
+    @State('myConsultantList')
+    myConsultantList!: Consultant[];
+
+    @Action
+    storeConsultantList!: () => Promise<number>;
+
+    @roleStorage.Getter
+    isUserLogin!:boolean;
+
+    @roleStorage.State
+    recommendConsultantItem!:string;
+
+    @roleStorage.Mutation
+    storageUserInfo!: (params: RegisterInfo) => void;
+
+    score = 0;
+
     genderOptions=[
       {
         title:'���',
@@ -146,6 +203,17 @@
       {
         title:'憟單��',
         label:Gender.FEMALE,
+      }
+    ];
+
+    consultationMethodOptions = [
+      {
+        title: '蝺��',
+        label: 'online'
+      },
+      {
+        title: '蝺��',
+        label: 'offline'
       }
     ];
 
@@ -194,10 +262,6 @@
         label:'41-50'
       },
       {
-        title:'46-55 甇�',
-        label:'46-55',
-      },
-      {
         title:'51-60 甇�',
         label:'51-60',
       },
@@ -212,36 +276,37 @@
     ];
 
     quesAboutList = [
-                  {
-                      title:'�摨瑁����',
-                      content:'����澈擃憿批末嚗�靽�兢蝳�嚗��������嚗��飩������摮拙��粥銝��頝荔�犖����迤閬����'
-                  },
-                  {
-                      title:'摮戊��',
-                      content:'摮拙���������葦銋摮貊��撠靘�蒂�雿嚗飛���������������瓷嚗��楝銝���韏瑕飛��'
-                  },
-                  {
-                      title:'鞈閬��',
-                      content:'��迤��瓷撖��雓寡�����嚗鈭箇�����蝳西瓷��◢�����Ⅱ靽�蝛拙��嚗�摰嗆��靘�末��皞���'
-                  },
-                  {
-                      title:'璅暑��隡�',
-                      content:'�銝�頛拙����隡��摮���翰瘣鳴�停敺�����������隡瓷����撌勗�帘摰�嚗蝎曉蔗���僑鈭箇�������'
-                  },
-                  {
-                      title:'靽�瑼�/閬��',
-                      content:'��瑼Z�撌梁������蝚血����靘�◢�蝘餉��瘙��'
-                  },
-                  {
-                      title:'����',
-                      content:'���� ���������憸券�����鈭怒�����嚗���摰帘摰漲嚗��隞亙��澈��ˊ�靽���嚗�'
-                  }
+      {
+          title:'�摨瑁����',
+          content:'����澈擃憿批末嚗�靽�兢蝳�嚗��������嚗��飩������摮拙��粥銝��頝荔�犖����迤閬����'
+      },
+      {
+          title:'摮戊��',
+          content:'摮拙���������葦銋摮貊��撠靘�蒂�雿嚗飛���������������瓷嚗��楝銝���韏瑕飛��'
+      },
+      {
+          title:'鞈閬��',
+          content:'��迤��瓷撖��雓寡�����嚗鈭箇�����蝳西瓷��◢�����Ⅱ靽�蝛拙��嚗�摰嗆��靘�末��皞���'
+      },
+      {
+          title:'璅暑��隡�',
+          content:'�銝�頛拙����隡��摮���翰瘣鳴�停敺�����������隡瓷����撌勗�帘摰�嚗蝎曉蔗���僑鈭箇�������'
+      },
+      {
+          title:'靽�瑼�/閬��',
+          content:'��瑼Z�撌梁������蝚血����靘�◢�蝘餉��瘙��'
+      },
+      {
+          title:'����',
+          content:'���������憸券�����鈭怒�����嚗���摰帘摰漲嚗��隞亙��澈��ˊ�靽���嚗�'
+      }
     ];
 
     myRequest: AppointmentRequests = {
-      phone          : this.userInfo?.phone ? this.userInfo.phone                               : '',
-      email          : this.userInfo?.email ? this.userInfo.email                               : '',
-      contactType    : _.isEqual(this.userInfo?.contactType,ContactType.SMS) ? ContactType.PHONE: ContactType.EMAIL,
+      name           : '',
+      phone          : '',
+      email          : '',
+      contactType    : this.userInfo?.contactType === ContactType.SMS ? ContactType.PHONE: ContactType.EMAIL,
       gender         : '',
       age            : '',
       job            : '',
@@ -251,31 +316,43 @@
         selectTimesOptions: [],
       }],
       agentNo: '',
+      consultationMethod: '',
     };
 
     showDrawer= false;
     sendReserve = false;
+    isEditPopup = false;
+    isEditBtn = false;
+
+    appointmentId = 0;
+    appointmentTime = '';
+
+    ////////////////////////////////////////////////////////////////////////////
 
     beforeRouteEnter(to: any, from: any, next: any) {
       next(vm => {
-        if (from.name === 'login' && !isLogin()) {
+        const isUserLogin = authService.isUserLogin();
+        if (from.name === 'login' && !isUserLogin) {
           vm.$router.go(-1);
           return;
         }
 
-        if (!isLogin()) {
+        if (!isUserLogin) {
           vm.$router.push('/login');
         }
       })
     }
 
     mounted(): void {
+      if (authService.isUserLogin()) {
+        this.storeConsultantList();
+      };
       this.setMyRequest();
     }
 
     private setMyRequest(): void {
       const storageMyRequest = getRequestsFromStorage();
-      const storageMyQuestion = getRequestQuestionFromStorage();
+      const storageMyRequirement = this.recommendConsultantItem ? JSON.parse(this.recommendConsultantItem).requirements:[];
 
       if (storageMyRequest) {
         this.myRequest = {
@@ -289,20 +366,185 @@
         };
       }
 
-      if (storageMyQuestion) {
+      if (storageMyRequirement) {
         this.myRequest = {
           ...this.myRequest,
-          requirement: storageMyQuestion
+          requirement: storageMyRequirement
         }
         removeRequestQuestionFromStorage();
       }
+
+      if (authService.isUserLogin()) {
+        accountSettingService.getUserAccountSetting().then((contactTypeDetail) => {
+              this.myRequest = {
+                ...this.myRequest,
+                ...contactTypeDetail
+              }
+        })
+      }
+
+
     }
+
+    ////////////////////////////////////////////////////////////////////////////
+
+    @Watch('myConsultantList')
+    onMyConsultantListChange() {
+      if (authService.isUserLogin() && this.myConsultantList.length > 0) {
+          const editAppointment = this.getLatestReserved(this.$route.params.agentNo);
+
+          if (editAppointment && editAppointment.agentNo) {
+            this.myRequest = JSON.parse(JSON.stringify(editAppointment));
+            if (!this.$route.query || this.$route.query.edit !== 'true') {
+              this.isEditPopup = true;
+            }
+            this.isEditBtn = true;
+          }
+      }
+    }
+
+    private getLatestReserved(agentNo) {
+      const agentInfo = this.myConsultantList.filter(item => item.agentNo === agentNo);
+      const appointmentInfo = agentInfo.length > 0 && agentInfo[0].appointments
+        ? agentInfo[0].appointments!
+              .filter((appointment) => appointment.communicateStatus === 'reserved')
+              .map((reversedAppointment) => (
+                { ...reversedAppointment,
+                  sortDate: new Date(reversedAppointment.appointmentDate)
+                }))
+              .sort((preAppointment, nextAppointment) => +nextAppointment.sortDate - +preAppointment.sortDate)[0]
+        : null;
+      return this.getReservedData(appointmentInfo);
+    }
+
+    private getReservedData(appointmentInfo) {
+      if (appointmentInfo) {
+        const hopeContactTime = appointmentInfo!.hopeContactTime
+          ?  appointmentInfo!.hopeContactTime.split("'").filter(item => item && item !== ',').map(item => {
+                const info = item.split('��');
+                return {
+                    selectWeekOptions: info[0].split(','),
+                    selectTimesOptions: info[1].split(',')
+                }
+            })
+          :[{selectWeekOptions : [],selectTimesOptions: []}];
+        this.getAppointmentId(appointmentInfo);
+
+        return {
+            ...appointmentInfo,
+            hopeContactTime: hopeContactTime,
+            requirement: appointmentInfo.requirement
+                        ? appointmentInfo.requirement.split(',')
+                        : []
+          }
+      } else {
+        return null;
+      }
+    }
+
+    private getAppointmentId(appointmentInfo) {
+      this.appointmentId = appointmentInfo.id;
+      this.appointmentTime = appointmentInfo.lastModifiedDate
+                  ? appointmentInfo.lastModifiedDate
+                  : appointmentInfo.appointmentDate;
+    }
+
+    ////////////////////////////////////////////////////////////////////////////
+
+
+    async sentDemand() {
+      if (this.isEditBtn) {
+        await this.editAppointmentDemand();
+      } else {
+        // 雿輻 async/await 靘��甇交����蝯��
+        const addFavoriteAgentList = [{ agentNo: this.$route.params.agentNo, createdTime: new Date().toISOString() }];
+        const response = await queryConsultantService.addFavoriteConsultant(addFavoriteAgentList);
+
+        // 蝣箔�甇交����蝯�� null ��� undefined
+        if (response !== null) {
+          await this.sentAppointmentDemand();
+        } else {
+          throw new Error('queryConsultantService.addFavoriteConsultant returned null-like value.');
+        }
+      }
+
+      const editSettingInfo: UserSetting = {
+        name: this.myRequest.name,
+        phone: this.myRequest.phone,
+        email: this.myRequest.email,
+      };
+
+      await accountSettingService.updateAccountSetting(editSettingInfo);
+      this.storageUserInfo(this.userInfo);
+    }
+
+
+    private editAppointmentDemand() {
+      const info = {
+          ...this.myRequest,
+          requirement: this.myRequest.requirement.map(o => o).toString(),
+          hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
+          id: this.appointmentId,
+          otherRequirement: null
+        }
+      appointmentService.editAppointment(info).then(res => {
+        this.sendReserve = true;
+        this.myRequest.hopeContactTime = [];
+        setRequestsToStorage(this.myRequest);
+      });
+    }
+
+    private sentAppointmentDemand() {
+        const data: AppointmentParams = {
+          ...this.myRequest,
+          requirement: this.myRequest.requirement.map(o => o).toString(),
+          hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
+          agentNo: this.$route.params.agentNo
+        };
+
+        queryConsultantService.appointmentDemand(data).then(res => {
+            this.sendReserve = true;
+            this.myRequest.hopeContactTime = [];
+            this.appointmentId = res['id'];
+            setRequestsToStorage(this.myRequest);
+        });
+    }
+
+    private getHopeContactTime() {
+        const selectedHopeContactTime = this.myRequest.hopeContactTime.filter((i) => i.selectWeekOptions?.length && i.selectTimesOptions?.length);
+        return selectedHopeContactTime.map(i => {
+            return `'${i.selectWeekOptions}��${i.selectTimesOptions}'`}
+        ).toString();
+    }
+
+    reviewPlatform(): void {
+      const reviewPlatformParams: UserReviewParams = {
+        appointmentId: this.appointmentId,
+        score: this.score,
+        type: SatisfactionType.SYSTEM
+      };
+      reviewsService.reviewPlatform(reviewPlatformParams).then((_) => {
+        this.closeReservePopUp();
+      });
+    }
+
+    closeReservePopUp() {
+        this.sendReserve = false;
+        this.$router.push('/')
+    }
+
+    ////////////////////////////////////////////////////////////////////////////
 
     get phoneValid(): boolean {
       const rule = /^09[0-9]{8}$/;
       return this.myRequest.phone
-            ? rule.test(this.myRequest.phone) && _.isEqual(this.myRequest.phone.length,10)
+            ? rule.test(this.myRequest.phone) && this.myRequest.phone.length === 10
             : true;
+    }
+
+    get emailValid() {
+      const rule = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+      return this.myRequest.email ? rule.test(this.myRequest.email) : true;
     }
 
     get userInfo(): RegisterInfo {
@@ -311,48 +553,13 @@
     }
 
     get isDisabledSubmitBtn(): boolean {
-           return _.includes(this.myRequest.contactType,ContactType.PHONE)
-      ? !this.isHopeContactTimeDone()
-      : !this.phoneValid;
-    }
-
-    get isLogin() {
-      return isLogin();
+      return this.myRequest.contactType.includes(ContactType.PHONE)
+        ? !this.isHopeContactTimeDone() || !this.emailValid
+        : !this.phoneValid;
     }
 
     private isHopeContactTimeDone():boolean{
       return this.myRequest.hopeContactTime[0]?.selectWeekOptions.length >0 && this.myRequest.hopeContactTime[0]?.selectTimesOptions.length >0;
-    }
-
-    sentDemand() {
-      addFavoriteConsultant([this.$route.params.agentNo]).then(res => this.sentAppointmentDemand());
-    }
-
-    private sentAppointmentDemand() {
-        const data: AppointmentParams = {
-          ...this.myRequest,
-          requirement: _.map(this.myRequest.requirement,o=>o).toString(),
-          hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
-          agentNo: this.$route.params.agentNo
-        };
-
-        appointmentDemand(data).then(res => {
-            this.sendReserve = true;
-            this.myRequest.hopeContactTime = [];
-            setRequestsToStorage(this.myRequest);
-        });
-    }
-
-    getHopeContactTime() {
-        const selectedHopeContactTime = this.myRequest.hopeContactTime.filter((i) => i.selectWeekOptions?.length && i.selectTimesOptions?.length);
-        return selectedHopeContactTime.map(i => {
-            return `'${i.selectWeekOptions}��${i.selectTimesOptions}'`}
-        ).toString();
-    }
-
-    closeReservePopUp() {
-        this.sendReserve = false;
-        this.$router.push('/')
     }
 
   }
@@ -360,29 +567,30 @@
 
 <style lang="scss" scoped>
 .sendReserve-txt{
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-    margin-bottom: 26px;
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
 }
 
 //drawer��摨���見撘�
 .qa-dialog-footer{
-    display: flex;
-    justify-content: center;
-    margin-bottom: 81px;
-    color: #ED1B2E;
-    cursor: pointer;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 81px;
+  color: #ED1B2E;
+  cursor: pointer;
 }
-
+.error {
+  color:$PRIMARY_RED
+}
 //����見撘����
 .ques-footer{
-    justify-content: center;
-    margin: 30px 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .el-button {
+  justify-content: center;
+  margin: 30px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .el-button {
     width: 120px;
     height:50px;
     background-color: #ED1B2E;
@@ -410,43 +618,42 @@
 
 //閰喟敦���rawer銝剝�摰寧征��之撠身蝵�
 .qa-dialog{
-    overflow-y:auto;
-    height: 500px;
-    margin-top: 20px;
+  overflow-y:auto;
+  height: 60vh;
+  margin-top: 20px;
 }
 
 //閰喟敦���rawer銝餉����
 .qaTextTitle{
-    margin-top:30px;
-    display: flex;
-    justify-content: center;
-}
-
-.el-button+.el-button{
-    margin-left: 0;
+  margin-top:30px;
+  display: flex;
+  justify-content: center;
 }
 
 .datepicker{
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .required {
-    position: relative;
-    &::before {
-        content: '*';
-        position: absolute;
-        color: #FF0000;
-        transform: translate(-12px, 0);
-    }
+  position: relative;
+  &::before {
+      content: '*';
+      position: absolute;
+      color: #FF0000;
+      transform: translate(-12px, 0);
+  }
 }
-
+.break{
+  word-break: break-all;
+  line-height: 1.2;
+}
 .ques-page--reset.pam-page-container {
-    margin: 0px auto;
+  margin: 0px auto;
 }
 
 .ques-header {
-    position: relative;
+  position: relative;
 }
 
 .ques-header__mob-banner {
@@ -459,41 +666,53 @@
   background-position: center;
 }
 
-.ques-header__info {
-  position: relative;
-  padding:30px 20px;
-  margin: 0px 20px;
-  background-color: #B3E7E3;
-  border-radius: 10px;
-}
-
-.ques-header__input-block {
-  display: flex;
-  align-items: center;
-  @extend .text--middle,.mt-10 ;
-  .ques-header__input{
-    &.is-invalid{
-      border: 2px solid $PRIMARY_RED !important;
-    }
-    flex: 1;
-    height: 50px;
+  .ques-header__info {
+    position: relative;
+    padding:30px 20px;
+    margin: 0px 20px;
+    background-color: #B3E7E3;
     border-radius: 10px;
-    border: 1px #CCCCCC solid;
-    background-color: $PRIMARY_WHITE;
-    padding: 15px 10px;
-    box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
   }
+
+  .ques-header__input-block {
+    display: flex;
+    align-items: center;
+    @extend .text--middle,.mt-10 ;
+    .ques-header__input{
+      &.is-invalid{
+        border: 1px solid $PRIMARY_RED !important;
+      }
+      flex: 1;
+      height: 50px;
+      border-radius: 10px;
+      border: 1px #CCCCCC solid;
+      background-color: $PRIMARY_WHITE;
+      padding: 15px 10px;
+      box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+    }
+  }
+  .ml-4{
+    margin-left: 4px;
+  }
+  .ques-container {
+    position: relative;
+    margin: 0px 20px;
+  }
+
+.pam-app-review{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
-.ques-container {
-  position: relative;
-  margin: 0px 20px;
+.pam-satisfaction-rate{
+  margin-bottom: 45px;
 }
 
-
-@include desktop{
+  @include desktop{
   .ques-header{
     display: flex;
     justify-content: flex-end;
@@ -519,5 +738,5 @@
   }
 }
 
-</style>
 
+</style>

--
Gitblit v1.8.0