Use mobile preview on information pages

- Refactor
- Fix issue with zoom on url change
- Remove SINERGISE key from environment

Author: tnagorra

manager-dashboard/.env.example

@@ -14,6 +14,5 @@ REACT_APP_COMMUNITY_DASHBOARD_URL=
 REACT_APP_IMAGE_BING_API_KEY=
 REACT_APP_IMAGE_MAPBOX_API_KEY=
 REACT_APP_IMAGE_MAXAR_PREMIUM_API_KEY=
-REACT_APP_IMAGE_SINERGISE_API_KEY=
 # -- NOTE: not used and seems to be discontinued
 REACT_APP_IMAGE_MAXAR_STANDARD_API_KEY=

manager-dashboard/app/components/ExpandableContainer/index.tsx

@@ -48,11 +48,12 @@ function ExpandableContainer(props: Props) {
                         name={!isExpanded}
                         onClick={setIsExpanded}
                         variant="action"
+                        title={isExpanded ? 'Collapse' : 'Expand'}
                     >
                         {isExpanded ? (
-                            <IoIosArrowUp className={styles.icon} />
+                            <IoIosArrowUp />
                         ) : (
-                            <IoIosArrowDown className={styles.icon} />
+                            <IoIosArrowDown />
                         )}
                     </Button>
                 </div>

manager-dashboard/app/components/ExpandableContainer/styles.css

@@ -13,10 +13,22 @@
             flex-grow: 1;
         }
 
+        .icons {
+            display: flex;
+            gap: var(--spacing-medium);
+            flex-shrink: 0;
+
+            >* {
+                font-size: 1.2rem;
+            }
+        }
+
         .actions {
+            display: flex;
+            gap: var(--spacing-medium);
             flex-shrink: 0;
 
-            .icon {
+            >* {
                 font-size: 1.2rem;
             }
         }

manager-dashboard/app/components/GeoJsonPreview/index.tsx

@@ -84,7 +84,7 @@ function GeoJsonPreview(props: Props) {
                 const layer = new Layer(
                     finalUrl,
                     {
-                        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+                        // attribution: '',
                         // subdomains: ['a', 'b', 'c'],
                     },
                 );
@@ -131,7 +131,8 @@ function GeoJsonPreview(props: Props) {
                 newGeoJson.remove();
             };
         },
-        [geoJson],
+        // NOTE: adding url as dependency as url will re-create the map
+        [geoJson, url],
     );
 
     return (

manager-dashboard/app/components/MarkdownEditor/styles.css

@@ -4,9 +4,9 @@
 }
 
 .text-area {
-    height: 70px !important;
+    background-color: transparent;
 }
 
 .toolbar {
-    border-bottom: 0;
-}
+    background-color: transparent;
+}

manager-dashboard/app/components/MobilePreview/index.tsx

@@ -48,19 +48,21 @@ function MobilePreview(props: Props) {
                 )}
             </div>
             <div className={_cs(styles.content, contentClassName)}>
-                <div className={styles.popup}>
-                    <div className={styles.details}>
-                        <div className={styles.title}>
-                            {popupTitle}
+                {(popupTitle || popupDescription || popupIcons) && (
+                    <div className={styles.popup}>
+                        <div className={styles.details}>
+                            <div>
+                                {popupTitle}
+                            </div>
+                            <div>
+                                {popupDescription}
+                            </div>
                         </div>
-                        <div className={styles.description}>
-                            {popupDescription}
+                        <div className={styles.icons}>
+                            {popupIcons}
                         </div>
                     </div>
-                    <div className={styles.icons}>
-                        {popupIcons}
-                    </div>
-                </div>
+                )}
                 {children}
             </div>
         </div>

manager-dashboard/app/components/MobilePreview/styles.css

@@ -31,6 +31,7 @@
 
     .content {
         position: relative;
+        flex-grow: 1;
         z-index: 0;
         background-color: var(--color-primary);
 

manager-dashboard/app/views/NewTutorial/InformationPageInput/Block/index.tsx

@@ -18,6 +18,7 @@ interface Props {
     onChange: (value: SetValueArg<PartialBlockType>, index: number) => void;
     index: number;
     error: Error<PartialBlockType> | undefined;
+    disabled: boolean;
 }
 
 export default function Block(props: Props) {
@@ -26,6 +27,7 @@ export default function Block(props: Props) {
         onChange,
         index,
         error: riskyError,
+        disabled,
     } = props;
 
     const onBlockChange = useFormObject(index, onChange, { blockNumber: 1, blockType: 'text' });
@@ -37,21 +39,23 @@ export default function Block(props: Props) {
                 <MarkdownEditor
                     name={'textDescription' as const}
                     value={value?.textDescription}
-                    label="Description"
+                    label={`Block ${index + 1}`}
                     onChange={onBlockChange}
                     error={error?.textDescription}
+                    disabled={disabled}
                 />
             )}
             {value.blockType === 'image' && (
                 <FileInput
                     name={'imageFile' as const}
                     value={value?.imageFile}
                     onChange={onBlockChange}
-                    label="Upload Image"
+                    label={`Block ${index + 1}`}
                     hint="Make sure you have the rights to
                     use this image. It should end with  .jpg or .png."
                     accept="image/png, image/jpeg"
                     error={error?.imageFile}
+                    disabled={disabled}
                 />
             )}
         </div>

manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/index.tsx

@@ -1,48 +1,51 @@
 import React from 'react';
 
 import { PartialTutorialFormType } from '#views/NewTutorial/utils';
+import MobilePreview from '#components/MobilePreview';
 import Preview from '#components/Preview';
 
 import styles from './styles.css';
 import MarkdownPreview from '#components/MarkdownPreview';
 
 interface Props {
-    value: NonNullable<PartialTutorialFormType['informationPages']>[number]
+    value: NonNullable<PartialTutorialFormType['informationPages']>[number];
+    index: number;
 }
 
 export default function InformationPagePreview(props: Props) {
     const {
         value,
+        index,
     } = props;
 
     return (
-        <div className={styles.informationPreview}>
-            {value?.title && (
-                <MarkdownPreview
-                    markdown={value.title}
-                />
-            )}
+        <MobilePreview
+            className={styles.informationPreview}
+            // FIXME: get this from 'look for'
+            heading="You are looking for: mobile homes"
+            contentClassName={styles.content}
+        >
+            {value?.title || `Intro ${index + 1}`}
             {value?.blocks?.map((preview) => {
-                if (preview.blockType === 'text' && preview.textDescription) {
+                if (preview.blockType === 'text' && !!preview.textDescription) {
                     return (
-                        <div key={preview.blockNumber}>
-                            {preview.textDescription}
-                        </div>
+                        <MarkdownPreview
+                            key={preview.blockNumber}
+                            markdown={preview.textDescription}
+                        />
                     );
                 }
-
                 if (preview.blockType === 'image') {
                     return (
                         <Preview
-                            className={styles.imagePreview}
                             key={preview.blockNumber}
+                            className={styles.imagePreview}
                             file={preview.imageFile}
                         />
                     );
                 }
-
                 return null;
             })}
-        </div>
+        </MobilePreview>
     );
 }

manager-dashboard/app/views/NewTutorial/InformationPageInput/InformationPagePreview/styles.css

@@ -1,9 +1,11 @@
 .information-preview {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-large);
+    .content {
+        display: flex;
+        gap: var(--spacing-large);
+        flex-direction: column;
+        padding: var(--spacing-large);
+    }
     background-color: var(--color-primary);
-    padding: var(--spacing-large);
     width: var(--width-mobile-preview);
     height: var(--height-mobile-preview);
     overflow: auto;