fix(views): display week type in midweek meeting template

sws2apps · Feb 26, 2025 · 91d835c · 91d835c
1 parent d98a3bc
commit 91d835c
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 5 deletions.
diff --git a/src/views/components/icons/IconWavingHand.tsx b/src/views/components/icons/IconWavingHand.tsx
@@ -0,0 +1,13 @@
+import { Svg, Path } from '@react-pdf/renderer';
+
+export default function IconWavingHand() {
+  return (
+    <Svg viewBox="0 0 16 17" style={{ width: 10, height: 10 }}>
+      <Path
+        fillRule="evenodd"
+        d="M7.31407 8.43081L11.7871 3.95134C11.8905 3.84792 12.0076 3.79621 12.1384 3.79621C12.2692 3.79621 12.3863 3.84792 12.4897 3.95134C12.5931 4.05475 12.6448 4.17184 12.6448 4.30261C12.6448 4.43337 12.5931 4.55046 12.4897 4.65387L8.02687 9.12694L7.31407 8.43081ZM8.91278 10.0231L12.9089 6.01671C13.0123 5.9133 13.1311 5.86159 13.2653 5.86159C13.3995 5.86159 13.5183 5.9133 13.6217 6.01671C13.7251 6.12013 13.7769 6.23893 13.7769 6.37311C13.7769 6.5073 13.7251 6.6261 13.6217 6.72952L9.61917 10.7257L8.91278 10.0231ZM3.65765 13.0167C2.70637 12.0654 2.2318 10.9235 2.23393 9.59106C2.23608 8.25859 2.71492 7.11458 3.67047 6.15902L5.6256 4.20389L6.44867 5.03337C6.54781 5.13252 6.6273 5.23872 6.68713 5.35197C6.74696 5.46522 6.7961 5.58552 6.83457 5.71287L9.27558 3.26159C9.37901 3.15818 9.49781 3.10647 9.63198 3.10647C9.76617 3.10647 9.88497 3.15818 9.98838 3.26159C10.0918 3.36501 10.1435 3.48381 10.1435 3.61799C10.1435 3.75218 10.0918 3.87098 9.98838 3.97439L7.09865 6.86414L5.86788 8.09106L6.19097 8.41412C6.65934 8.8825 6.8867 9.44447 6.87302 10.1C6.85934 10.7556 6.6149 11.3209 6.13968 11.7962L6.07558 11.8603L5.36918 11.1577L5.42688 11.0936C5.70381 10.8167 5.85082 10.4872 5.86792 10.1051C5.88501 9.72308 5.75509 9.3936 5.47817 9.11667L4.87433 8.52311C4.75382 8.40258 4.69357 8.25921 4.69357 8.09297C4.69357 7.92674 4.75382 7.78337 4.87433 7.66286L5.72177 6.83209C5.87647 6.67739 5.95382 6.49128 5.95382 6.27376C5.95382 6.05622 5.87647 5.87011 5.72177 5.71541L5.6256 5.61924L4.37302 6.86542C3.6132 7.62524 3.23008 8.53336 3.22367 9.58977C3.21726 10.6462 3.59396 11.5543 4.35378 12.3141C5.11362 13.074 6.02666 13.4539 7.0929 13.4539C8.15913 13.4539 9.07217 13.074 9.832 12.3141L13.5974 8.53851C13.7008 8.4351 13.8196 8.38339 13.9538 8.38339C14.088 8.38339 14.2068 8.4351 14.3102 8.53851C14.4136 8.64193 14.4653 8.76073 14.4653 8.89491C14.4653 9.0291 14.4136 9.1479 14.3102 9.25131L10.5281 13.0167C9.57258 13.9722 8.4275 14.45 7.0929 14.45C5.75829 14.45 4.61321 13.9722 3.65765 13.0167ZM11.0897 15.6205L11.0833 14.6103C11.8679 14.6103 12.5373 14.3331 13.0916 13.7789C13.6459 13.2246 13.923 12.5551 13.923 11.7705L14.9333 11.7769C14.9333 12.841 14.5587 13.7476 13.8095 14.4968C13.0604 15.2459 12.1538 15.6205 11.0897 15.6205ZM1.06665 5.59747C1.06665 4.53338 1.44122 3.62677 2.19037 2.87762C2.93951 2.12848 3.84613 1.75391 4.91022 1.75391L4.91663 2.76414C4.13201 2.76414 3.46257 3.04128 2.9083 3.59556C2.35402 4.14982 2.07688 4.81927 2.07688 5.60389L1.06665 5.59747Z"
+        fill="#6876BE"
+      />
+    </Svg>
+  );
+}
diff --git a/src/views/meetings/midweek/S140/app_normal/S140WeekHeader.tsx b/src/views/meetings/midweek/S140/app_normal/S140WeekHeader.tsx
@@ -1,7 +1,8 @@
 import { Text, View } from '@react-pdf/renderer';
 import { S140WeekHeaderType } from './index.types';
