added hidden field

assets/icons/travels-screens/check.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.07 2.87008C10.2522 3.05233 10.2522 3.3478 10.07 3.53005L4.93662 8.66338C4.75438 8.84563 4.4589 8.84563 4.27666 8.66338L1.94332 6.33005C1.76108 6.1478 1.76108 5.85233 1.94332 5.67008C2.12557 5.48784 2.42105 5.48784 2.60329 5.67008L4.60664 7.67343L9.40999 2.87008C9.59224 2.68784 9.88771 2.68784 10.07 2.87008Z" fill="white"/>
+</svg>

assets/icons/travels-screens/square.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.25" y="0.5" width="15" height="15" rx="3.5" stroke="white"/>
+</svg>

src/modules/api/trips/trips-api.tsx

@@ -64,6 +64,7 @@ export interface PostGetTripReturn extends ResponseType {
       quality: number;
       status: 0 | 1;
       hidden: boolean;
+      can_be_hidden: boolean;
     }[];
   };
 }

src/screens/InAppScreens/TravelsScreen/AddNewTripScreen/index.tsx

@@ -54,7 +54,9 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
           return {
             ...newRegion,
             quality: existingRegion ? existingRegion.quality : 3,
-            status: existingRegion ? existingRegion.status : 0
+            status: existingRegion ? existingRegion.status : 0,
+            can_be_hidden: existingRegion ? existingRegion.can_be_hidden : newRegion.hidden,
+            hidden: existingRegion ? existingRegion.hidden : false
           };
         });
 
@@ -117,6 +119,18 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
       );
   };
 
+  const changeHiddenForRegion = (regionId: number | null) => {
+    regions &&
+      setRegions(
+        regions.map((region) => {
+          if (region.id === regionId) {
+            return { ...region, hidden: !region.hidden };
+          }
+          return region;
+        })
+      );
+  };
+
   const handleDeleteRegion = (regionId: number) => {
     regions && setRegions(regions.filter((region) => region.id !== regionId));
   };
@@ -247,6 +261,7 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
                       setSelectedRegionId(region.id);
                       setQualitySelectorVisible(true);
                     }}
+                    onHiddenChange={() => changeHiddenForRegion(region.id)}
                     startDate={selectedDates ? selectedDates.split(' - ')[0] : null}
                   />
                 );

src/screens/InAppScreens/TravelsScreen/Components/RegionItem/index.tsx

@@ -7,21 +7,24 @@ import { Colors } from 'src/theme';
 import { API_HOST } from 'src/constants';
 import { styles } from './styles';
 
-import MarkIcon from 'assets/icons/mark.svg';
 import TrashSvg from 'assets/icons/travels-screens/trash-solid.svg';
 import ChevronIcon from 'assets/icons/travels-screens/down-arrow.svg';
+import CheckSvg from 'assets/icons/travels-screens/check.svg';
+import SquareSvg from 'assets/icons/travels-screens/square.svg';
 
 const RegionItem = ({
   region,
   onDelete,
   onToggleStatus,
   onQualityChange,
+  onHiddenChange,
   startDate
 }: {
   region: RegionAddData;
   onDelete: () => void;
   onToggleStatus: () => void;
   onQualityChange: () => void;
+  onHiddenChange: () => void;
   startDate: string | null;
 }) => {
   const name = region.region_name.split(/ – | - /);
@@ -64,30 +67,57 @@ const RegionItem = ({
         </TouchableOpacity>
 
         <TouchableOpacity
-          style={
-            region.status === 1 && !disabled
-              ? styles.markNotCompletedButton
-              : [
-                  styles.markCompletedButton,
-                  disabled && {
-                    backgroundColor: Colors.LIGHT_GRAY,
-                    borderColor: Colors.LIGHT_GRAY
-                  }
-                ]
-          }
+          style={[
+            styles.markCompletedButton,
+            disabled && {
+              backgroundColor: Colors.LIGHT_GRAY,
+              borderColor: Colors.LIGHT_GRAY
+            }
+          ]}
           onPress={onToggleStatus}
           disabled={disabled}
         >
-          {region.status === 1 && !disabled ? (
-            <View style={styles.completedContainer}>
-              <MarkIcon width={16} height={16} />
-              <Text style={styles.markNotCompletedButtonText}>Completed</Text>
+          <View style={styles.completedContainer}>
+            <View style={{ position: 'relative' }}>
+              <SquareSvg />
             </View>
-          ) : (
-            <Text style={[styles.markCompletedButtonText]}>Mark Completed</Text>
-          )}
+            {region.status === 1 && !disabled && (
+              <View style={{ position: 'absolute', left: 2, top: 1 }}>
+                <CheckSvg width={14} height={14} />
+              </View>
+            )}
+            <Text style={styles.markCompletedButtonText}>Completed</Text>
+          </View>
         </TouchableOpacity>
       </View>
+      {region.can_be_hidden && (
+        <View style={{ marginTop: 12, marginHorizontal: '25%' }}>
+          <TouchableOpacity
+            style={[
+              styles.markCompletedButton,
+              disabled && {
+                backgroundColor: Colors.LIGHT_GRAY,
+                borderColor: Colors.LIGHT_GRAY
+              }
+            ]}
+            onPress={onHiddenChange}
+            disabled={disabled}
+          >
+            <View style={styles.completedContainer}>
+              <View style={{ position: 'relative' }}>
+                <SquareSvg />
+              </View>
+              {region.hidden && (
+                <View style={{ position: 'absolute', left: 2, top: 1 }}>
+                  <CheckSvg width={14} height={14} />
+                </View>
+              )}
+
+              <Text style={styles.markCompletedButtonText}>Hidden</Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+      )}
     </View>
   );
 };

src/screens/InAppScreens/TravelsScreen/utils/types.ts

@@ -75,4 +75,5 @@ export interface RegionAddData {
   status?: 0 | 1;
   hidden: boolean;
   name?: string;
+  can_be_hidden?: boolean;
 }