@zeniai/web-components 3.16.86 → 3.16.87

package/dist/CurrencySelectField-Df9xq-N_.cjs

@@ -0,0 +1,139 @@
+"use strict";const o=require("./vendor-.pnpm-DBR6vHWn.cjs"),b=require("react"),i=require("@emotion/styled"),t=require("./index-BMqHLOEI.cjs"),F=({name:e,registerOptions:s,defaultValue:n,isDisabled:c,style:a,placeholder:d,isOptionRemovable:r=!0,menuItemHeight:u=40,controlStyle:p})=>{const{control:x,formState:{errors:g}}=o.useFormContext(),m=o.useTheme(),[f,j]=b.useState(!1),C=o.has(g,e??""),w=t.appLocale.getLocalizedStrings().common.currency,R=l=>{if(!(l==null||!l))return{value:l,label:n.allOptions.find(h=>h.value===l)?.label??l,countryCode:n.allOptions.find(h=>h.value===l)?.countryCode??w.countryCode}},E={container:l=>({...l,width:"100%",...a}),menu:l=>({...l,backgroundColor:m.colors.grey5,borderRadius:t.Space.sp1,boxShadow:`${t.Space.sp0} 2px ${t.Space.sp2} ${m.colors.dropShadowHover}`,border:`1px solid ${m.colors.grey3}`,whiteSpace:"nowrap",zIndex:2,width:"100%",margin:`1px ${t.Space.sp0} ${t.Space.sp0} ${t.Space.sp0}`,overflow:"hidden"}),menuList:l=>({...l,borderRadius:t.Space.sp1}),input:()=>({color:m.colors.primary,margin:0}),singleValue:l=>({...l,margin:0,position:"absolute"})},O={hasError:C,menuItemHeight:u,controlStyle:p,isOptionRemovable:r};return o.jsxRuntimeExports.jsx(o.Controller,{name:e,control:x,defaultValue:n,rules:s,"data-testid":t.generateDataTestId("currency-select-field",e),render:({field:{onChange:l,onBlur:h,value:v,ref:k}})=>{const y=v;return b.createElement(o.StateManagedSelect$1,{...O,ref:k,isMulti:!1,isSearchable:!0,isClearable:r,autoFocus:f===!0,openMenuOnClick:!0,controlShouldRenderValue:!0,placeholder:d,value:R(y.selectedOption),options:n.allOptions,"data-testid":t.generateDataTestId("currency-select",e),onChange:S=>{r&&S?.value!=null&&y?.selectedOption===S.value?l({selectedOption:void 0,allOptions:n.allOptions}):l({selectedOption:S?.value,allOptions:n.allOptions})},onMenuClose:()=>j(!1),key:o.nanoid(),tabSelectsValue:!1,openMenuOnFocus:!0,classNamePrefix:"currency-select-field",onBlur:h,menuPlacement:"auto",maxMenuHeight:240,menuShouldScrollIntoView:!1,closeMenuOnSelect:!0,components:{Control:I,Option:D,Input:M,SingleValue:P,ValueContainer:V,DropdownIndicator:Q,IndicatorSeparator:U,Placeholder:N,ClearIndicator:X,MenuList:L},hideSelectedOptions:!1,styles:E,isDisabled:c!=null})}})},I=e=>{const{menuIsOpen:s,isFocused:n,isDisabled:c,selectProps:a}=e,{value:d,hasError:r,controlStyle:u}=a;return o.jsxRuntimeExports.jsx(_,{controlStyle:u,menuIsOpen:s,isFocused:n,isDisabled:c,selectedValue:d,hasError:r,children:o.jsxRuntimeExports.jsx(o.components.Control,{...e,className:"select-control",children:e.children})})},D=e=>{const{data:s,isSelected:n,isDisabled:c,isFocused:a,selectProps:d}=e,{isOptionRemovable:r}=d,u=s.countryCode,p=typeof s.label=="string"?s.label:s.value;return o.jsxRuntimeExports.jsx(q,{isOptionRemovable:r,className:"select-option-wrapper",isFocused:a,isSelected:n,isDisabled:c,"data-testid":t.generateDataTestId("currency-select-field-option",p),children:o.jsxRuntimeExports.jsx(o.components.Option,{...e,className:"select-option",children:o.jsxRuntimeExports.jsxs(z,{children:[o.jsxRuntimeExports.jsx(T,{countryCode:u}),o.jsxRuntimeExports.jsx(A,{isSelected:n,children:o.jsxRuntimeExports.jsx(B,{isSelected:n,isDisabled:c,children:s.label})}),n?o.jsxRuntimeExports.jsxs(G,{children:[o.jsxRuntimeExports.jsx(J,{className:"right-tick-icon"}),o.jsxRuntimeExports.jsx(K,{className:"close-tick-icon"})]}):null]})})})},L=e=>{const{options:s,children:n,maxHeight:c,getValue:a,selectProps:d}=e,{menuItemHeight:r}=d,[u]=a(),p=s.indexOf(u)*r;return o.jsxRuntimeExports.jsx(o.VariableSizeList,{height:n.length>7?c:n.length*r,width:"100%",itemCount:n.length,itemSize:()=>r,initialScrollOffset:p,children:({index:x,style:g})=>o.jsxRuntimeExports.jsx(W,{style:g,children:n[x]})})},V=e=>o.jsxRuntimeExports.jsx(o.components.ValueContainer,{...e,className:"select-value-container",children:e.children}),M=e=>{const{selectProps:s}=e,{placeholder:n,value:c}=s;return o.jsxRuntimeExports.jsx($,{children:o.jsxRuntimeExports.jsx(o.components.Input,{...e,autoComplete:"new-password",placeholder:c==null?n:void 0,children:e.children})})},P=e=>{const{data:s}=e;return o.jsxRuntimeExports.jsx(o.components.SingleValue,{...e,children:o.jsxRuntimeExports.jsx($,{children:s.label})})},$=i(t.StandardRegular)`
+  color: ${e=>e.theme.colors.primary};
+`,N=()=>null,T=({countryCode:e})=>{if(e!=null&&o.hasFlag(e)===!1)return o.jsxRuntimeExports.jsx(o.jsxRuntimeExports.Fragment,{});{const s=e??"",n=o.Flags[`${t.toAlpha2CountryCodeSupportedByProvider(s)}`];return o.jsxRuntimeExports.jsx(H,{children:o.jsxRuntimeExports.jsx(n,{width:t.Space.sp4,height:t.Space.sp3})})}},_=i.span`
+  width: 100%;
+  background-color: ${e=>e.hasError?t.Colors.importantLight:e.menuIsOpen?e.theme.colors.background:e.controlStyle?.backgroundColor!=null?e.controlStyle?.backgroundColor:e.theme.colors.grey5};
+  border-radius: ${t.Space.sp1};
+  cursor: ${e=>e.isDisabled?"not-allowed":"pointer"};
+  .select-control {
+    border: none;
+    height: ${t.Space.sp6};
+    background-color: inherit;
+    box-shadow: none;
+    &:hover {
+      fill: ${e=>e.theme.colors.primary};
+      background-color: ${e=>e.isDisabled?e.theme.colors.grey5:e.hasError?t.Colors.importantLight:e.theme.colors.background};
+      border-color: none;
+    }
+    width: auto;
+    min-height: auto;
+    cursor: pointer;
+  }
+
+  .select-value-container {
+    width: 100%;
+    display: flex;
+    margin: ${t.Space.sp0} ${t.Space.sp3};
+    padding: 0;
+    max-width: 100%;
+    height: 100%;
+    min-width: auto;
+    align-items: center;
+    flex-wrap: nowrap;
+    cursor: pointer;
+    justify-content: ${e=>e.controlStyle?.justifyContent!=null?e.controlStyle?.justifyContent:e.menuIsOpen===!1?"flex-end":"flex-start"};
+
+    .currency-select-field__single-value {
+      display: flex;
+      margin: ${t.Space.sp0};
+      color: ${e=>e.hasError?t.Colors.important:e.theme.colors.primary};
+      ${t.textStyles.standardRegular.css};
+    }
+
+    .currency-select-field__input-container {
+      display: flex;
+      width: ${e=>e.menuIsOpen===!1&&e.selectedValue!=null?t.Space.sp0:"100%"};
+      position: ${e=>e.isFocused===!1&&e.selectedValue==null?"initial":"absolute"};
+      ${t.textStyles.standardRegular.css};
+      color: ${e=>e.hasError===!0?t.Colors.important:e.theme.colors.primary};
+      margin: ${t.Space.sp0};
+      cursor: inherit;
+      top: ${t.Space.sp2};
+
+      > input {
+        text-align: ${e=>e.isFocused===!1&&e.selectedValue==null?"right":"initial"};
+        text-align: ${e=>e.isFocused===!1?"right":"left"};
+        align-items: center;
+        overflow: hidden;
+        cursor: inherit;
+        :disabled {
+          visibility: visible;
+        }
+        ::placeholder {
+          color: ${e=>e.hasError?t.Colors.important:e.theme.colors.grey1};
+        }
+      }
+    }
+  }
+`,q=i.div`
+  border-radius: inherit;
+  .select-option {
+    ${t.textStyles.smallRegular.css};
+    height: ${t.Space.sp6};
+    padding: 9px ${t.Space.sp3};
+    color: ${e=>e.isSelected?e.theme.colors.primary:e.theme.colors.champion};
+    opacity: ${e=>e.isDisabled?.32:1};
+    background-color: ${e=>e.isSelected?e.theme.colors.grey3:e.theme.colors.grey5};
+    ${e=>e.isFocused&&`background-color: ${e.theme.colors.background}`};
+    cursor: ${e=>e.isDisabled?"not-allowed":"pointer"};
+    border-top: none;
+    border-radius: inherit;
+    .close-tick-icon {
+      display: none;
+    }
+
+    &:hover {
+      background-color: ${e=>e.isDisabled?e.theme.colors.grey5:e.theme.colors.background};
+      color: ${e=>e.isDisabled?e.theme.colors.champion:e.theme.colors.primary};
+      .right-tick-icon {
+        display: ${e=>e.isOptionRemovable?"none":"inline-block"};
+      }
+      .close-tick-icon {
+        display: ${e=>e.isOptionRemovable?"inline-block":"none"};
+      }
+    }
+  }
+`,z=i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`,H=i.div`
+  padding-right: ${t.Space.sp2};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  fill: initial;
+  color: initial;
+`,B=i(t.SmallRegular)`
+  padding-right: 10px;
+  cursor: ${e=>e.isDisabled?"not-allowed":"pointer"};
+  ${e=>e.isSelected&&"cursor: default"};
+`,A=i.div`
+  width: ${e=>e.isSelected?`calc(100% - ${t.Space.sp3})`:"100%"};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`,W=i.div`
+  :first-of-type {
+    border-top-left-radius: ${t.Space.sp1};
+    border-top-right-radius: ${t.Space.sp1};
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: ${t.Space.sp1};
+    border-bottom-right-radius: ${t.Space.sp1};
+  }
+`,G=i.div`
+  display: flex;
+`,J=i(t.SvgTick)`
+  width: 12px;
+  height: 12px;
+  margin-right: 2px;
+  margin-left: ${t.Space.sp1};
+  color: ${e=>e.theme.colors.primary};
+`,K=i(t.SvgClose)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.primary};
+`,Q=()=>null,U=()=>null,X=()=>null;exports.CurrencySelectField=F;