-import IconPart from '@views/components/icons/IconPart';
 import styles from './index.styles';
+import IconPart from '@views/components/icons/IconPart';
+import IconWavingHand from '@views/components/icons/IconWavingHand';
 
 const S140WeekHeader = ({ title, secondary }: S140WeekHeaderType) => {
   return (
@@ -11,7 +12,12 @@ const S140WeekHeader = ({ title, secondary }: S140WeekHeaderType) => {
         <Text style={styles.weekDate}>{title}</Text>
       </View>
 
-      {secondary}
+      {secondary && (
+        <View style={styles.coWeekTypeContainer}>
+          <IconWavingHand />
+          <Text style={styles.coWeekType}>{secondary}</Text>
+        </View>
+      )}
     </View>
   );
 };

diff --git a/src/views/meetings/midweek/S140/app_normal/index.styles.ts b/src/views/meetings/midweek/S140/app_normal/index.styles.ts
@@ -47,6 +47,20 @@ const styles = StyleSheet.create({
     fontSize: '10px',
     marginLeft: '5px',
   },
+  coWeekTypeContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'white',
+    borderRadius: '2px',
+    gap: '4px',
+    padding: '1px 5px',
+  },
+  coWeekType: {
+    color: '#6876BE',
+    fontSize: '8px',
+    fontWeight: 'bold',
+  },
   rowContainer: {
     display: 'flex',
     alignItems: 'center',
@@ -167,6 +181,14 @@ const styles = StyleSheet.create({
     letterSpacing: '-0.07px',
     color: '#FEFEFE',
   },
+  weekInfoLabel: {
+    fontWeight: 'bold',
+    color: 'darkblue',
+    fontSize: '11px',
+    marginTop: '3px',
+    width: '100%',
+    marginLeft: '33px',
+  },
 });
 
 export default styles;
diff --git a/src/views/meetings/midweek/S140/app_normal/index.tsx b/src/views/meetings/midweek/S140/app_normal/index.tsx
@@ -1,4 +1,4 @@
-import { Document, Page, View } from '@react-pdf/renderer';
+import { Document, Page, Text, View } from '@react-pdf/renderer';
 import { Week } from '@definition/week_type';
 import { LANGUAGE_LIST } from '@constants/index';
 import { S140Type } from '../shared/index.types';
@@ -52,7 +52,21 @@ const TemplateS140AppNormal = ({
             style={styles.weekContainer}
             break={index > 0 && index % 2 === 0}
           >
-            <S140WeekHeader title={meetingData.schedule_title} />
+            <S140WeekHeader
+              title={meetingData.schedule_title}
+              secondary={
+                meetingData.week_type === Week.CO_VISIT &&
+                meetingData.week_type_name
+              }
+            />
+
+            {meetingData.no_meeting && (
+              <View style={styles.rowContainer}>
+                <Text style={styles.weekInfoLabel}>
+                  {meetingData.week_type_name}
+                </Text>
+              </View>
+            )}
 
             {!meetingData.no_meeting && (
               <>

diff --git a/src/views/meetings/midweek/S140/app_normal/index.types.ts b/src/views/meetings/midweek/S140/app_normal/index.types.ts
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 export type S140WeekHeaderType = {
   title: string;
-  secondary?: ReactNode;
+  secondary?: string;
 };
 
 export type S140PartTimeType = {