feat(carto): updated behavior to join structure from structure details page

src/app/app-routing.module.ts

@@ -177,6 +177,19 @@ const routes: Routes = [
       footerOutletRoute,
     ],
   },
+  {
+    path: 'join/:id',
+    children: [
+      {
+        path: '',
+        canActivate: [AuthGuard],
+        component: StructureJoinComponent,
+        resolve: {
+          structure: StructureResolver,
+        },
+      },
+    ],
+  },
   {
     path: 'reset-password',
     children: [

src/app/form/form-view/form-view.module.ts

@@ -54,7 +54,6 @@ import { PersonalOfferGuard } from './guards/personalOffer.guard';
     PersonalOfferAccompanimentComponent,
     PersonalOfferTrainingTypeComponent,
     PersonalOfferOtherStructureChoiceComponent,
-    InformationStepComponent,
     AccountFormComponent,
     ProfileEmployerSelectionComponent,
     ProfileJobSelectionComponent,

src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss

@@ -20,7 +20,8 @@
       background-color: $grey-6;
       border-radius: 7px;
     }
-    &::-webkit-progress-value {
+    &::-webkit-progress-value,
+    &::-moz-progress-bar {
       background-color: $primary-color;
       border-radius: 12px;
     }

src/app/login/login.component.ts

@@ -25,6 +25,7 @@ export class LoginComponent implements OnInit {
   public isWelcome = false;
   public userId: string;
   public token: string;
+  public returnUrl: string;
   public structure: Structure;
   public verificationSuccess = false;
   public verificationIssue = false;
@@ -56,6 +57,10 @@ export class LoginComponent implements OnInit {
       }
     });
 
+    this.activatedRoute.queryParams.subscribe((params) => {
+      this.returnUrl = params.returnUrl;
+    });
+
     // login form
     this.loginForm = this.formBuilder.group({
       email: ['', [Validators.required, Validators.pattern(CustomRegExp.EMAIL)]],
@@ -88,7 +93,11 @@ export class LoginComponent implements OnInit {
           if (this.isWelcome) {
             this.router.navigateByUrl('form/profile');
           } else {
-            this.router.navigateByUrl('news');
+            if (this.returnUrl) {
+              this.router.navigateByUrl(this.returnUrl);
+            } else {
+              this.router.navigateByUrl('news');
+            }
           }
         },
         () => {

src/app/shared/components/index.ts

@@ -10,11 +10,13 @@ import { HourPickerComponent } from './hour-picker/hour-picker.component';
 import { CopyPasteComponent } from './hour-picker/copy-paste/copy-paste.component';
 import { RadioFormComponent } from './radio-form/radio-form.component';
 import { ModalConfirmationComponent } from './modal-confirmation/modal-confirmation.component';
+import { ModalJoinConfirmationComponent } from './modal-join-confirmation/modal-join-confirmation.component';
 import { StructureOptionsModalComponent } from './structure-options-modal/structure-options-modal.component';
 import { ModalOptionsComponent } from './modal-options/modal-options.component';
 import { TextInputModalComponent } from './text-input-modal/text-input-modal.component';
 import { PasswordFormComponent } from './password-form/password-form.component';
 import { TrainingTypePickerComponent } from './training-type-picker/training-type-picker.component';
+import { InformationStepComponent } from '../../form/form-view/global-components/information-step/information-step.component';
 
 // tslint:disable-next-line: max-line-length
 export {
@@ -51,9 +53,11 @@ export const SharedComponents = [
   CopyPasteComponent,
   RadioFormComponent,
   ModalConfirmationComponent,
+  ModalJoinConfirmationComponent,
   StructureOptionsModalComponent,
   ModalOptionsComponent,
   TextInputModalComponent,
   PasswordFormComponent,
   TrainingTypePickerComponent,
+  InformationStepComponent,
 ];

src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.html

+<div *ngIf="openned" class="modalBackground">
+  <div class="modal">
+    <div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
+      <div class="headerModal" fxLayout="row" fxLayoutAlign="space-between center">
+        <div class="empty"></div>
+        <h1>{{ title }}</h1>
+        <svg class="hide" aria-hidden="true" (click)="closeModal(false)">
+          <use [attr.xlink:href]="'assets/form/sprite.svg#close'"></use>
+        </svg>
+      </div>
+      <p class="primaryContent">{{ primaryContent }}</p>
+      <p *ngIf="secondaryContent" class="secondaryContent">{{ secondaryContent }}</p>
+      <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="8px">
+        <app-button
+          (action)="closeModal(false)"
+          [text]="'Annuler'"
+          [style]="buttonTypeEnum.modalSecondary"
+        ></app-button>
+        <app-button
+          (action)="closeModal(true)"
+          [text]="customConfirmationText ? customConfirmationText : 'Confirmer'"
+          [style]="buttonTypeEnum.modalPrimary"
+        ></app-button>
+      </div>
+    </div>
+  </div>
+</div>

src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.scss

+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/shapes';
+@import '../../../../assets/scss/z-index';
+
+.modalBackground {
+  .modal {
+    max-width: 390px;
+    .contentModal {
+      padding: 20px 40px;
+
+      .headerModal {
+        width: 390px;
+        padding: 0 8px;
+        h1 {
+          @include lato-bold-18;
+          margin: 10px 0;
+        }
+        svg,
+        .empty {
+          height: 40px;
+          width: 40px;
+        }
+        svg {
+          cursor: pointer;
+        }
+      }
+      p {
+        @include lato-regular-18;
+        text-align: center;
+        margin: 10px 0;
+      }
+      .secondaryContent {
+        color: $red;
+        margin-top: -10px;
+      }
+      .footerModal {
+        gap: 8px;
+        app-button {
+          flex: 1;
+        }
+      }
+    }
+  }
+}

src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalConfirmationComponent } from './modal-join-confirmation.component';
+
+describe('ModalConfirmationComponent', () => {
+  let component: ModalConfirmationComponent;
+  let fixture: ComponentFixture<ModalConfirmationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ModalConfirmationComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModalConfirmationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ButtonType } from '../button/buttonType.enum';
+
+@Component({
+  selector: 'app-join-modal-confirmation',
+  templateUrl: './modal-join-confirmation.component.html',
+  styleUrls: ['./modal-join-confirmation.component.scss'],
+})
+export class ModalJoinConfirmationComponent {
+  @Input() public openned: boolean;
+  @Input() public title: string;
+  @Input() public primaryContent: string;
+  @Input() public secondaryContent?: string;
+  @Input() public customConfirmationText?: string;
+  @Output() closed = new EventEmitter<boolean>();
+  public buttonTypeEnum = ButtonType;
+
+  public closeModal(value: boolean): void {
+    this.closed.emit(value);
+  }
+}

src/app/structure-join/structure-join.component.html

-<div fxLayout="column" class="content-container full-screen">
-  <div class="section-container" fxLayout="column" fxLayoutAlign="center center">
-    <h1>Validation de la demande de rattachement</h1>
-    <p>Merci de patienter...</p>
+<ng-container *ngIf="!structureName">
+  <div fxLayout="column" class="content-container full-screen">
+    <div class="section-container" fxLayout="column" fxLayoutAlign="center center">
+      <h1>Validation de la demande de rattachement</h1>
+      <p>Merci de patienter...</p>
+    </div>
   </div>
-</div>
+</ng-container>
+<ng-container *ngIf="structureName">
+  <div class="container">
+    <div class="page">
+      <app-information-step
+        [step]="structureFormStepEnum.mailSentInfo"
+        [formType]="formTypeEnum.structure"
+        [structureName]="structureName"
+      ></app-information-step>
+    </div>
+    <div class="button">
+      <app-button [style]="buttonTypeEnum.Primary" [text]="'Ok'" (action)="previousUrl()"> </app-button>
+    </div>
+  </div>
+</ng-container>

src/app/structure-join/structure-join.component.scss

+@import '../../assets/scss/color';
+
+.container {
+  /* Auto layout */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0px 0px;
+
+  /* Inside auto layout */
+  flex: none;
+  order: 1;
+  flex-grow: 1;
+}
+
+.page {
+  box-sizing: border-box;
+
+  /* Auto layout */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0px 32px 48px;
+  gap: 16px;
+
+  width: 1000px;
+  height: 579px;
+
+  /* Basic/White */
+  background: $white;
+
+  /* Grey/6 */
+  border: 1px solid $grey-6;
+  border-radius: 8px;
+
+  /* Inside auto layout */
+  flex: none;
+  order: 0;
+  flex-grow: 1;
+}
+
+.button {
+  margin-top: 16px;
+}

src/app/structure-join/structure-join.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
+import { formType } from '../form/form-view/formType.enum';
+import { structureFormStep } from '../form/form-view/structure-form/structureFormStep.enum';
+import { RouterListenerService } from '../services/routerListener.service';
 import { StructureService } from '../services/structure.service';
-
+import { ButtonType } from '../shared/components/button/buttonType.enum';
 @Component({
   selector: 'app-structure-join',
   templateUrl: './structure-join.component.html',
+  styleUrls: ['./structure-join.component.scss'],
 })
 export class StructureJoinComponent implements OnInit {
-  constructor(private router: Router, private route: ActivatedRoute, private structureService: StructureService) {}
+  public structureName?: string = '';
+  public structureFormStepEnum = structureFormStep;
+  public formTypeEnum = formType;
+  public buttonTypeEnum = ButtonType;
+
+  constructor(
+    private routerListener: RouterListenerService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private structureService: StructureService
+  ) {}
 
   ngOnInit(): void {
+    // Handle structure joining with
+    this.route.data.subscribe((data) => {
+      if (data.structure) {
+        this.structureName = data.structure.structureName;
+      }
+    });
+
+    // Handle structure joining with email
     this.route.queryParamMap.subscribe((params) => {
       if (
         params.get('id') &&
         params.get('userId') &&
-        (params.get('status') === 'true' || params.get('status') === 'false')
+        (params.get('status') === 'true' || params.get('status') === 'false') &&
+        !this.structureName
       ) {
         this.structureService
           .validateStructureJoin(params.get('id'), params.get('userId'), params.get('status') === 'true' ? true : false)
@@ -29,4 +52,8 @@ export class StructureJoinComponent implements OnInit {
       }
     });
   }
+
+  previousUrl() {
+    this.routerListener.goToPreviousUrl();
+  }
 }

src/app/structure-list/components/structure-details/structure-details.component.html

@@ -500,13 +500,14 @@
       (closed)="claimStructure($event)"
     ></app-modal-confirmation>
 
-    <app-modal-confirmation
-      [openned]="joinModalOpenned"
-      [content]="
-        'Voulez-vous vraiment rejoindre cette structure&nbsp;? Une demande sera envoyée aux membres pour validation'
-      "
-      (closed)="joinStructure($event)"
-    ></app-modal-confirmation>
+  <app-join-modal-confirmation
+    [openned]="joinModalOpenned"
+    [title]="'Travaillez-vous ici&nbsp;?'"
+    [primaryContent]="'Un message sera envoyé à un administrateur de la structure'"
+    [secondaryContent]="structure.structureName"
+    [customConfirmationText]="'Rejoindre la structure'"
+    (closed)="joinStructure($event)"
+  ></app-join-modal-confirmation>
 
     <app-text-input-modal
       [openned]="structureErrorModalOpenned"

src/app/structure-list/components/structure-details/structure-details.component.ts

@@ -230,7 +230,7 @@ export class StructureDetailsComponent implements OnInit {
     if (this.userIsLoggedIn()) {
       this.toggleJoinModal();
     } else {
-      this.router.navigate(['create-structure'], { state: { newUser: this.structure, isJoin: true } });
+      this.router.navigate(['login'], { queryParams: { returnUrl: `acteurs?id=${this.structure._id}` } });
     }
   }
   public handleModify(): void {
@@ -272,6 +272,7 @@ export class StructureDetailsComponent implements OnInit {
           this.isClaimed = true;
         });
       });
+      this.router.navigate(['join', this.structure._id]);
     }
   }
 

src/assets/form/sprite.svg

@@ -614,7 +614,7 @@
 <path d="M26 140H24.5C24.5 140.828 25.1716 141.5 26 141.5V140ZM83.5 87L83.5 85.5L83.5 87ZM103.426 88.0228L103.589 86.5318L103.426 88.0228ZM63.5739 88.0223L63.7373 89.5133L63.5739 88.0223ZM83.5 141.5C84.3284 141.5 85 140.828 85 140C85 139.172 84.3284 138.5 83.5 138.5V141.5ZM63.7373 89.5133C69.4973 88.882 76.0577 88.4999 83.5 88.5L83.5 85.5C75.9551 85.4999 69.2853 85.8873 63.4105 86.5312L63.7373 89.5133ZM83.5 88.5C90.9421 88.5001 97.5024 88.8825 103.262 89.5139L103.589 86.5318C97.7145 85.8878 91.0448 85.5001 83.5 85.5L83.5 88.5ZM27.5 140C27.5 127.476 30.5094 115.481 36.5387 106.319C42.5441 97.1935 51.5563 90.8484 63.7373 89.5133L63.4105 86.5312C50.2549 87.9731 40.4801 94.8727 34.0327 104.67C27.6093 114.43 24.5 127.036 24.5 140H27.5ZM83.5 138.5H26V141.5H83.5V138.5ZM129.642 100.23C123.32 92.8079 114.639 87.743 103.589 86.5318L103.262 89.5139C113.517 90.638 121.509 95.3091 127.358 102.176L129.642 100.23Z" fill="#696969"/>
 <circle cx="84.0416" cy="63.4879" r="30.9879" fill="white" stroke="#696969" stroke-width="3" stroke-linejoin="round"/>
 <path d="M154.686 93.624C151.223 90.5385 145.919 90.8517 142.842 94.3221L110.73 130.534L93.1433 116.368C89.5313 113.458 84.2499 114.036 81.3486 117.655C78.4489 121.272 79.0227 126.56 82.6326 129.468L106.442 148.646C109.928 151.453 114.998 151.027 117.968 147.678L155.382 105.486C158.458 102.018 158.147 96.7077 154.686 93.624Z" fill="#47C562" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+</symbol>
 
 
 </svg>