Merge pull request #348 from PermanentOrg/PER-9422-mobile-banner

Per 9422 mobile banner
PermanentOrg · Feb 20, 2024 · 4a1a3fd · 4a1a3fd
2 parents b3e0fe9 + c8c7bba
commit 4a1a3fd
Show file tree

Hide file tree

Showing 17 changed files with 431 additions and 132 deletions.
diff --git a/src/app/auth/auth.module.ts b/src/app/auth/auth.module.ts
@@ -1,12 +1,9 @@
+/* @format */
 import { NgModule } from '@angular/core';
-
 import { AuthRoutingModule } from '@auth/auth.routes';
-import { AuthComponent } from './components/auth/auth.component';
 
 @NgModule({
-  imports: [
-    AuthRoutingModule
-  ],
-  declarations: []
+  imports: [AuthRoutingModule],
+  declarations: [],
 })
-export class AuthModule { }
+export class AuthModule {}
diff --git a/src/app/auth/components/auth/auth.component.html b/src/app/auth/components/auth/auth.component.html
@@ -5,6 +5,8 @@
   </a>
   </div>
 </div>
+<pr-mobile-banner></pr-mobile-banner>
 <pr-announcement></pr-announcement>
 <pr-android-app-notify></pr-android-app-notify>
+<pr-prompt></pr-prompt>
 <router-outlet></router-outlet>
