feat: add form widget for claim and register

src/app/profile/profile.component.scss

@@ -48,33 +48,8 @@
 }
 .structureSection {
   margin-bottom: 108px;
-  .structureCard {
-    border: 1px solid $grey-4;
-    border-radius: 6px;
-    .structureInfo {
-      border-radius: 6px;
-      background: $white;
-      min-height: 100px;
-      padding: 33px 55px;
-      @media #{$large-phone} {
-        padding: 33px 25px;
-      }
-      a {
-        margin: 0;
-        &.structureName {
-          @include cn-bold-26;
-          color: $secondary-color;
-          text-decoration: underline;
-        }
-      }
-      .ownerName {
-        @include cn-regular-18;
-        color: $grey-2;
-      }
-    }
-    @include background-hash($grey-2);
-  }
 }
+
 .addSection {
   button {
     background: $red-default;

src/app/user-verification/user-verification.component.html

@@ -11,25 +11,31 @@
         Votre compte a bien été créé.
       </h3>
     </div>
-    <div *ngIf="structure" class="structureInfoBlock" fxLayout="row" fxLayoutAlign=" center">
-      <div class="structureInfoContent" fxLayout="column">
-        {{ structure.structureName }}
-        <span>{{ structure.getLabelTypeStructure() }}</span>
-      </div>
-      <div class="validateSvg">
-        <svg class="validate" aria-hidden="true">
-          <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
-        </svg>
+    <div *ngIf="structure" class="structureCard">
+      <div class="structureInfo" fxLayout="column" fxLayoutGap="14px">
+        <div fxLayout="row" fxLayoutAlign="space-between start" fxLayoutGap="20px">
+          <a class="structureName" routerLink="/home" [state]="{ data: structure }">{{ structure.structureName }}</a>
+        </div>
       </div>
     </div>
   </div>
   <p *ngIf="verificationIssue">
     Une erreur est survenue lors de la validation de votre email... Veuillez envoyer un mail au support.
   </p>
-  <div
-    class="typeform-widget test"
-    data-url="https://form.typeform.com/to/m7DV3CdW?typeform-medium=embed-snippet"
-  ></div>
+  <!-- TypeForm -->
+  <div *ngIf="!verificationIssue">
+    <iframe
+      *ngIf="structure"
+      class="typeform-widget custom-form"
+      title="typeform"
+      src="https://form.typeform.com/to/m7DV3CdW?typeform-medium=embed-snippet"
+    ></iframe>
+    <div
+      *ngIf="!structure"
+      class="typeform-widget custom-form"
+      data-url="https://form.typeform.com/to/ASJH3B7Z?typeform-medium=embed-snippet"
+    ></div>
+  </div>
   <div class="btnSection" fxLayout="row" fxLayoutAlign="space-around center">
     <button *ngIf="structure && verificationSuccess" class="btn" routerLink="/home" [state]="{ data: structure }">
       Voir ma structure

src/app/user-verification/user-verification.component.scss

@@ -7,28 +7,7 @@
   padding: 18px;
   margin: auto;
 }
-.structureInfoBlock {
-  background: $green-1;
-  color: $white;
-  padding: 16px;
-  border-radius: 6px;
-  @include cn-bold-18;
-  .structureInfoContent {
-    width: 100%;
-  }
-  span {
-    font-style: italic;
-    @include cn-regular-14;
-  }
-  .validateSvg {
-    stroke: $white;
-    text-align: right;
-    svg {
-      height: 14px;
-      width: 14px;
-    }
-  }
-}
+
 .btn {
   background: $secondary-color;
   border-radius: 4px;
@@ -58,8 +37,18 @@
   }
 }
 
-.test {
+.custom-form {
   width: 100%;
-  height: 300px;
-  transform: scale(0.75);
+  height: 480px;
+  border: none;
+}
+
+// Override button style to be the same as typeform button
+button {
+  margin: 0px;
+  max-width: 100%;
+  font-size: 24px !important;
+  line-height: 32px !important;
+  min-height: 48px;
+  width: 245px !important;
 }

src/styles.scss

@@ -239,3 +239,30 @@ button {
     transform: translate(-50%, -50%);
   }
 }
+
+.structureCard {
+  border: 1px solid $grey-4;
+  border-radius: 6px;
+  .structureInfo {
+    border-radius: 6px;
+    background: $white;
+    min-height: 100px;
+    padding: 33px 55px;
+    @media #{$large-phone} {
+      padding: 33px 25px;
+    }
+    a {
+      margin: 0;
+      &.structureName {
+        @include cn-bold-26;
+        color: $secondary-color;
+        text-decoration: underline;
+      }
+    }
+    .ownerName {
+      @include cn-regular-18;
+      color: $grey-2;
+    }
+  }
+  @include background-hash($grey-2);
+}