Merge pull request #1145 from Ajay-aot/FWF-6252/usage-quota-API-integration

FWF-6252[feature] - UI for usage quota alert

Author: arun-s-aot

forms-flow-components/src/components/SvgIcons/index.tsx

@@ -513,6 +513,34 @@ export const CheckIcon = ({ color = baseColor, className, ...props }) => (
     <path d="M2 7.2L6.5 12L14 4"/>
   </svg>
 );
+export const AlertCircleIcon = ({ color = baseColor, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <g clipPath="url(#alertCircleClip)">
+      <path
+        d="M8 15C6.14348 15 4.36301 14.2625 3.05025 12.9497C1.7375 11.637 1 9.85652 1 8C1 6.14348 1.7375 4.36301 3.05025 3.05025C4.36301 1.7375 6.14348 1 8 1C9.85652 1 11.637 1.7375 12.9497 3.05025C14.2625 4.36301 15 6.14348 15 8C15 9.85652 14.2625 11.637 12.9497 12.9497C11.637 14.2625 9.85652 15 8 15ZM8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16Z"
+        fill={color}
+      />
+      <path
+        d="M7.00195 11.0001C7.00195 10.8688 7.02782 10.7388 7.07807 10.6174C7.12833 10.4961 7.20199 10.3859 7.29485 10.293C7.38771 10.2002 7.49794 10.1265 7.61927 10.0762C7.7406 10.026 7.87063 10.0001 8.00195 10.0001C8.13328 10.0001 8.26331 10.026 8.38464 10.0762C8.50596 10.1265 8.6162 10.2002 8.70906 10.293C8.80192 10.3859 8.87558 10.4961 8.92583 10.6174C8.97609 10.7388 9.00195 10.8688 9.00195 11.0001C9.00195 11.2653 8.8966 11.5197 8.70906 11.7072C8.52152 11.8948 8.26717 12.0001 8.00195 12.0001C7.73674 12.0001 7.48238 11.8948 7.29485 11.7072C7.10731 11.5197 7.00195 11.2653 7.00195 11.0001ZM7.09995 4.99512C7.08664 4.86896 7.09999 4.74141 7.13915 4.62075C7.17831 4.50008 7.24241 4.389 7.32727 4.2947C7.41214 4.20041 7.51588 4.12501 7.63176 4.0734C7.74765 4.02179 7.87309 3.99512 7.99995 3.99512C8.12681 3.99512 8.25226 4.02179 8.36814 4.0734C8.48403 4.12501 8.58777 4.20041 8.67263 4.2947C8.7575 4.389 8.82159 4.50008 8.86075 4.62075C8.89991 4.74141 8.91327 4.86896 8.89995 4.99512L8.54995 8.50212C8.53819 8.63989 8.47516 8.76823 8.37331 8.86175C8.27146 8.95528 8.13823 9.00717 7.99995 9.00717C7.86168 9.00717 7.72844 8.95528 7.6266 8.86175C7.52475 8.76823 7.46171 8.63989 7.44995 8.50212L7.09995 4.99512Z"
+        fill={color}
+      />
+    </g>
+    <defs>
+      <clipPath id="alertCircleClip">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
 export const InfoIcon = ({ 
   color = undefined, 
   variant = "primary", 

forms-flow-theme/scss/v8-scss/_aiFormBuilder.scss

@@ -12,6 +12,7 @@ $font-size-m: var(--font-size-m);
 $font-size-l: var(--font-size-l);
 $font-size-xl: var(--font-size-xl);
 $font-weight-regular: var(--font-weight-regular);
+$font-weight-medium: var(--font-weight-medium);
 $gray-darkest: var(--gray-darkest);
 $white-300: var(--white-300);
 $border-radius: var(--border-radius);
@@ -56,6 +57,9 @@ $white-300: var(--white-300);
       border-radius: $border-radius; /* 5px */
       padding: $spacer-125 $spacer-100 0.875rem; /* 14px */ /* 20px 16px 14px */
       min-height: 18.25rem; /* 292px */ // to add some space for the guide panel
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
     }
 
     &__guide-panel-loader {
@@ -154,23 +158,99 @@ $white-300: var(--white-300);
       padding: 0.875rem 0.75rem 1rem; /* 14px, 12px, 16px */
     }
 
+    &__textarea-wrap {
+      position: relative;
+    }
+
     &__textarea {
       width: 100%;
       min-height: 6.375rem; /* 102px */
       border: 0;
       padding: 0;
+      padding-right: 3.5rem; /* 56px - space for quota circle (40px + 12px margin) */
       font-size: $font-size-m; /* 15px */
       line-height: 1.5rem; /* 24px */
       color: $gray-darkest; /* #4a4a4a */
       resize: none; //resize the textarea to none
       background: transparent;
-  
+
       &:focus {
         outline: none;
         box-shadow: none;
       }
     }
-  
+
+    &__quota-circle {
+      position: absolute;
+      top: $spacer-075; /* 12px */
+      right: $spacer-075; /* 12px */
+      width: $spacer-250; /* 40px */
+      height: $spacer-250; /* 40px */
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+    }
+
+    &__quota-circle-svg {
+      position: absolute;
+      inset: 0;
+    }
+
+    &__quota-circle-count {
+      position: relative;
+      z-index: 1;
+      font-size: 0.875rem; /* 14px */
+      font-weight: 600;
+      color: $gray-darkest; /* #333 */
+    }
+
+    &__limit-alert {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    &__limit-alert-text {
+      color: #ec6a5e;
+      text-align: center;
+      font-size: $font-size-m; /* 15px */
+      font-weight: $font-weight-medium; /* 500 */
+      line-height: 1.5rem; /* 24px */
+      margin-left: 0.625rem; /* 10px */
+    }
+
+    &__limit-alert-timer {
+      color: rgba(74, 74, 74, 0.9);
+      text-align: center;
+      font-size: 0.875rem; /* 14px */
+      font-weight: $font-weight-regular; /* 400 */
+      line-height: 1.5rem; /* 24px */
+      white-space: nowrap;
+    }
+
+    &__limit-reached-line {
+      color: rgba(74, 74, 74, 0.9);
+      text-align: center;
+      font-family: var(--font-family-base);
+      font-size: $font-size-m; /* 15px */
+      font-style: normal;
+      font-weight: $font-weight-medium; /* 500 */
+      line-height: 1.5rem; /* 24px */
+      margin-bottom: 0;
+    }
+
+    &__limit-reached-subline {
+      display: flex;
+      justify-content: center;
+      color: rgba(74, 74, 74, 0.9);
+      font-family: var(--font-family-base);
+      font-size: $font-size-m; /* 15px */
+      font-style: normal;
+      font-weight: $font-weight-regular; /* 400 */
+      line-height: 1.5rem; /* 24px */
+      margin-bottom: 0.8125rem; /* 13px */
+    }
+
     &__prompt-chips {
       display: flex;
       flex-wrap: wrap;