docusign · NanSigmaBohdanMoroz · Jan 10, 2025 · Jun 10, 2025 · Jun 10, 2025
diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/app/admin/admin.component.ts b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/app/admin/admin.component.ts
@@ -14,6 +14,25 @@ import { URL_REGEX, GUID_REGEX, PHONE_REGEX, EMAIL_REGEX } from '../shared/const
 import { debounceTime, Observable } from 'rxjs'
 import { Country } from 'country-list-with-dial-code-and-flag'
 
+declare global {
+    interface Window {
+        DSDigitalSignup: {
+            startSignup: (
+                firstName?: string,
+                lastName?: string,
+                email?: string,
+                phone?: string,
+                partnerIK?: string,
+                loginRedirectUri?: string,
+                locale?: string
+            ) => void
+            registerSignupActivationCallback: (callback: (event) => void) => void
+            registerSignupPopupCloseCallback: (callback: (event) => void) => void
+            notifySignupActivation: (autoCloseWindow: boolean) => void
+        }
+    }
+}
+
 @Component({
     standalone: false,
     selector: 'app-admin',
@@ -56,6 +75,7 @@ export class AdminComponent implements OnInit {
     initialUserId = null
     isFirstLoad = true
     isExpandedText: boolean
+    docusignScriptLoaded = false
 
     constructor(
         private settingsService: SettingsService,
@@ -313,19 +333,28 @@ export class AdminComponent implements OnInit {
     }
 
     startFreeTrial(): void {
-        this.executingAction = true
+        window.DSDigitalSignup.registerSignupActivationCallback(function (event) {
+            console.log('Signup activation callback event:', event)
+        })
 
-        this.reset(() => {
-            this.adminService.initiateFreeTrial().subscribe({
-                next: (payload) => {
-                    this.getConnectionStatus()
-                    window['DSFreeTrial'].startFreeTrialCreation({
-                        partnerIK: payload.partnerIK,
-                        loginRedirectUri: window.location.href
-                    })
-                },
-                error: this.handleError
-            })
+        window.DSDigitalSignup.registerSignupPopupCloseCallback(function (event) {
+            console.log('Signup activation close callback event:', event)
+        })
+
+        this.adminService.initiateFreeTrial().subscribe({
+            next: (payload) => {
+                this.getConnectionStatus()
+                window.DSDigitalSignup.startSignup(
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                    payload.partnerIK,
+                    window.location.href,
+                    undefined
+                )
+            },
+            error: this.handleError
         })
     }
 

diff --git a/...Sign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/app/shared/header/header.component.html b/...Sign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/app/shared/header/header.component.html
@@ -1,13 +1,13 @@
 <header class="header" [class.header-home]="isHomePage$ | async" role="banner">
     <div class="container-fluid">
-        <nav class="navbar navbar-expand-lg navbar-light p-0 align-items-lg-end justify-content-lg-between">
+        <nav class="navbar navbar-expand-sm navbar-light p-0 align-items-sm-end justify-content-sm-between">
             <a class="navbar-brand d-inline-flex align-items-center p-0" [routerLink]="['']" routerLinkActive="active" translate>
                 <span class="navbar-brand-image d-inline-block">
                     <img [src]="style === 'black' ? 'assets/img/logo-text-white.png' : 'assets/img/logo-text-black.png'" alt="" />
                 </span>
             </a>
-            <div class="align-self-lg-center">
-                <ul class="navbar-nav">
+            <div class="align-self-sm-center navbar-buttons">
+                <ul class="navbar-nav flex-row">
                     <li class="nav-item">
                         <a class="nav-link" href="https://github.com/docusign/sample-app-business-csharp" target="blank" translate>
                             GitHubSource

diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/assets/drw-simulator.js b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/assets/drw-simulator.js
diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/index.html b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/index.html
@@ -17,8 +17,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.png" />
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap"
         rel="stylesheet" />
-<!--  <script src="https://www.docusign.com/js/free-trial.js"></script>-->
-  <script src="/assets/drw-simulator.js"></script>
+  <script src='https://www.docusign.com/scripts/ds-digital-signup.js'></script>
 </head>
 <body>
   <!-- Google Tag Manager (noscript) -->

diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_actions.scss b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_actions.scss
@@ -1,3 +1,10 @@
+app-action,
+.action-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .action-section {
     margin: 0 auto;
     background: $white;
@@ -8,30 +15,26 @@
 }
 
 .actions {
-    display: flex;
     width: 100%;
-    flex-wrap: wrap;
-    justify-content: end;
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: 28px;
     padding-bottom: 64px;
-}
 
-.actions > * {
-    width: calc(100% / 2);
-    @include media-breakpoint-down(md) {
-        width: 100%;
+    @include media-breakpoint-up(md) {
+      grid-template-columns: repeat(2, 1fr);
     }
 }
-
 .card-info {
     position: relative;
     background-color: $gray-100;
     padding: 40px;
     text-align: left;
-    margin: 0 27px 27px 0;
     border-radius: 16px;
     height: auto;
     min-width: 360px;
     color: $black;
+    flex:1;
 
     @include media-breakpoint-down(md) {
         padding: 10px 20px;
@@ -85,7 +88,7 @@
         font-weight: 400;
         line-height: 22px;
         min-height: 20px;
-        height: 44px;
+        //height: 44px;
         display: block;
         opacity: 0.8;
     }

diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_admin.scss b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_admin.scss
@@ -80,7 +80,7 @@
 }
 
 .step-container {
-    padding: 24px;
+  padding: 24px;
 
     .step-title {
         color: $gray-400;
@@ -112,6 +112,16 @@
     }
 }
 
+.phone-wrapper {
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+
+    .input-wrapper {
+      margin-left: 0 !important;
+    }
+  }
+}
+
 .form-control-input {
     border-radius: 4px;
     border-color: $gray-500 !important;
@@ -135,20 +145,30 @@
 
     &.account-id,
     &.user-id {
+      width: 100%;
+      @include media-breakpoint-up(md) {
         width: 330px;
+      }
     }
 
     &.disabled {
         pointer-events: none;
     }
 
     &.full-name {
+      width: 314px;
+      @include media-breakpoint-up(md) {
         width: 530px;
+      }
     }
 
     &.phone {
-        margin-top: 40px;
+      margin-top: 20px;
+      width: 314px;
+      @include media-breakpoint-up(md) {
         width: 353px;
+        margin-top: 40px;
+      }
     }
 }
 

diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_btn.scss b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_btn.scss
@@ -21,6 +21,11 @@
 }
 
 .buttons-group {
+  @include media-breakpoint-down(md) {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
     .btn {
         &:not(:last-child) {
             &:not(.btn-sm):not(.btn-lg) {
@@ -29,6 +34,10 @@
                 @include media-breakpoint-up(lg) {
                     margin-right: 15px;
                 }
+                @include media-breakpoint-down(md) {
+                  display: block;
+                  width: 100%;
+                }
             }
         }
     }
@@ -130,6 +139,11 @@
 .btn-login.btn-connect {
     border: 1.5px solid $white;
     margin-top: 16px;
+
+  @include media-breakpoint-between(sm, lg) {
+    margin-top: 35px;
+    margin-left: 16px;
+  }
 }
 
 .authorize-btn-as-admin {

diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_toasters.scss b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_toasters.scss
@@ -28,15 +28,17 @@
     position: relative;
     overflow: hidden;
     margin: 0 0 6px;
-    padding: 40px;
-    width: 500px;
+    padding: 40px 120px 40px 40px;
+    width: 100%;
     height: auto;
-    border-radius: 15px;
     background-position: right 40px center;
     background-repeat: no-repeat;
     box-shadow: none;
     border: none;
-    background-size: 60px;
+    background-size: 40px;
+    @include media-breakpoint-up(md) {
+      width: 500px;
+    }
 
     &:hover,
     &:focus,
@@ -60,7 +62,7 @@
         background-color: $yellow;
         background-image: url('./../../../assets/img/success-icon.png');
     }
-    
+
     &.info-message {
         background-color: $gray-400;
         background-size: 80px;

diff --git a/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_use-cases.scss b/DocuSign.MyBusiness/DocuSign.MyBusiness/ClientApp/src/styles/scss/components/_use-cases.scss
@@ -62,6 +62,10 @@
         opacity: 1;
     }
 
+    .step-container {
+      overflow: hidden;
+    }
+
     .options-list li {
         font-size: 12px;
         font-weight: 400;
@@ -79,11 +83,19 @@
     margin-top: 32px;
 
     form {
+      width: 100%;
+      @include media-breakpoint-up(lg) {
         width: 44%;
+      }
     }
 
     .step-container {
-        width: 100%;
+        @include media-breakpoint-down(md) {
+          width: 100%;
+          padding-left: 0;
+          padding-right: 0;
+        }
+
         .step-title {
             color: $black;
             opacity: 1;
@@ -143,7 +155,19 @@
 
 .use-case-wrapper {
     .buttons-container {
-        margin-bottom: 300px;
+      margin-bottom: 300px;
+
+      @include media-breakpoint-down(md) {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .btn {
+        @include media-breakpoint-down(md) {
+          margin-right: 0 !important;
+        }
+      }
     }
 
     .user-info-container {
@@ -198,7 +222,10 @@
     background-color: $gray-200;
     padding: 20px;
     margin-top: 15px;
-    display: inline-block;
+    text-wrap: balance;
+    @include media-breakpoint-up(md) {
+      display: inline-block;
+    }
 }
 
 .country-codes {
@@ -223,9 +250,28 @@
 .phone-wrapper {
     .input-wrapper {
         margin-left: 16px;
+        @include media-breakpoint-down(md) {
+          width: 100%;
+        }
 
         .phone-input {
             width: 386px;
+          @include media-breakpoint-down(md) {
+            width: 100%;
+          }
         }
     }
 }
+
+.access-code-wrapper {
+  display: flex;
+  gap: 10px;
+
+  .d-inline-block {
+    flex: 1;
+  }
+
+  .form-control.access-code {
+    width: 100%;
+  }
+}