diff --git a/src/app/core/components/archive-payer/archive-payer.component.ts b/src/app/core/components/archive-payer/archive-payer.component.ts
@@ -44,7 +44,7 @@ export class ArchivePayerComponent implements OnInit {
     this.hasAccess =
       accessRole === 'access.role.owner' ||
       accessRole === 'access.role.manager';
-      
+
     this.hasPayer = !!this.payer;
     if (this.hasPayer) {
       this.payerService.payerId = this.payer.accountId;

diff --git a/src/app/core/components/main/main.component.html b/src/app/core/components/main/main.component.html
@@ -6,6 +6,7 @@
     <router-outlet name="dialog"></router-outlet>
   </div>
 </div>
+<pr-mobile-banner></pr-mobile-banner>
 <pr-upload-progress></pr-upload-progress>
 <pr-dialog-root></pr-dialog-root>
 <pr-folder-picker></pr-folder-picker>

diff --git a/src/app/core/components/main/main.component.spec.ts b/src/app/core/components/main/main.component.spec.ts
@@ -1,3 +1,4 @@
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 /* @format */
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import * as Testing from '@root/test/testbedConfig';
@@ -48,6 +49,7 @@ describe('MainComponent', () => {
 
     config.imports.push(SharedModule);
     config.imports.push(DialogModule.forRoot());
+    config.imports.push(NoopAnimationsModule);
 
     config.declarations.push(MainComponent);
     config.declarations.push(NavComponent);

diff --git a/src/app/file-browser/components/sharing-dialog/sharing-dialog.component.ts b/src/app/file-browser/components/sharing-dialog/sharing-dialog.component.ts
@@ -467,4 +467,4 @@ export class SharingDialogComponent implements OnInit {
       this.updatingLink = false;
     }
   }
-}
+}
diff --git a/src/app/onboarding/components/onboarding/onboarding.component.html b/src/app/onboarding/components/onboarding/onboarding.component.html
@@ -44,4 +44,6 @@
 <ng-template #loading>
   <div class="loading">Loading...</div>
 </ng-template>
+<pr-mobile-banner></pr-mobile-banner>
+<pr-prompt></pr-prompt>
 <pr-dialog-root></pr-dialog-root>
diff --git a/src/app/shared/animations/index.ts b/src/app/shared/animations/index.ts
@@ -1,10 +1,11 @@
+/* @format */
 import {
   trigger,
   animate,
   transition,
   style,
   query,
-  state
+  state,
 } from '@angular/animations';
 
 const animationLength = 750;
@@ -15,7 +16,7 @@ const FULLSCREEN = {
   left: 0,
   right: 0,
   bottom: 0,
-  'z-index': 10
+  'z-index': 10,
 };
 
 const EASE_IN_QUART = 'cubic-bezier(0.5, 0, 0.75, 0)';
@@ -33,23 +34,25 @@ export const slideUpAnimation = trigger('slideUpAnimation', [
       ':leave',
       [
         style({ transform: 'translateY(0)' }),
-        animate(`${slideUpAnimationLength}ms ${TWEAKED}`,
+        animate(
+          `${slideUpAnimationLength}ms ${TWEAKED}`,
           style({ transform: 'translateY(100vh)' })
-        )
+        ),
       ],
       { optional: true }
     ),
     query(
       ':enter',
       [
         style({ transform: 'translateY(100vh)' }),
-        animate(`${slideUpAnimationLength}ms ${TWEAKED}`,
+        animate(
+          `${slideUpAnimationLength}ms ${TWEAKED}`,
           style({ transform: 'translateY(0)' })
-        )
+        ),
       ],
       { optional: true }
-    )
-  ])
+    ),
+  ]),
 ]);
 
 export const fadeAnimation = trigger('fadeAnimation', [
@@ -71,147 +74,121 @@ export const fadeAnimation = trigger('fadeAnimation', [
       ':enter',
       [style({ opacity: 0 }), animate('0.3s', style({ opacity: 1 }))],
       { optional: true }
-    )
-  ])
+    ),
+  ]),
 ]);
 
 export const ngIfFadeInAnimation = trigger('ngIfFadeInAnimation', [
-  transition(
-    ':enter',
-    [
-      style({ opacity: 0 }),
-      animate(`125ms ${TWEAKED}`, style({ opacity: 1 }))
-    ]
-  ),
-  transition(
-    ':leave',
-    [
-      style({ opacity: 1 }),
-      animate(`125ms ${TWEAKED}`, style({ opacity: 0 }))
-    ]
-  )
+  transition(':enter', [
+    style({ opacity: 0 }),
+    animate(`125ms ${TWEAKED}`, style({ opacity: 1 })),
+  ]),
+  transition(':leave', [
+    style({ opacity: 1 }),
+    animate(`125ms ${TWEAKED}`, style({ opacity: 0 })),
+  ]),
 ]);
 
 export const ngIfFadeInAnimationSlow = trigger('ngIfFadeInAnimationSlow', [
-  transition(
-    ':enter',
-    [
-      style({ opacity: 0 }),
-      animate(`500ms ${TWEAKED}`, style({ opacity: '*' }))
-    ]
-  ),
-  transition(
-    ':leave',
-    [
-      style({ opacity: 1 }),
-      animate(`500ms ${TWEAKED}`, style({ opacity: '*' }))
-    ]
-  )
+  transition(':enter', [
+    style({ opacity: 0 }),
+    animate(`500ms ${TWEAKED}`, style({ opacity: '*' })),
+  ]),
+  transition(':leave', [
+    style({ opacity: 1 }),
+    animate(`500ms ${TWEAKED}`, style({ opacity: '*' })),
+  ]),
 ]);
 
 export const ngIfScaleAnimation = trigger('ngIfScaleAnimation', [
-  transition(
-    ':enter',
-    [
-      style({ height: '0px', width: '0px', opacity: 0 }),
-      animate(`125ms ${TWEAKED}`, style({ height: '*', width: '*' })),
-      animate(`125ms ${TWEAKED}`, style({ opacity: 1 })),
-    ]
-  ),
-  transition(
-    ':leave',
-    [
-      style({ height: '*', width: '*', opacity: '*' }),
-      animate(`125ms ${TWEAKED}`, style({ opacity: 0 })),
-      animate(`125ms ${TWEAKED}`, style({ height: '0px', width: '0px' }))
-    ]
-  )
+  transition(':enter', [
+    style({ height: '0px', width: '0px', opacity: 0 }),
+    animate(`125ms ${TWEAKED}`, style({ height: '*', width: '*' })),
+    animate(`125ms ${TWEAKED}`, style({ opacity: 1 })),
+  ]),
+  transition(':leave', [
+    style({ height: '*', width: '*', opacity: '*' }),
+    animate(`125ms ${TWEAKED}`, style({ opacity: 0 })),
+    animate(`125ms ${TWEAKED}`, style({ height: '0px', width: '0px' })),
+  ]),
 ]);
 
 export const ngIfScaleAnimationDynamic = trigger('ngIfScaleAnimationDynamic', [
-  transition(
-    'void => animate',
-    [
-      style({ height: '0px', width: '0px', opacity: 0 }),
-      animate(`125ms ${TWEAKED}`, style({ height: '*', width: '*' })),
-      animate(`125ms ${TWEAKED}`, style({ opacity: 1 })),
-    ]
-  ),
-  transition(
-    'animate => void',
-    [
-      style({ height: '*', width: '*', opacity: '*' }),
-      animate(`125ms ${TWEAKED}`, style({ opacity: 0 })),
-      animate(`125ms ${TWEAKED}`, style({ height: '0px', width: '0px' }))
-    ]
-  )
+  transition('void => animate', [
+    style({ height: '0px', width: '0px', opacity: 0 }),
+    animate(`125ms ${TWEAKED}`, style({ height: '*', width: '*' })),
+    animate(`125ms ${TWEAKED}`, style({ opacity: 1 })),
+  ]),
+  transition('animate => void', [
+    style({ height: '*', width: '*', opacity: '*' }),
+    animate(`125ms ${TWEAKED}`, style({ opacity: 0 })),
+    animate(`125ms ${TWEAKED}`, style({ height: '0px', width: '0px' })),
+  ]),
 ]);
 
 export function collapseAnimationCustom(ms: number) {
   return trigger('collapseAnimation', [
-    state('closed',
-      style({ height: '0px', display: 'none', overflow: 'hidden'})
+    state(
+      'closed',
+      style({ height: '0px', display: 'none', overflow: 'hidden' })
     ),
-    transition(
-      'closed => open',
-      [
-        style({ height: '0px', opacity: 0, display: 'block' }),
-        animate(`${ms}ms ${TWEAKED}`, style({ height: '*', width: '*' })),
-        animate(`${ms}ms ${TWEAKED}`, style({ opacity: 1 })),
-      ]
-    ),
-    transition(
-      'open => closed',
-      [
-        style({ height: '*', opacity: '*' }),
-        animate(`${ms}ms ${TWEAKED}`, style({ opacity: 0 })),
-        animate(`${ms}ms ${TWEAKED}`, style({ height: '0px', width: '0px' })),
-      ]
-    )
+    transition('closed => open', [
+      style({ height: '0px', opacity: 0, display: 'block' }),
+      animate(`${ms}ms ${TWEAKED}`, style({ height: '*', width: '*' })),
+      animate(`${ms}ms ${TWEAKED}`, style({ opacity: 1 })),
+    ]),
+    transition('open => closed', [
+      style({ height: '*', opacity: '*' }),
+      animate(`${ms}ms ${TWEAKED}`, style({ opacity: 0 })),
+      animate(`${ms}ms ${TWEAKED}`, style({ height: '0px', width: '0px' })),
+    ]),
   ]);
 }
 export const collapseAnimation = collapseAnimationCustom(125);
 
-export const ngIfScaleHeightEnterAnimation = trigger('ngIfScaleHeightEnterAnimation', [
-  transition(
-    ':enter',
-    [
+export const ngIfScaleHeightEnterAnimation = trigger(
+  'ngIfScaleHeightEnterAnimation',
+  [
+    transition(':enter', [
       style({ height: '0px', opacity: 0 }),
       animate(`125ms ${TWEAKED}`, style({ height: '*', opacity: 1 })),
-    ]
-  )
-]);
+    ]),
+  ]
+);
 
 export const ngIfScaleHeightAnimation = trigger('ngIfScaleHeightAnimation', [
-  transition(
-    ':enter',
-    [
-      style({ height: '0px' }),
-      animate(`250ms ${TWEAKED}`, style({ height: '*' })),
-    ]
-  ),
-  transition(
-    ':leave',
-    [
-      style({ height: '*' }),
-      animate(`250ms ${TWEAKED}`, style({ height: '0px' })),
-    ]
-  )
+  transition(':enter', [
+    style({ height: '0px' }),
+    animate(`250ms ${TWEAKED}`, style({ height: '*' })),
+  ]),
+  transition(':leave', [
+    style({ height: '*' }),
+    animate(`250ms ${TWEAKED}`, style({ height: '0px' })),
+  ]),
 ]);
 
 export const ngIfSlideInAnimation = trigger('ngIfSlideInAnimation', [
-  transition(
-    ':enter',
-    [
-      style({ transform: 'translateX(calc(-100% - 20px))' }),
-      animate(`250ms ${TWEAKED}`, style({ transform: '*'}))
-    ]
-  ),
-  transition(
-    ':leave',
-    [
-      style({ transform: '*' }),
-      animate(`250ms ${TWEAKED}`, style({ transform: 'translateX(calc(-100% - 20px))'})),
-    ]
-  )
+  transition(':enter', [
+    style({ transform: 'translateX(calc(-100% - 20px))' }),
+    animate(`250ms ${TWEAKED}`, style({ transform: '*' })),
+  ]),
+  transition(':leave', [
+    style({ transform: '*' }),
+    animate(
+      `250ms ${TWEAKED}`,
+      style({ transform: 'translateX(calc(-100% - 20px))' })
+    ),
+  ]),
+]);
+
+export const ngIfSlideUpAnimation = trigger('ngIfSlideUpAnimation', [
+  transition(':enter', [
+    style({ transform: 'translateY(100%)' }),
+    animate('250ms ease-in', style({ transform: 'translateY(0)' })),
+  ]),
+
+  transition(':leave', [
+    style({ transform: 'translateY(0)' }),
+    animate('250ms ease-out', style({ transform: 'translateY(100%)' })),
+  ]),
 ]);
diff --git a/src/app/shared/components/mobile-banner/mobile-banner.component.html b/src/app/shared/components/mobile-banner/mobile-banner.component.html
@@ -0,0 +1,19 @@
+<!-- @format  -->
+<div class="banner" *ngIf="bannerService.isVisible" @ngIfSlideUpAnimation>
+  <div class="icon">
+    <i (click)="closeBanner($event)" class="material-icons">close</i>
+  </div>
+  <div class="image"><img class="logo" src="assets/svg/app-icon.svg" /></div>
+  <div class="banner-text-container">
+    <h4>Unlock more with our app.</h4>
+    <p>
+      Experience full functionality – download the Permanent app to enjoy all
+      features seamlessly.
+    </p>
+  </div>
+
+  <div class="banner-buttons">
+    <button class="btn btn-primary" (click)="onClickBanner()">Go to App</button>
+    <button class="btn btn-link" (click)="closeBanner($event)">Not now</button>
+  </div>
+</div>