@thecb/components 5.6.7 → 5.6.9

package/dist/index.esm.js

@@ -6107,6 +6107,16 @@ var checkDeniedCards = function checkDeniedCards(name) {
       return "";
   }
 };
+/*
+  An optional style for layout atoms that positions the atom completely off screen
+  This will *not* be visible or accessible to sighted users
+  Use to contain text content or a11y interactive content (skip links when not visible)
+  that is only for users of assistive technologies (screen readers)
+
+  Currently implemented on the Box atom via the srOnly prop
+*/
+
+var screenReaderOnlyStyle = "\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n";
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6118,7 +6128,8 @@ var general = /*#__PURE__*/Object.freeze({
   generateClickHandler: generateClickHandler,
   checkCardBrand: checkCardBrand,
   displayCardBrand: displayCardBrand,
-  checkDeniedCards: checkDeniedCards
+  checkDeniedCards: checkDeniedCards,
+  screenReaderOnlyStyle: screenReaderOnlyStyle
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children"];
@@ -6261,10 +6272,13 @@ var BoxWrapper = styled(function (_ref) {
 });
 /* eslint-enable no-unused-vars */
 
-var _excluded$3 = ["padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "dataQa", "children"];
+var _excluded$3 = ["padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "children"];
 /*
   Box component to create generic boxes
   Supply padding, border, background, and color values
+
+  srOnly prop enables special screen-reader style that is used to position content
+  completely off screen (only for users of screen readers)
 */
 
 var Box = function Box(_ref) {
@@ -6301,6 +6315,8 @@ var Box = function Box(_ref) {
       theme = _ref.theme,
       hiddenStyles = _ref.hiddenStyles,
       extraStyles = _ref.extraStyles,
+      _ref$srOnly = _ref.srOnly,
+      srOnly = _ref$srOnly === void 0 ? false : _ref$srOnly,
       dataQa = _ref.dataQa,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$3);
@@ -6327,7 +6343,7 @@ var Box = function Box(_ref) {
     onClick: onClick,
     hiddenStyles: hiddenStyles,
     onKeyDown: onKeyDown,
-    extraStyles: extraStyles,
+    extraStyles: srOnly ? "".concat(screenReaderOnlyStyle).concat(extraStyles) : extraStyles,
     theme: theme,
     textAlign: textAlign,
     "data-qa": dataQa,
@@ -41438,6 +41454,119 @@ var WorkflowTile = function WorkflowTile(_ref) {
   }))));
 };
 
+var DashboardIframe = styled.iframe.withConfig({
+  displayName: "PeriscopeDashboardIframestyled__DashboardIframe",
+  componentId: "sc-j0cucj-0"
+})(["border:none;box-shadow:0 0 5px 0 ", ";display:none;"], ALTO_GREY);
+
+/**
+ * Component: PeriscopeDashboardIframe
+ *
+ * Used for rendering Citybase's periscope reporting dashboards in iframes.
+ * Receives action props to trigger a request on mount for the iframe's url.
+ * Receives a string prop if/when we receive the url result.
+ * And receives action props to emit errors from failed iframe loading.
+ *
+ * The logic and api client methods to handle requests/response,
+ * store the url, etc. should be provided from the app consuming this library.
+ *
+ * If the url request is pending, render a spinner.
+ * If the url request failed, render a UI error state.
+ **/
+
+var DASHBOARD_SIZE_MESSAGE_TYPE = "dashboard_resize";
+var PERISCOPE_ORIGIN = "https://app.periscopedata.com";
+
+var isValidMessage = function isValidMessage(message) {
+  return message.isTrusted && message.origin === PERISCOPE_ORIGIN && message.data && message.data.event_type === DASHBOARD_SIZE_MESSAGE_TYPE;
+};
+
+var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
+  var url = _ref.url,
+      requestDashboardUrl = _ref.requestDashboardUrl,
+      periscopeDataPending = _ref.periscopeDataPending,
+      periscopeDataSuccess = _ref.periscopeDataSuccess,
+      periscopeDataFailure = _ref.periscopeDataFailure,
+      periscopeDataRequestSuccess = _ref.periscopeDataRequestSuccess,
+      periscopeDataRequestFailure = _ref.periscopeDataRequestFailure;
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      height = _useState2[0],
+      setHeight = _useState2[1];
+
+  var time = {
+    timer: null
+  };
+  useEffect$1(function () {
+    time.timer = setTimeout(function () {
+      periscopeDataRequestFailure();
+    }, 10000);
+  }, []);
+
+  var Dashboard = function Dashboard(height) {
+    return function (url) {
+      return /*#__PURE__*/React.createElement(DashboardIframe, {
+        src: url,
+        width: "100%",
+        height: height,
+        "data-qa": "DashboardIframe",
+        onLoad: function onLoad() {
+          var iframe = document.querySelector("iframe");
+          iframe.style.display = "initial";
+        }
+      });
+    };
+  };
+
+  var validatePeriscope = function validatePeriscope(message) {
+    if (isValidMessage(message)) {
+      setHeight(message.data.dashboard_height + 100);
+      clearTimeout(time.timer);
+      periscopeDataRequestSuccess();
+    }
+  };
+
+  useLayoutEffect(function () {
+    window.addEventListener("message", validatePeriscope);
+    requestDashboardUrl();
+    return function () {
+      return window.removeEventListener("message", validatePeriscope);
+    };
+  }, [requestDashboardUrl]);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BoxWithShadow$1, {
+    padding: "0",
+    minWidth: "100%",
+    minHeight: "592px",
+    variant: "baseStandard",
+    background: "#fff",
+    borderRadius: "4px",
+    extraStyles: "display: flex; justify-content: center; align-items: center; flex-direction: column;"
+  }, periscopeDataPending && !periscopeDataSuccess && /*#__PURE__*/React.createElement(Cover, {
+    minHeight: "100%",
+    singleChild: true
+  }, /*#__PURE__*/React.createElement(Center, {
+    intrinsic: true
+  }, /*#__PURE__*/React.createElement(Spinner$2, {
+    size: "100"
+  }))), periscopeDataFailure && !periscopeDataSuccess && /*#__PURE__*/React.createElement(Box, {
+    padding: "64px"
+  }, /*#__PURE__*/React.createElement(Center, {
+    intrinsic: true
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: "0 0 2rem"
+  }, /*#__PURE__*/React.createElement(PeriscopeFailedIcon, null)), /*#__PURE__*/React.createElement(Heading$1, {
+    variant: "h3",
+    weight: "700"
+  }, "Something Went Wrong"), /*#__PURE__*/React.createElement(Paragraph$1, {
+    variant: "p",
+    extraStyles: "text-align: center;"
+  }, "There was an issue trying to load the dashboard."), /*#__PURE__*/React.createElement(Paragraph$1, {
+    variant: "p",
+    extraStyles: "text-align: center;"
+  }, "Your organization may not have a dashboard configured."))), !periscopeDataFailure && url && Dashboard(height)(url)));
+};
+
 var pageBackground = "#F6F6F9";
 var fallbackValues$H = {
   pageBackground: pageBackground
@@ -41712,5 +41841,5 @@ var index$5 = /*#__PURE__*/Object.freeze({
   theme: themeUtils
 });
 
-export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, AutopayOnIcon$1 as AutopayOnIcon, BankIcon, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackReversalIcon, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, FailedIcon, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, InternalUserInfoForm, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, Switcher, TabSidebar$1 as TabSidebar, TableListItem, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletIcon$1 as WalletIcon, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$4 as constants, createPartialAmountFormState, index$5 as util, withWindowSize };
+export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, AutopayOnIcon$1 as AutopayOnIcon, BankIcon, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackReversalIcon, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, FailedIcon, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, InternalUserInfoForm, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, Switcher, TabSidebar$1 as TabSidebar, TableListItem, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletIcon$1 as WalletIcon, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$4 as constants, createPartialAmountFormState, index$5 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map