package/dist/CurrencySelectField-Tz2-lvfH.js

@@ -0,0 +1,348 @@
+import { d as R, u as E, m as M, j as o, e as P, S as N, n as _, V as z, c as g, _ as H, $ as T } from "./vendor-.pnpm-D5gxGIYo.js";
+import { useState as B, createElement as A } from "react";
+import i from "@emotion/styled";
+import { a as W, e as x, S as t, o as q, t as S, hi as G, F as J, p as K, b as Q, C as p } from "./index-BtWKMiEc.js";
+const Se = ({
+  name: e,
+  registerOptions: s,
+  defaultValue: l,
+  isDisabled: a,
+  style: c,
+  placeholder: d,
+  isOptionRemovable: r = !0,
+  menuItemHeight: u = 40,
+  controlStyle: h
+}) => {
+  const {
+    control: b,
+    formState: { errors: f }
+  } = R(), y = E(), [j, O] = B(!1), v = M(f, e ?? ""), k = W.getLocalizedStrings().common.currency, F = (n) => {
+    if (!(n == null || !n))
+      return {
+        value: n,
+        label: l.allOptions.find((m) => m.value === n)?.label ?? n,
+        countryCode: l.allOptions.find((m) => m.value === n)?.countryCode ?? k.countryCode
+      };
+  }, I = {
+    container: (n) => ({
+      ...n,
+      width: "100%",
+      ...c
+    }),
+    menu: (n) => ({
+      ...n,
+      backgroundColor: y.colors.grey5,
+      borderRadius: t.sp1,
+      boxShadow: `${t.sp0} 2px ${t.sp2} ${y.colors.dropShadowHover}`,
+      border: `1px solid ${y.colors.grey3}`,
+      // TODO - Add border and radius to every dropdown menu
+      whiteSpace: "nowrap",
+      zIndex: 2,
+      width: "100%",
+      margin: `1px ${t.sp0} ${t.sp0} ${t.sp0}`,
+      overflow: "hidden"
+    }),
+    menuList: (n) => ({
+      ...n,
+      borderRadius: t.sp1
+    }),
+    input: () => ({
+      color: y.colors.primary,
+      margin: 0
+    }),
+    singleValue: (n) => ({
+      ...n,
+      margin: 0,
+      position: "absolute"
+    })
+  }, D = {
+    hasError: v,
+    menuItemHeight: u,
+    controlStyle: h,
+    isOptionRemovable: r
+  };
+  return /* @__PURE__ */ o.jsx(
+    P,
+    {
+      name: e,
+      control: b,
+      defaultValue: l,
+      rules: s,
+      "data-testid": x("currency-select-field", e),
+      render: ({ field: { onChange: n, onBlur: m, value: V, ref: L } }) => {
+        const C = V;
+        return /* @__PURE__ */ A(
+          N,
+          {
+            ...D,
+            ref: L,
+            isMulti: !1,
+            isSearchable: !0,
+            isClearable: r,
+            autoFocus: j === !0,
+            openMenuOnClick: !0,
+            controlShouldRenderValue: !0,
+            placeholder: d,
+            value: F(C.selectedOption),
+            options: l.allOptions,
+            "data-testid": x("currency-select", e),
+            onChange: ($) => {
+              r && $?.value != null && C?.selectedOption === $.value ? n({
+                selectedOption: void 0,
+                allOptions: l.allOptions
+              }) : n({
+                selectedOption: $?.value,
+                allOptions: l.allOptions
+              });
+            },
+            onMenuClose: () => O(!1),
+            key: _(),
+            tabSelectsValue: !1,
+            openMenuOnFocus: !0,
+            classNamePrefix: "currency-select-field",
+            onBlur: m,
+            menuPlacement: "auto",
+            maxMenuHeight: 240,
+            menuShouldScrollIntoView: !1,
+            closeMenuOnSelect: !0,
+            components: {
+              Control: U,
+              Option: X,
+              Input: ee,
+              SingleValue: te,
+              ValueContainer: Z,
+              DropdownIndicator: pe,
+              IndicatorSeparator: ge,
+              Placeholder: oe,
+              ClearIndicator: ye,
+              MenuList: Y
+            },
+            hideSelectedOptions: !1,
+            styles: I,
+            isDisabled: a != null
+          }
+        );
+      }
+    }
+  );
+}, U = (e) => {
+  const { menuIsOpen: s, isFocused: l, isDisabled: a, selectProps: c } = e, { value: d, hasError: r, controlStyle: u } = c;
+  return /* @__PURE__ */ o.jsx(
+    ne,
+    {
+      controlStyle: u,
+      menuIsOpen: s,
+      isFocused: l,
+      isDisabled: a,
+      selectedValue: d,
+      hasError: r,
+      children: /* @__PURE__ */ o.jsx(g.Control, { ...e, className: "select-control", children: e.children })
+    }
+  );
+}, X = (e) => {
+  const { data: s, isSelected: l, isDisabled: a, isFocused: c, selectProps: d } = e, { isOptionRemovable: r } = d, u = s.countryCode, h = typeof s.label == "string" ? s.label : s.value;
+  return /* @__PURE__ */ o.jsx(
+    se,
+    {
+      isOptionRemovable: r,
+      className: "select-option-wrapper",
+      isFocused: c,
+      isSelected: l,
+      isDisabled: a,
+      "data-testid": x(
+        "currency-select-field-option",
+        h
+      ),
+      children: /* @__PURE__ */ o.jsx(g.Option, { ...e, className: "select-option", children: /* @__PURE__ */ o.jsxs(re, { children: [
+        /* @__PURE__ */ o.jsx(le, { countryCode: u }),
+        /* @__PURE__ */ o.jsx(ce, { isSelected: l, children: /* @__PURE__ */ o.jsx(ae, { isSelected: l, isDisabled: a, children: s.label }) }),
+        l ? /* @__PURE__ */ o.jsxs(ue, { children: [
+          /* @__PURE__ */ o.jsx(he, { className: "right-tick-icon" }),
+          /* @__PURE__ */ o.jsx(me, { className: "close-tick-icon" })
+        ] }) : null
+      ] }) })
+    }
+  );
+}, Y = (e) => {
+  const { options: s, children: l, maxHeight: a, getValue: c, selectProps: d } = e, { menuItemHeight: r } = d, [u] = c(), h = s.indexOf(u) * r;
+  return /* @__PURE__ */ o.jsx(
+    z,
+    {
+      height: l.length > 7 ? a : l.length * r,
+      width: "100%",
+      itemCount: l.length,
+      itemSize: () => r,
+      initialScrollOffset: h,
+      children: ({ index: b, style: f }) => /* @__PURE__ */ o.jsx(de, { style: f, children: l[b] })
+    }
+  );
+}, Z = (e) => /* @__PURE__ */ o.jsx(g.ValueContainer, { ...e, className: "select-value-container", children: e.children }), ee = (e) => {
+  const { selectProps: s } = e, { placeholder: l, value: a } = s;
+  return /* @__PURE__ */ o.jsx(w, { children: /* @__PURE__ */ o.jsx(
+    g.Input,
+    {
+      ...e,
+      autoComplete: "new-password",
+      placeholder: a == null ? l : void 0,
+      children: e.children
+    }
+  ) });
+}, te = (e) => {
+  const { data: s } = e;
+  return /* @__PURE__ */ o.jsx(g.SingleValue, { ...e, children: /* @__PURE__ */ o.jsx(w, { children: s.label }) });
+}, w = i(q)`
+  color: ${(e) => e.theme.colors.primary};
+`, oe = () => null, le = ({
+  countryCode: e
+}) => {
+  if (e != null && H(e) === !1)
+    return /* @__PURE__ */ o.jsx(o.Fragment, {});
+  {
+    const l = (
+      //added this typecasting since above if condition will filter out any CountryCode whose flag is not present. EX-"AN"
+      T[`${G(
+        e ?? ""
+      )}`]
+    );
+    return /* @__PURE__ */ o.jsx(ie, { children: /* @__PURE__ */ o.jsx(l, { width: t.sp4, height: t.sp3 }) });
+  }
+}, ne = i.span`
+  width: 100%;
+  background-color: ${(e) => e.hasError ? p.importantLight : e.menuIsOpen ? e.theme.colors.background : e.controlStyle?.backgroundColor != null ? e.controlStyle?.backgroundColor : e.theme.colors.grey5};
+  border-radius: ${t.sp1};
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+  .select-control {
+    border: none;
+    height: ${t.sp6};
+    background-color: inherit;
+    box-shadow: none;
+    &:hover {
+      fill: ${(e) => e.theme.colors.primary};
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.hasError ? p.importantLight : e.theme.colors.background};
+      border-color: none;
+    }
+    width: auto;
+    min-height: auto;
+    cursor: pointer;
+  }
+
+  .select-value-container {
+    width: 100%;
+    display: flex;
+    margin: ${t.sp0} ${t.sp3};
+    padding: 0;
+    max-width: 100%;
+    height: 100%;
+    min-width: auto;
+    align-items: center;
+    flex-wrap: nowrap;
+    cursor: pointer;
+    justify-content: ${(e) => e.controlStyle?.justifyContent != null ? e.controlStyle?.justifyContent : e.menuIsOpen === !1 ? "flex-end" : "flex-start"};
+
+    .currency-select-field__single-value {
+      display: flex;
+      margin: ${t.sp0};
+      color: ${(e) => e.hasError ? p.important : e.theme.colors.primary};
+      ${S.standardRegular.css};
+    }
+
+    .currency-select-field__input-container {
+      display: flex;
+      width: ${(e) => e.menuIsOpen === !1 && e.selectedValue != null ? t.sp0 : "100%"};
+      position: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "initial" : "absolute"};
+      ${S.standardRegular.css};
+      color: ${(e) => e.hasError === !0 ? p.important : e.theme.colors.primary};
+      margin: ${t.sp0};
+      cursor: inherit;
+      top: ${t.sp2};
+
+      > input {
+        text-align: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "right" : "initial"};
+        text-align: ${(e) => e.isFocused === !1 ? "right" : "left"};
+        align-items: center;
+        overflow: hidden;
+        cursor: inherit;
+        :disabled {
+          visibility: visible;
+        }
+        ::placeholder {
+          color: ${(e) => e.hasError ? p.important : e.theme.colors.grey1};
+        }
+      }
+    }
+  }
+`, se = i.div`
+  border-radius: inherit;
+  .select-option {
+    ${S.smallRegular.css};
+    height: ${t.sp6};
+    padding: 9px ${t.sp3};
+    color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.champion};
+    opacity: ${(e) => e.isDisabled ? 0.32 : 1};
+    background-color: ${(e) => e.isSelected ? e.theme.colors.grey3 : e.theme.colors.grey5};
+    ${(e) => e.isFocused && `background-color: ${e.theme.colors.background}`};
+    cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+    border-top: none;
+    border-radius: inherit;
+    .close-tick-icon {
+      display: none;
+    }
+
+    &:hover {
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
+      color: ${(e) => e.isDisabled ? e.theme.colors.champion : e.theme.colors.primary};
+      .right-tick-icon {
+        display: ${(e) => e.isOptionRemovable ? "none" : "inline-block"};
+      }
+      .close-tick-icon {
+        display: ${(e) => e.isOptionRemovable ? "inline-block" : "none"};
+      }
+    }
+  }
+`, re = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`, ie = i.div`
+  padding-right: ${t.sp2};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  fill: initial;
+  color: initial;
+`, ae = i(J)`
+  padding-right: 10px;
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+  ${(e) => e.isSelected && "cursor: default"};
+`, ce = i.div`
+  width: ${(e) => e.isSelected ? `calc(100% - ${t.sp3})` : "100%"};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`, de = i.div`
+  :first-of-type {
+    border-top-left-radius: ${t.sp1};
+    border-top-right-radius: ${t.sp1};
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: ${t.sp1};
+    border-bottom-right-radius: ${t.sp1};
+  }
+`, ue = i.div`
+  display: flex;
+`, he = i(K)`
+  width: 12px;
+  height: 12px;
+  margin-right: 2px;
+  margin-left: ${t.sp1};
+  color: ${(e) => e.theme.colors.primary};
+`, me = i(Q)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, pe = () => null, ge = () => null, ye = () => null;
+export {
+  Se as C
+};

package/dist/CustomerOnboardingActivationPage-BU4SOpZd.js

@@ -0,0 +1,143 @@
+import { j as t } from "./vendor-.pnpm-D5gxGIYo.js";
+import { useEffect as l } from "react";
+import o from "@emotion/styled";
+import { a as d, aD as g, e as p, A as x, S as i, j as u, H as m, ai as h, u as $ } from "./index-BtWKMiEc.js";
+const f = o.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+`, b = o.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  padding: ${i.sp0} 20px;
+  width: 240px;
+  box-sizing: border-box;
+  position: fixed;
+  justify-content: space-between;
+  height: 100%;
+  z-index: 4;
+  background: ${(e) => e.theme.colors.background};
+`, j = o(u)`
+  margin: 20px 12px ${i.sp0} ${i.sp0};
+  height: ${i.sp4};
+  width: 102px;
+  color: ${(e) => e.theme.colors.primary};
+  cursor: pointer;
+`, v = o.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  padding-right: 240px;
+  width: calc(100% - 240px);
+  box-sizing: border-box;
+  position: fixed;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  left: 240px;
+  background: ${(e) => e.theme.colors.background};
+`, y = o(m)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${i.sp1};
+  padding: ${i.sp0} ${i.sp3};
+  text-align: center;
+`, w = o(h)`
+  color: ${(e) => e.theme.colors.hero};
+  padding: ${i.sp0} ${i.sp3};
+  text-align: center;
+`, k = o.div`
+  margin-top: ${i.sp3};
+`, z = ({
+  dashboardFetchState: e,
+  onZeniLogoClick: s,
+  onDashboardFetchDone: n
+}) => {
+  const { title: a, subTitle: c } = d.getLocalizedStrings().customerOnboardingPage.thankYou, r = g(e);
+  return l(() => {
+    r === "In-Progress" && e !== "In-Progress" && n();
+  }, [e, r, n]), /* @__PURE__ */ t.jsxs(f, { children: [
+    /* @__PURE__ */ t.jsx(b, { children: /* @__PURE__ */ t.jsx(
+      j,
+      {
+        "data-testid": p(
+          "zeni-logo-customer-onboarding-activation-page"
+        ),
+        onClick: s
+      }
+    ) }),
+    /* @__PURE__ */ t.jsxs(v, { children: [
+      /* @__PURE__ */ t.jsx(y, { children: a }),
+      /* @__PURE__ */ t.jsx(w, { children: c }),
+      /* @__PURE__ */ t.jsx(k, { children: /* @__PURE__ */ t.jsx(x, { size: "Large", start: !0 }) })
+    ] })
+  ] });
+}, C = o.div`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  position: relative;
+`, S = o.div`
+  width: 100%;
+  position: absolute;
+`, P = o.div`
+  position: relative;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  justify-content: center;
+  padding: ${i.sp0} ${i.sp3};
+  min-height: ${i.sp8};
+`, T = o(u)`
+  height: ${i.sp4};
+  width: 102px;
+  color: ${(e) => e.theme.colors.primary};
+  cursor: pointer;
+`, L = o.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  background: ${(e) => e.theme.colors.background};
+  padding: ${i.sp0} ${i.sp3};
+`, A = o(m)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${i.sp1};
+  text-align: center;
+  width: 100%;
+`, I = o(h)`
+  color: ${(e) => e.theme.colors.hero};
+  text-align: center;
+  width: 100%;
+`, O = o.div`
+  margin-top: ${i.sp3};
+`, Y = ({
+  dashboardFetchState: e,
+  onZeniLogoClick: s,
+  onDashboardFetchDone: n
+}) => {
+  const { title: a, subTitle: c } = d.getLocalizedStrings().customerOnboardingPage.thankYou, r = g(e);
+  return l(() => {
+    r === "In-Progress" && e !== "In-Progress" && n();
+  }, [e, r, n]), /* @__PURE__ */ t.jsxs(C, { children: [
+    /* @__PURE__ */ t.jsx(S, { children: /* @__PURE__ */ t.jsx(P, { children: /* @__PURE__ */ t.jsx(
+      T,
+      {
+        "data-testid": p(
+          "zeni-logo-customer-onboarding-activation-page"
+        ),
+        onClick: s
+      }
+    ) }) }),
+    /* @__PURE__ */ t.jsxs(L, { children: [
+      /* @__PURE__ */ t.jsx(A, { children: a }),
+      /* @__PURE__ */ t.jsx(I, { children: c }),
+      /* @__PURE__ */ t.jsx(O, { children: /* @__PURE__ */ t.jsx(x, { size: "Large", start: !0 }) })
+    ] })
+  ] });
+}, D = (e) => $() === "small" ? /* @__PURE__ */ t.jsx(Y, { ...e }) : /* @__PURE__ */ t.jsx(z, { ...e });
+export {
+  D as default
+};