@chat21/chat21-ionic 3.0.98-rc.1 → 3.0.98

package/src/app/modals/send-whatsapp-template/send-whatsapp-template.page.scss

@@ -1,12 +1,14 @@
 .error-container {
-    margin-top: 50px;
+    margin-top: 70px;
     display: flex;
     justify-content: center;
 }
 
 .error-message {
+    white-space: pre-line;
     color: #bababa;
     font-style: italic;
+    text-align: center;
 }
 
 .label-container {
@@ -51,7 +53,6 @@
 }
 
 ion-footer {
-
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
@@ -91,16 +92,17 @@ ion-footer {
 
     .message-cloud {
         background-color: #fff;
-        width: auto;
-        max-width: 50%;
-        padding: 8px 10px;
+        // width: auto;
+        width: 260px;
+        //max-width: 50%;
+        padding: 8px 10px 2px 10px;
         //border-radius: 8px 0 8px 8px;
         border-radius: 8px;
-        box-shadow: 0 1px 0.5px rgba(0, 0, 0, .15);
+        box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.15);
         font-size: 12px;
 
         .header-preview {
-            color: rgba(0, 0, 0, .76);
+            color: rgba(0, 0, 0, 0.76);
             font-size: 15px;
             font-weight: bold;
             line-height: 19px;
@@ -115,10 +117,49 @@ ion-footer {
 
         .footer-preview {
             padding-top: 6px;
-            color: rgba(0, 0, 0, .45);
+            color: #00000073;
             font-size: 13px;
             line-height: 17px;
         }
+
+        .whatsapp-call-to-action {
+            background-color: #fff;
+            color: #00a5f4;
+            width: 100%;
+            height: 26px;
+            font-size: 14px;
+            text-transform: none;
+            min-width: calc(50% - 2px);
+        }
+    }
+
+    .message-cloud-buttons-container {
+        max-width: 260px;
+    }
+
+    .message-cloud-buttons {
+        margin: 0 -1.5px;
+        border: none;
+        box-sizing: border-box;
+        display: flex;
+        flex-wrap: wrap;
+        width: 260px;
+        
+    }
+
+    .message-cloud-button {
+        margin: 3px 1.5px 0;
+        border-radius: 7.5px;
+        padding: 6px 7px 8px 9px;
+        min-width: calc(50% - 3px);
+        height: 36px;
+        flex-grow: 1;
+        background-color: white;
+        color: #00a5f4;
+        box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.15);
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: 0px;
     }
 
     // .message-cloud::after {
@@ -134,33 +175,72 @@ ion-footer {
     //     clear: both;
     // }
 
-    .message-cloud-buttons {
-        width: calc(50% + 2px);
-        //max-width: 50%;
-        display: flex;
-        flex-direction: row;
-        margin-left: -2px;
-
-        .whatsapp-button {
-            background-color:#fff;
-            color: #00a5f4;;
-            width: 100%;
-            height: 34px;
-            border-radius: 7.5px;
-            font-size: 14px;
-            text-transform: none;
-            box-shadow: 0 1px 0.5px rgba(0, 0, 0, .15);
-            margin: 2px 0 0 2px;
-            min-width: calc(50% - 2px);
-            
-        }
-
-        // ion-button {
-        //     width: 100%;
-        //     color: #00a5f4;
-        // }
+    // out of ion-grid
+    // .whatsapp-button {
+    //     background-color:#fff;
+    //     color: #00a5f4;;
+    //     width: 100%;
+    //     height: 34px;
+    //     border-radius: 7.5px;
+    //     font-size: 14px;
+    //     text-transform: none;
+    //     box-shadow: 0 1px 0.5px rgba(0, 0, 0, .15);
+    //     margin: 2px 0 0 2px;
+    //     min-width: calc(50% - 2px);
+    // }
 
+    // in ion-grid
+    .whatsapp-button {
+        background-color: #fff;
+        color: #00a5f4;
+        width: 100%;
+        height: 34px;
+        border-radius: 7.5px;
+        font-size: 14px;
+        text-transform: none;
+        box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.15);
+        margin: 0px;
     }
+
+    // .message-cloud-buttons {
+    //     width: calc(50% + 2px);
+    //     //max-width: 50%;
+    //     display: flex;
+    //     flex-direction: row;
+    //     margin-left: -2px;
+
+    //     // out of ion-grid
+    //     // .whatsapp-button {
+    //     //     background-color:#fff;
+    //     //     color: #00a5f4;;
+    //     //     width: 100%;
+    //     //     height: 34px;
+    //     //     border-radius: 7.5px;
+    //     //     font-size: 14px;
+    //     //     text-transform: none;
+    //     //     box-shadow: 0 1px 0.5px rgba(0, 0, 0, .15);
+    //     //     margin: 2px 0 0 2px;
+    //     //     min-width: calc(50% - 2px);
+    //     // }
+
+    //     // in ion-grid
+    //     .whatsapp-button {
+    //         background-color: #fff;
+    //         color: #00a5f4;
+    //         width: 100%;
+    //         height: 34px;
+    //         border-radius: 7.5px;
+    //         font-size: 14px;
+    //         text-transform: none;
+    //         box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.15);
+    //         margin: 0px;
+    //     }
+
+    //     // ion-button {
+    //     //     width: 100%;
+    //     //     color: #00a5f4;
+    //     // }
+    // }
 }
 
 .title-back {
@@ -173,12 +253,19 @@ ion-footer {
 }
 
 .parameters-container {
-    padding: 0px 22px;
+    padding: 0px 22px 12px 22px;
 
     .parameters-title {
         font-weight: 500;
     }
 
+    .parameters-subtitle {
+        margin-bottom: 4px;
+        font-size: 14px;
+        color: #959494;
+        margin-top: -12px;
+    }
+
     .parameter {
         display: flex;
         flex-direction: row;
@@ -214,11 +301,31 @@ ion-footer {
     }
 }
 
+.large {
+    width: 80%;
+}
+
+.whatsapp-call-to-action {
+    background-color: #fff;
+    color: #00a5f4;
+    width: 200px;
+    height: 26px;
+    font-size: 14px;
+    text-transform: none;
+    border-radius: 6px;
+    margin-bottom: 4px;
+}
+
+.call-to-action-icon {
+    font-size: 16px;
+    margin-right: 6px;
+}
+
 .field-wrapper input,
 .field-wrapper textarea {
     border-style: solid;
     border-width: 2px;
-    border-color: rgb(211, 219, 229);
+    border-color: #d3dbe5;
     border-radius: 4px;
     padding: 15px;
     border-radius: 4px;
@@ -261,90 +368,103 @@ ion-footer {
 .loader {
     height: 310px;
 
-    .box{
+    .box {
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         position: absolute;
     }
 
-    .container{
+    .container {
         height: 15px;
         width: 105px;
         display: flex;
         position: relative;
 
-        .circle{
+        .circle {
             width: 15px;
             height: 15px;
             border-radius: 50%;
             background-color: var(--basic-blue);
             animation: move 500ms linear 0ms infinite;
             margin-right: 30px;
-            
-            &:first-child{
-            position: absolute;
-            top:0;
-            left:0;
-            animation: grow 500ms linear 0ms infinite;
+
+            &:first-child {
+                position: absolute;
+                top: 0;
+                left: 0;
+                animation: grow 500ms linear 0ms infinite;
             }
-            
-            &:last-child{
-            position: absolute;
-            top: 0;
-            right: 0;
-            margin-right: 0;
-            animation: grow 500ms linear 0s infinite reverse;
+
+            &:last-child {
+                position: absolute;
+                top: 0;
+                right: 0;
+                margin-right: 0;
+                animation: grow 500ms linear 0s infinite reverse;
             }
         }
-
     }
 
     .spinner {
         margin: auto;
-        border: 8px solid #EAF0F6;
+        border: 8px solid #eaf0f6;
         border-radius: 50%;
         border-top: 8px solid var(--basic-blue);
         width: 50px;
         height: 50px;
         animation: spinner 1s linear infinite;
     }
-    
+
     @keyframes spinner {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
     }
 
-    .label{
+    .label {
         text-align: center;
         margin-top: 10px;
         animation: blinker 1s linear infinite;
     }
-      
+
     @keyframes grow {
-        from {transform: scale(0,0); opacity: 0;}
-        to {transform: scale(1,1); opacity: 1;}
+        from {
+            transform: scale(0, 0);
+            opacity: 0;
+        }
+        to {
+            transform: scale(1, 1);
+            opacity: 1;
+        }
     }
-    
+
     @keyframes move {
-        from {transform: translateX(0px)}
-        to {transform: translateX(45px)}
+        from {
+            transform: translateX(0px);
+        }
+        to {
+            transform: translateX(45px);
+        }
     }
 
     @keyframes blinker {
         50% {
-          opacity: 0;
+            opacity: 0;
         }
-      }
+    }
 }
 
-ion-toolbar{
-    &.beta:after{
+ion-toolbar {
+    &.beta:after {
         content: "beta";
         position: fixed;
         width: 80px;
         height: 25px;
-        background: #EE8E4A;
+        background: #ee8e4a;
         top: 7px;
         left: -20px;
         text-align: center;
@@ -354,13 +474,164 @@ ion-toolbar{
         font-weight: bold;
         color: #fff;
         line-height: 27px;
-        transform:rotate(-45deg);
+        transform: rotate(-45deg);
     }
 
-    ion-title{
+    ion-title {
         margin-left: 30px;
     }
 }
 
+.url-button-previsioning {
+    padding: 8px 8px;
+    border-radius: 4px;
+    background-color: #1877f21a;
+
+    .previsioning-url {
+        margin: 0px;
+    }
+}
 
+iframe {
+    pointer-events: none;
+}
 
+ion-button.icon-only {
+    height: 40px;
+    border: 2px solid #d3dbe5;
+    border-radius: 6px;
+}
+
+.first-button {
+    margin: 0px;
+    padding: 0px;
+}
+
+// .first-button-mr {
+//     margin-right: 1px;
+// }
+
+.second-button {
+    margin: 0px;
+    padding: 0px;
+}
+
+// .second-button-ml {
+//     margin-left: 1px;
+// }
+
+.pdf-preview {
+    width: 100%;
+    height: 100%;
+    background-color: #d3dbe5;
+    border-radius: 6px;
+    padding: 26px;
+    display: flex;
+    justify-content: center;
+
+    p {
+        padding: 10px;
+        color: white;
+        background-color: #80868b;
+        border-radius: 12px;
+        width: 70px;
+        text-align: center;
+    }
+}
+
+.location-preview {
+    width: 100%;
+    height: 100%;
+    background-color: #d3dbe5;
+    border-radius: 6px;
+    padding: 26px;
+    display: flex;
+    justify-content: center;
+    background-image: url("https://media.istockphoto.com/id/1306807452/vector/map-city-vector-illustration.jpg?s=612x612&w=0&k=20&c=8efOIy-Ft3trEzeDk3PY2WRjWws8mvKXgkLqCZ2cP5A=");
+    background-size: contain;
+
+    p {
+        padding: 10px;
+        color: white;
+        background-color: #80868b;
+        border-radius: 12px;
+        width: 100px;
+        text-align: center;
+    }
+}
+
+capacitor-google-map {
+    display: inline-block;
+    width: 275px;
+    height: 400px;
+}
+
+.selected-place {
+
+    background-color: #f3f3f3;
+    padding: 8px 8px;
+    border-radius: 6px;
+    margin-top: 20px;
+
+    .share-location-header {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;    
+    }
+    
+    .share-location-title {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        color: #006a9b;
+
+        ion-icon {
+            margin-right: 4px;
+        }
+
+        p {
+            font-size: 14px;
+            font-weight: 600;
+        }
+    }
+
+    p {
+        margin: 0px;
+        font-size: 14px;
+    }
+
+    .place-info {
+        padding-left: 20px;
+
+        .place-name {
+            font-weight: 500;
+        }
+
+        .place-address {
+            font-style: italic;
+        }
+
+        .place-coords {
+            font-size: 12px;
+            font-weight: 500;
+            color: #aaa;
+        }
+    }
+
+    ion-button.small {
+        background-color: transparent;
+        color: #006a9b;
+        border-radius: 6px;
+        border: solid 1px #006a9b;
+        font-size: 14px;
+        height: 24px;
+        line-height: 23px;
+        min-width: 60px;
+    }
+
+    ion-icon {
+        margin-right: 6px;
+    }
+}

package/src/app/modals/send-whatsapp-template/send-whatsapp-template.page.spec.ts

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 
-import { SendWhatsappTemplatePage } from './send-whatsapp-template.page';
+import { SendWhatsappTemplateModal } from './send-whatsapp-template.page';
 
 describe('SendWhatsappTemplatePage', () => {
-  let component: SendWhatsappTemplatePage;
-  let fixture: ComponentFixture<SendWhatsappTemplatePage>;
+  let component: SendWhatsappTemplateModal;
+  let fixture: ComponentFixture<SendWhatsappTemplateModal>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SendWhatsappTemplatePage ],
+      declarations: [ SendWhatsappTemplateModal ],
       imports: [IonicModule.forRoot()]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(SendWhatsappTemplatePage);
+    fixture = TestBed.createComponent(SendWhatsappTemplateModal);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));