@oneblink/apps-react 6.2.0-beta.4 → 6.2.0

package/dist/components/payments/PaymentForm.js

@@ -14,12 +14,6 @@ function PaymentForm({ captchaSiteKey, onCompleted, onCancelled, appImageUrl, ti
         }
         const { formSubmissionResult, paymentSubmissionEvent } = await paymentService.getFormSubmissionResultPayment();
         switch (paymentSubmissionEvent.type) {
-            case 'BPOINT':
-            case 'CP_PAY':
-            case 'NSW_GOV_PAY':
-            case 'WESTPAC_QUICK_WEB': {
-                throw new Error(`"${paymentSubmissionEvent.type}" payment events do not support a custom payment form.`);
-            }
             case 'WESTPAC_QUICK_STREAM': {
                 const { supplierBusinessCode, publishableApiKey, isTestMode } = await paymentService.westpacQuickStream.getPaymentFormConfiguration({
                     formSubmissionPaymentId,
@@ -31,6 +25,9 @@ function PaymentForm({ captchaSiteKey, onCompleted, onCancelled, appImageUrl, ti
                     renderPaymentForm: () => (React.createElement(WestpacQuickStreamPaymentForm, { formSubmissionResult: formSubmissionResult, paymentSubmissionEvent: paymentSubmissionEvent, formSubmissionPaymentId: formSubmissionPaymentId, supplierBusinessCode: supplierBusinessCode, publishableApiKey: publishableApiKey, isTestMode: isTestMode, captchaSiteKey: captchaSiteKey, onCompleted: onCompleted, onCancelled: onCancelled, appImageUrl: appImageUrl, title: title })),
                 };
             }
+            default: {
+                throw new Error(`"${paymentSubmissionEvent.type}" payment events do not support a custom payment form.`);
+            }
         }
     }, [
         appImageUrl,

package/dist/components/payments/PaymentForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentForm.js","sourceRoot":"","sources":["../../../src/components/payments/PaymentForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { paymentService } from '@oneblink/apps'\nimport { SubmissionTypes } from '@oneblink/types'\nimport React from 'react'\nimport WestpacQuickStreamPaymentForm from './WestpacQuickStreamPaymentForm'\nimport useQuery from '../../hooks/useQuery'\nimport useLoadDataState from '../../hooks/useLoadDataState'\nimport OnLoading from '../renderer/OnLoading'\nimport MaterialIcon from '../MaterialIcon'\n\nfunction PaymentForm({\n  captchaSiteKey,\n  onCompleted,\n  onCancelled,\n  appImageUrl,\n  title,\n}: {\n  captchaSiteKey: string\n  onCompleted: (result: {\n    formSubmissionPayment: SubmissionTypes.FormSubmissionPayment\n    paymentReceiptUrl: string\n  }) => void\n  onCancelled: (result: { paymentReceiptUrl: string }) => void\n  appImageUrl?: string\n  title?: string\n}) {\n  const query = useQuery()\n\n  const loadPaymentFormConfiguration = React.useCallback(\n    async (abortSignal: AbortSignal) => {\n      const formSubmissionPaymentId = query.formSubmissionPaymentId\n      if (typeof formSubmissionPaymentId !== 'string') {\n        throw new Error(\n          'It looks like you are attempting to make an unknown payment.',\n        )\n      }\n\n      const { formSubmissionResult, paymentSubmissionEvent } =\n        await paymentService.getFormSubmissionResultPayment()\n      switch (paymentSubmissionEvent.type) {\n        case 'BPOINT':\n        case 'CP_PAY':\n        case 'NSW_GOV_PAY':\n        case 'WESTPAC_QUICK_WEB': {\n          throw new Error(\n            `\"${paymentSubmissionEvent.type}\" payment events do not support a custom payment form.`,\n          )\n        }\n        case 'WESTPAC_QUICK_STREAM': {\n          const { supplierBusinessCode, publishableApiKey, isTestMode } =\n            await paymentService.westpacQuickStream.getPaymentFormConfiguration(\n              {\n                formSubmissionPaymentId,\n                formSubmissionResult,\n                paymentSubmissionEvent,\n                abortSignal,\n              },\n            )\n          return {\n            renderPaymentForm: () => (\n              <WestpacQuickStreamPaymentForm\n                formSubmissionResult={formSubmissionResult}\n                paymentSubmissionEvent={paymentSubmissionEvent}\n                formSubmissionPaymentId={formSubmissionPaymentId}\n                supplierBusinessCode={supplierBusinessCode}\n                publishableApiKey={publishableApiKey}\n                isTestMode={isTestMode}\n                captchaSiteKey={captchaSiteKey}\n                onCompleted={onCompleted}\n                onCancelled={onCancelled}\n                appImageUrl={appImageUrl}\n                title={title}\n              />\n            ),\n          }\n        }\n      }\n    },\n    [\n      appImageUrl,\n      captchaSiteKey,\n      onCancelled,\n      onCompleted,\n      query.formSubmissionPaymentId,\n      title,\n    ],\n  )\n\n  const [state] = useLoadDataState(loadPaymentFormConfiguration)\n\n  switch (state.status) {\n    case 'LOADING': {\n      return (\n        <section>\n          <div className=\"cypress-loading has-text-centered\">\n            <OnLoading className=\"has-text-centered\"></OnLoading>\n            <span>Loading payment configuration...</span>\n          </div>\n        </section>\n      )\n    }\n    case 'ERROR': {\n      return (\n        <section className=\"cypress-payment-form-loading-error-message\">\n          <div className=\"ob-payment-form__error-icon-container has-text-centered has-margin-bottom-8\">\n            <MaterialIcon className=\"ob-payment-form__error-icon has-text-danger icon-x-large\">\n              error\n            </MaterialIcon>\n          </div>\n          <p className=\"ob-payment-form__error-message has-text-centered has-margin-bottom-4\">\n            {state.error.message}\n          </p>\n        </section>\n      )\n    }\n    case 'SUCCESS': {\n      return state.result.renderPaymentForm()\n    }\n  }\n}\n\nexport default React.memo(PaymentForm)\n"]}
+{"version":3,"file":"PaymentForm.js","sourceRoot":"","sources":["../../../src/components/payments/PaymentForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { paymentService } from '@oneblink/apps'\nimport { SubmissionTypes } from '@oneblink/types'\nimport React from 'react'\nimport WestpacQuickStreamPaymentForm from './WestpacQuickStreamPaymentForm'\nimport useQuery from '../../hooks/useQuery'\nimport useLoadDataState from '../../hooks/useLoadDataState'\nimport OnLoading from '../renderer/OnLoading'\nimport MaterialIcon from '../MaterialIcon'\n\nfunction PaymentForm({\n  captchaSiteKey,\n  onCompleted,\n  onCancelled,\n  appImageUrl,\n  title,\n}: {\n  captchaSiteKey: string\n  onCompleted: (result: {\n    formSubmissionPayment: SubmissionTypes.FormSubmissionPayment\n    paymentReceiptUrl: string\n  }) => void\n  onCancelled: (result: { paymentReceiptUrl: string }) => void\n  appImageUrl?: string\n  title?: string\n}) {\n  const query = useQuery()\n\n  const loadPaymentFormConfiguration = React.useCallback(\n    async (abortSignal: AbortSignal) => {\n      const formSubmissionPaymentId = query.formSubmissionPaymentId\n      if (typeof formSubmissionPaymentId !== 'string') {\n        throw new Error(\n          'It looks like you are attempting to make an unknown payment.',\n        )\n      }\n\n      const { formSubmissionResult, paymentSubmissionEvent } =\n        await paymentService.getFormSubmissionResultPayment()\n      switch (paymentSubmissionEvent.type) {\n        case 'WESTPAC_QUICK_STREAM': {\n          const { supplierBusinessCode, publishableApiKey, isTestMode } =\n            await paymentService.westpacQuickStream.getPaymentFormConfiguration(\n              {\n                formSubmissionPaymentId,\n                formSubmissionResult,\n                paymentSubmissionEvent,\n                abortSignal,\n              },\n            )\n          return {\n            renderPaymentForm: () => (\n              <WestpacQuickStreamPaymentForm\n                formSubmissionResult={formSubmissionResult}\n                paymentSubmissionEvent={paymentSubmissionEvent}\n                formSubmissionPaymentId={formSubmissionPaymentId}\n                supplierBusinessCode={supplierBusinessCode}\n                publishableApiKey={publishableApiKey}\n                isTestMode={isTestMode}\n                captchaSiteKey={captchaSiteKey}\n                onCompleted={onCompleted}\n                onCancelled={onCancelled}\n                appImageUrl={appImageUrl}\n                title={title}\n              />\n            ),\n          }\n        }\n        default: {\n          throw new Error(\n            `\"${paymentSubmissionEvent.type}\" payment events do not support a custom payment form.`,\n          )\n        }\n      }\n    },\n    [\n      appImageUrl,\n      captchaSiteKey,\n      onCancelled,\n      onCompleted,\n      query.formSubmissionPaymentId,\n      title,\n    ],\n  )\n\n  const [state] = useLoadDataState(loadPaymentFormConfiguration)\n\n  switch (state.status) {\n    case 'LOADING': {\n      return (\n        <section>\n          <div className=\"cypress-loading has-text-centered\">\n            <OnLoading className=\"has-text-centered\"></OnLoading>\n            <span>Loading payment configuration...</span>\n          </div>\n        </section>\n      )\n    }\n    case 'ERROR': {\n      return (\n        <section className=\"cypress-payment-form-loading-error-message\">\n          <div className=\"ob-payment-form__error-icon-container has-text-centered has-margin-bottom-8\">\n            <MaterialIcon className=\"ob-payment-form__error-icon has-text-danger icon-x-large\">\n              error\n            </MaterialIcon>\n          </div>\n          <p className=\"ob-payment-form__error-message has-text-centered has-margin-bottom-4\">\n            {state.error.message}\n          </p>\n        </section>\n      )\n    }\n    case 'SUCCESS': {\n      return state.result.renderPaymentForm()\n    }\n  }\n}\n\nexport default React.memo(PaymentForm)\n"]}

package/dist/form-elements/FormElementABN.js

@@ -134,9 +134,13 @@ function FormElementABN({ id, element, value, onChange, validationMessage, displ
         !isLoading) ||
         error) &&
         !isLookingUp;
+    const hasCopyButton = !!value && !!element.readOnly;
+    const hasLookupButton = element.isDataLookup || element.isElementLookup;
     return (React.createElement("div", { className: "cypress-abn-element" },
         React.createElement(FormElementLabelContainer, { className: "ob-abn", id: id, element: element, required: element.required },
-            React.createElement("div", { className: "field has-addons" },
+            React.createElement("div", { className: clsx('field has-addons', {
+                    'no-addons-mobile': !hasCopyButton && !hasLookupButton,
+                }) },
                 React.createElement("div", { className: clsx('control is-expanded', {
                         'is-loading': isLoading,
                     }) },
@@ -151,13 +155,17 @@ function FormElementABN({ id, element, value, onChange, validationMessage, displ
                             setIsDirty();
                             removeFocus();
                         }, onFocus: setIsFocused, "aria-describedby": ariaDescribedby })),
-                value && (React.createElement("div", { className: "control ob-abn__record-control" },
-                    React.createElement("a", { className: "button is-static ob-abn__record-button" }, abnService.displayBusinessNameFromABNRecord(value)))),
-                !!element.readOnly && !!value && (React.createElement("div", { className: "control" },
+                value && (React.createElement(ABNDisplay, { abnRecord: value, className: "ob-abn__display-desktop" })),
+                hasCopyButton && (React.createElement("div", { className: "control" },
                     React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: label }))),
                 React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })),
+            value && (React.createElement(ABNDisplay, { abnRecord: value, className: "ob-abn__display-mobile" })),
             isDisplayingValidationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
                 React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, (error === null || error === void 0 ? void 0 : error.message) || validationMessage))))));
 }
 export default React.memo(FormElementABN);
+const ABNDisplay = ({ abnRecord, className, }) => {
+    return (React.createElement("div", { className: `control ob-abn__record-control ${className}` },
+        React.createElement("a", { className: "button is-static ob-abn__record-button" }, abnService.displayBusinessNameFromABNRecord(abnRecord))));
+};
 //# sourceMappingURL=FormElementABN.js.map

package/dist/form-elements/FormElementABN.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementABN.js","sourceRoot":"","sources":["../../src/form-elements/FormElementABN.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport InputMask from 'react-input-mask'\nimport { parseString } from 'xml2js'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, MiscTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useAbnLookupAuthenticationGuid from '../hooks/useAbnLookupAuthenticationGuid'\nimport { abnService } from '@oneblink/sdk-core'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n  id: string\n  element: FormTypes.ABNElement\n  value: MiscTypes.ABNRecord | undefined\n  onChange: FormElementValueChangeHandler<MiscTypes.ABNRecord>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementABN({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const abnLookupAuthenticationGuid = useAbnLookupAuthenticationGuid()\n  const [label, setLabel] = React.useState(\n    value ? abnService.getABNNumberFromABNRecord(value) || '' : '',\n  )\n  const [isFocused, setIsFocused, removeFocus] = useBooleanState(false)\n  const [{ isLoading, error }, setState] = React.useState<{\n    isLoading: boolean\n    error: Error | null\n  }>({\n    isLoading: false,\n    error: null,\n  })\n\n  React.useEffect(() => {\n    const searchString = label.replace(/[^\\d]/g, '')\n    const isSearchStringValid =\n      searchString.length === 11 || (searchString.length === 9 && !isFocused)\n\n    const currentABNNumber = value\n      ? abnService.getABNNumberFromABNRecord(value)\n      : ''\n    if (!isSearchStringValid || currentABNNumber === searchString) {\n      return\n    }\n\n    setState({\n      isLoading: true,\n      error: null,\n    })\n\n    const abortController = new AbortController()\n    const fetchRecord = async () => {\n      try {\n        const urlSearchParams = new URLSearchParams()\n        urlSearchParams.append('searchString', searchString)\n        urlSearchParams.append('includeHistoricalDetails', 'N')\n        if (abnLookupAuthenticationGuid) {\n          urlSearchParams.append(\n            'authenticationGuid',\n            abnLookupAuthenticationGuid,\n          )\n        }\n\n        const url =\n          searchString.length === 11\n            ? 'https://abr.business.gov.au/abrxmlsearch/AbrXmlSearch.asmx/SearchByABNv202001'\n            : 'https://abr.business.gov.au/abrxmlsearch/AbrXmlSearch.asmx/SearchByASICv201408'\n        const response = await fetch(`${url}?${urlSearchParams.toString()}`, {\n          mode: 'cors',\n          signal: abortController.signal,\n        })\n        const text = await response.text()\n        if (!response.ok) {\n          throw new Error(text)\n        }\n\n        const result = await new Promise<{\n          ABRPayloadSearchResults: {\n            response: {\n              businessEntity201408?: MiscTypes.ABNRecord\n              businessEntity202001: MiscTypes.ABNRecord\n              exception?: {\n                exceptionDescription: string\n                exceptionCode: string\n              }\n            }\n          }\n        }>((resolve, reject) => {\n          parseString(\n            text,\n            {\n              explicitArray: false,\n            },\n            (err, result) => {\n              if (err) {\n                reject(err)\n              } else {\n                resolve(result)\n              }\n            },\n          )\n        })\n        if (result.ABRPayloadSearchResults.response.exception) {\n          throw new Error(\n            result.ABRPayloadSearchResults.response.exception.exceptionDescription,\n          )\n        }\n\n        if (result.ABRPayloadSearchResults.response.businessEntity201408) {\n          result.ABRPayloadSearchResults.response.businessEntity202001 =\n            result.ABRPayloadSearchResults.response.businessEntity201408\n        }\n\n        if (\n          !Array.isArray(\n            result.ABRPayloadSearchResults.response.businessEntity202001\n              .businessName,\n          )\n        ) {\n          result.ABRPayloadSearchResults.response.businessEntity202001.businessName =\n            [\n              result.ABRPayloadSearchResults.response.businessEntity202001\n                .businessName,\n            ]\n        }\n\n        if (!abortController.signal.aborted) {\n          onChange(element, {\n            value: result.ABRPayloadSearchResults.response.businessEntity202001,\n          })\n          setState({\n            isLoading: false,\n            error: null,\n          })\n        }\n      } catch (err) {\n        if (!abortController.signal.aborted) {\n          setState({\n            isLoading: false,\n            error: err as Error,\n          })\n        }\n      }\n    }\n\n    fetchRecord()\n\n    return () => {\n      abortController.abort()\n    }\n  }, [abnLookupAuthenticationGuid, element, isFocused, label, onChange, value])\n\n  // Ensure the label is set if the value is set outside of this component\n  React.useEffect(() => {\n    if (value) {\n      const newLabel = abnService.getABNNumberFromABNRecord(value)\n      if (!newLabel) {\n        // Record in value had no ABN Number. This should never happen\n        return\n      }\n      if (label !== newLabel) {\n        setLabel(\n          newLabel.split('').reduce((memo, character, index) => {\n            switch (index) {\n              case 2:\n              case 5:\n              case 8: {\n                return `${memo} ${character}`\n              }\n              default: {\n                return `${memo}${character}`\n              }\n            }\n          }, ''),\n        )\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (((isDirty || displayValidationMessage) &&\n      !!validationMessage &&\n      !isLoading) ||\n      error) &&\n    !isLookingUp\n\n  return (\n    <div className=\"cypress-abn-element\">\n      <FormElementLabelContainer\n        className=\"ob-abn\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div\n            className={clsx('control is-expanded', {\n              'is-loading': isLoading,\n            })}\n          >\n            <InputMask\n              mask={isFocused || value ? '99 999 999 999' : '999 999 999'}\n              maskChar=\" \"\n              type=\"text\"\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-abn-control\"\n              placeholder={element.placeholderValue}\n              value={label}\n              onChange={(e) => {\n                setLabel(e.target.value)\n                if (value) {\n                  onChange(element, {\n                    value: undefined,\n                  })\n                }\n              }}\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={() => {\n                setIsDirty()\n                removeFocus()\n              }}\n              onFocus={setIsFocused}\n              aria-describedby={ariaDescribedby}\n            />\n          </div>\n          {value && (\n            <div className=\"control ob-abn__record-control\">\n              <a className=\"button is-static ob-abn__record-button\">\n                {abnService.displayBusinessNameFromABNRecord(value)}\n              </a>\n            </div>\n          )}\n          {!!element.readOnly && !!value && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={label}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {error?.message || validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementABN)\n"]}
+{"version":3,"file":"FormElementABN.js","sourceRoot":"","sources":["../../src/form-elements/FormElementABN.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport InputMask from 'react-input-mask'\nimport { parseString } from 'xml2js'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, MiscTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useAbnLookupAuthenticationGuid from '../hooks/useAbnLookupAuthenticationGuid'\nimport { abnService } from '@oneblink/sdk-core'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n  id: string\n  element: FormTypes.ABNElement\n  value: MiscTypes.ABNRecord | undefined\n  onChange: FormElementValueChangeHandler<MiscTypes.ABNRecord>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementABN({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const abnLookupAuthenticationGuid = useAbnLookupAuthenticationGuid()\n  const [label, setLabel] = React.useState(\n    value ? abnService.getABNNumberFromABNRecord(value) || '' : '',\n  )\n  const [isFocused, setIsFocused, removeFocus] = useBooleanState(false)\n  const [{ isLoading, error }, setState] = React.useState<{\n    isLoading: boolean\n    error: Error | null\n  }>({\n    isLoading: false,\n    error: null,\n  })\n\n  React.useEffect(() => {\n    const searchString = label.replace(/[^\\d]/g, '')\n    const isSearchStringValid =\n      searchString.length === 11 || (searchString.length === 9 && !isFocused)\n\n    const currentABNNumber = value\n      ? abnService.getABNNumberFromABNRecord(value)\n      : ''\n    if (!isSearchStringValid || currentABNNumber === searchString) {\n      return\n    }\n\n    setState({\n      isLoading: true,\n      error: null,\n    })\n\n    const abortController = new AbortController()\n    const fetchRecord = async () => {\n      try {\n        const urlSearchParams = new URLSearchParams()\n        urlSearchParams.append('searchString', searchString)\n        urlSearchParams.append('includeHistoricalDetails', 'N')\n        if (abnLookupAuthenticationGuid) {\n          urlSearchParams.append(\n            'authenticationGuid',\n            abnLookupAuthenticationGuid,\n          )\n        }\n\n        const url =\n          searchString.length === 11\n            ? 'https://abr.business.gov.au/abrxmlsearch/AbrXmlSearch.asmx/SearchByABNv202001'\n            : 'https://abr.business.gov.au/abrxmlsearch/AbrXmlSearch.asmx/SearchByASICv201408'\n        const response = await fetch(`${url}?${urlSearchParams.toString()}`, {\n          mode: 'cors',\n          signal: abortController.signal,\n        })\n        const text = await response.text()\n        if (!response.ok) {\n          throw new Error(text)\n        }\n\n        const result = await new Promise<{\n          ABRPayloadSearchResults: {\n            response: {\n              businessEntity201408?: MiscTypes.ABNRecord\n              businessEntity202001: MiscTypes.ABNRecord\n              exception?: {\n                exceptionDescription: string\n                exceptionCode: string\n              }\n            }\n          }\n        }>((resolve, reject) => {\n          parseString(\n            text,\n            {\n              explicitArray: false,\n            },\n            (err, result) => {\n              if (err) {\n                reject(err)\n              } else {\n                resolve(result)\n              }\n            },\n          )\n        })\n        if (result.ABRPayloadSearchResults.response.exception) {\n          throw new Error(\n            result.ABRPayloadSearchResults.response.exception.exceptionDescription,\n          )\n        }\n\n        if (result.ABRPayloadSearchResults.response.businessEntity201408) {\n          result.ABRPayloadSearchResults.response.businessEntity202001 =\n            result.ABRPayloadSearchResults.response.businessEntity201408\n        }\n\n        if (\n          !Array.isArray(\n            result.ABRPayloadSearchResults.response.businessEntity202001\n              .businessName,\n          )\n        ) {\n          result.ABRPayloadSearchResults.response.businessEntity202001.businessName =\n            [\n              result.ABRPayloadSearchResults.response.businessEntity202001\n                .businessName,\n            ]\n        }\n\n        if (!abortController.signal.aborted) {\n          onChange(element, {\n            value: result.ABRPayloadSearchResults.response.businessEntity202001,\n          })\n          setState({\n            isLoading: false,\n            error: null,\n          })\n        }\n      } catch (err) {\n        if (!abortController.signal.aborted) {\n          setState({\n            isLoading: false,\n            error: err as Error,\n          })\n        }\n      }\n    }\n\n    fetchRecord()\n\n    return () => {\n      abortController.abort()\n    }\n  }, [abnLookupAuthenticationGuid, element, isFocused, label, onChange, value])\n\n  // Ensure the label is set if the value is set outside of this component\n  React.useEffect(() => {\n    if (value) {\n      const newLabel = abnService.getABNNumberFromABNRecord(value)\n      if (!newLabel) {\n        // Record in value had no ABN Number. This should never happen\n        return\n      }\n      if (label !== newLabel) {\n        setLabel(\n          newLabel.split('').reduce((memo, character, index) => {\n            switch (index) {\n              case 2:\n              case 5:\n              case 8: {\n                return `${memo} ${character}`\n              }\n              default: {\n                return `${memo}${character}`\n              }\n            }\n          }, ''),\n        )\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (((isDirty || displayValidationMessage) &&\n      !!validationMessage &&\n      !isLoading) ||\n      error) &&\n    !isLookingUp\n\n  const hasCopyButton = !!value && !!element.readOnly\n  const hasLookupButton = element.isDataLookup || element.isElementLookup\n  return (\n    <div className=\"cypress-abn-element\">\n      <FormElementLabelContainer\n        className=\"ob-abn\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div\n          className={clsx('field has-addons', {\n            'no-addons-mobile': !hasCopyButton && !hasLookupButton,\n          })}\n        >\n          <div\n            className={clsx('control is-expanded', {\n              'is-loading': isLoading,\n            })}\n          >\n            <InputMask\n              mask={isFocused || value ? '99 999 999 999' : '999 999 999'}\n              maskChar=\" \"\n              type=\"text\"\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-abn-control\"\n              placeholder={element.placeholderValue}\n              value={label}\n              onChange={(e) => {\n                setLabel(e.target.value)\n                if (value) {\n                  onChange(element, {\n                    value: undefined,\n                  })\n                }\n              }}\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={() => {\n                setIsDirty()\n                removeFocus()\n              }}\n              onFocus={setIsFocused}\n              aria-describedby={ariaDescribedby}\n            />\n          </div>\n          {value && (\n            <ABNDisplay abnRecord={value} className=\"ob-abn__display-desktop\" />\n          )}\n          {hasCopyButton && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={label}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n        {value && (\n          <ABNDisplay abnRecord={value} className=\"ob-abn__display-mobile\" />\n        )}\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {error?.message || validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementABN)\n\nconst ABNDisplay = ({\n  abnRecord,\n  className,\n}: {\n  abnRecord: MiscTypes.ABNRecord\n  className: string\n}) => {\n  return (\n    <div className={`control ob-abn__record-control ${className}`}>\n      <a className=\"button is-static ob-abn__record-button\">\n        {abnService.displayBusinessNameFromABNRecord(abnRecord)}\n      </a>\n    </div>\n  )\n}\n"]}

package/dist/form-elements/FormElementBSB.js

@@ -80,9 +80,13 @@ function FormElementBSB({ id, formId, element, value, onChange, validationMessag
         !isLoading) ||
         errorMessage) &&
         !isLookingUp;
+    const hasCopyButton = !!value && !!element.readOnly;
+    const hasLookupButton = element.isDataLookup || element.isElementLookup;
     return (React.createElement("div", { className: "cypress-bsb-element" },
         React.createElement(FormElementLabelContainer, { className: "ob-bsb", id: id, element: element, required: element.required },
-            React.createElement("div", { className: "field has-addons" },
+            React.createElement("div", { className: clsx('field has-addons', {
+                    'no-addons-mobile': !hasCopyButton && !hasLookupButton,
+                }) },
                 React.createElement("div", { className: clsx('control is-expanded', {
                         'is-loading': isLoading,
                     }) },
@@ -96,16 +100,20 @@ function FormElementBSB({ id, formId, element, value, onChange, validationMessag
                             }
                             setIsDirty();
                         }, "aria-describedby": ariaDescribedby })),
-                bsbRecord && (React.createElement("div", { className: "control ob-bsb__record-control" },
-                    React.createElement("a", { className: "button is-static ob-bsb__record-button" },
-                        bsbRecord.financialInstitutionMnemonic,
-                        " - ",
-                        bsbRecord.name))),
-                !!element.readOnly && !!value && (React.createElement("div", { className: "control" },
+                bsbRecord && (React.createElement(BSBDisplay, { bsbRecord: bsbRecord, className: "ob-bsb__display-desktop" })),
+                hasCopyButton && (React.createElement("div", { className: "control" },
                     React.createElement(CopyToClipboardButton, { className: "button is-input-addon copy-button cypress-copy-to-clipboard-button", text: text }))),
                 React.createElement(LookupButton, { isInputButton: true, value: value, validationMessage: validationMessage, lookupButtonConfig: element.lookupButton })),
+            bsbRecord && (React.createElement(BSBDisplay, { bsbRecord: bsbRecord, className: "ob-bsb__display-mobile" })),
             isDisplayingValidationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
                 React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, errorMessage || validationMessage))))));
 }
+const BSBDisplay = ({ bsbRecord, className, }) => {
+    return (React.createElement("div", { className: `control ob-bsb__record-control ${className}` },
+        React.createElement("a", { className: "button is-static ob-bsb__record-button" },
+            bsbRecord.financialInstitutionMnemonic,
+            " - ",
+            bsbRecord.name)));
+};
 export default React.memo(FormElementBSB);
 //# sourceMappingURL=FormElementBSB.js.map

package/dist/form-elements/FormElementBSB.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementBSB.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBSB.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAExF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAc1E,SAAS,cAAc,CAAC,EACtB,EAAE,EACF,MAAM,EACN,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IAC9E,MAAM,aAAa,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAE9C,MAAM,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAItE;QACD,SAAS,EAAE,KAAK;QAChB,YAAY,EAAE,IAAI;QAClB,SAAS,EAAE,IAAI;KAChB,CAAC,CAAA;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,SAAS,EAAE;YACb,QAAQ,CAAC,OAAO,EAAE;gBAChB,KAAK,EAAE,SAAS,CAAC,GAAG;aACrB,CAAC,CAAA;SACH;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;IAEzC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,IAAI,KAAK,EAAE,EAAE;YACf,OAAM;SACP;QAED,IAAI,CAAC,aAAa,EAAE;YAClB,QAAQ,CAAC;gBACP,SAAS,EAAE,KAAK;gBAChB,YAAY,EAAE,IAAI;gBAClB,SAAS,EAAE,IAAI;aAChB,CAAC,CAAA;YACF,OAAM;SACP;QAED,QAAQ,CAAC;YACP,SAAS,EAAE,IAAI;YACf,YAAY,EAAE,IAAI;YAClB,SAAS,EAAE,IAAI;SAChB,CAAC,CAAA;QAEF,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE,CAAA;QAC7C,MAAM,YAAY,GAAG,KAAK,IAAI,EAAE;YAC9B,QAAQ,CAAC,OAAO,EAAE;gBAChB,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE;aAChD,CAAC,CAAA;YACF,IAAI;gBACF,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC,YAAY,CAC9C,MAAM,EACN,IAAI,EACJ,eAAe,CAAC,MAAM,CACvB,CAAA;gBACD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,EAAE;oBACnC,QAAQ,CAAC;wBACP,SAAS,EAAE,KAAK;wBAChB,YAAY,EAAE,IAAI;wBAClB,SAAS;qBACV,CAAC,CAAA;iBACH;aACF;YAAC,OAAO,KAAK,EAAE;gBACd,OAAO,CAAC,IAAI,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAA;gBAClD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,EAAE;oBACnC,QAAQ,CAAC,OAAO,EAAE;wBAChB,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE;qBAChD,CAAC,CAAA;oBACF,QAAQ,CAAC;wBACP,SAAS,EAAE,KAAK;wBAChB,YAAY,EAAE,mBAAmB,IAAI,kBAAkB;wBACvD,SAAS,EAAE,IAAI;qBAChB,CAAC,CAAA;iBACH;aACF;QACH,CAAC,CAAA;QAED,YAAY,EAAE,CAAA;QAEd,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,KAAK,EAAE,CAAA;QACzB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAA;IAEpD,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACnE,MAAM,6BAA6B,GACjC,CAAC,CAAC,CAAC,OAAO,IAAI,wBAAwB,CAAC;QACrC,CAAC,CAAC,iBAAiB;QACnB,CAAC,SAAS,CAAC;QACX,YAAY,CAAC;QACf,CAAC,WAAW,CAAA;IAEd,OAAO,CACL,6BAAK,SAAS,EAAC,qBAAqB;QAClC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BACE,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE;wBACrC,YAAY,EAAE,SAAS;qBACxB,CAAC;oBAEF,oBAAC,SAAS,IACR,IAAI,EAAC,SAAS,EACd,QAAQ,EAAC,GAAG,EACZ,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,oCAAoC,EAC9C,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;4BACd,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;wBACzB,CAAC,EACD,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,GAAG,EAAE;4BACX,IAAI,IAAI,KAAK,SAAS,EAAE;gCACtB,QAAQ,CAAC,OAAO,EAAE;oCAChB,KAAK,EAAE,SAAS;iCACjB,CAAC,CAAA;6BACH;4BACD,UAAU,EAAE,CAAA;wBACd,CAAC,sBACiB,eAAe,GACjC,CACE;gBACL,SAAS,IAAI,CACZ,6BAAK,SAAS,EAAC,gCAAgC;oBAC7C,2BAAG,SAAS,EAAC,wCAAwC;wBAClD,SAAS,CAAC,4BAA4B;;wBAAK,SAAS,CAAC,IAAI,CACxD,CACA,CACP;gBACA,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAChC,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,OAAO,CAAC,YAAY,GACxC,CACE;YACL,6BAA6B,IAAI,CAChC,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,YAAY,IAAI,iBAAiB,CAC9B,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport InputMask from 'react-input-mask'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, MiscTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { formService } from '@oneblink/apps'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n  id: string\n  formId: number\n  element: FormTypes.BSBElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<\n    string | { isInvalid: boolean; isValidating: boolean }\n  >\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementBSB({\n  id,\n  formId,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [text, setText] = React.useState(typeof value === 'string' ? value : '')\n  const isValidFormat = /\\d{3}-\\d{3}/.test(text)\n\n  const [{ isLoading, errorMessage, bsbRecord }, setState] = React.useState<{\n    isLoading: boolean\n    errorMessage: string | null\n    bsbRecord: MiscTypes.BSBRecord | null\n  }>({\n    isLoading: false,\n    errorMessage: null,\n    bsbRecord: null,\n  })\n\n  React.useEffect(() => {\n    if (bsbRecord) {\n      onChange(element, {\n        value: bsbRecord.bsb,\n      })\n    }\n  }, [bsbRecord, element, onChange, value])\n\n  React.useEffect(() => {\n    if (text === '') {\n      return\n    }\n\n    if (!isValidFormat) {\n      setState({\n        isLoading: false,\n        errorMessage: null,\n        bsbRecord: null,\n      })\n      return\n    }\n\n    setState({\n      isLoading: true,\n      errorMessage: null,\n      bsbRecord: null,\n    })\n\n    const abortController = new AbortController()\n    const getBSBRecord = async () => {\n      onChange(element, {\n        value: { isValidating: true, isInvalid: false },\n      })\n      try {\n        const bsbRecord = await formService.getBSBRecord(\n          formId,\n          text,\n          abortController.signal,\n        )\n        if (!abortController.signal.aborted) {\n          setState({\n            isLoading: false,\n            errorMessage: null,\n            bsbRecord,\n          })\n        }\n      } catch (error) {\n        console.warn('Error validating BSB number', error)\n        if (!abortController.signal.aborted) {\n          onChange(element, {\n            value: { isInvalid: true, isValidating: false },\n          })\n          setState({\n            isLoading: false,\n            errorMessage: `The BSB number \"${text}\" does not exist`,\n            bsbRecord: null,\n          })\n        }\n      }\n    }\n\n    getBSBRecord()\n\n    return () => {\n      abortController.abort()\n    }\n  }, [formId, isValidFormat, text, onChange, element])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (((isDirty || displayValidationMessage) &&\n      !!validationMessage &&\n      !isLoading) ||\n      errorMessage) &&\n    !isLookingUp\n\n  return (\n    <div className=\"cypress-bsb-element\">\n      <FormElementLabelContainer\n        className=\"ob-bsb\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div\n            className={clsx('control is-expanded', {\n              'is-loading': isLoading,\n            })}\n          >\n            <InputMask\n              mask=\"999-999\"\n              maskChar=\"x\"\n              type=\"text\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-bsb-control\"\n              value={text}\n              onChange={(e) => {\n                setText(e.target.value)\n              }}\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={() => {\n                if (text === 'xxx-xxx') {\n                  onChange(element, {\n                    value: undefined,\n                  })\n                }\n                setIsDirty()\n              }}\n              aria-describedby={ariaDescribedby}\n            />\n          </div>\n          {bsbRecord && (\n            <div className=\"control ob-bsb__record-control\">\n              <a className=\"button is-static ob-bsb__record-button\">\n                {bsbRecord.financialInstitutionMnemonic} - {bsbRecord.name}\n              </a>\n            </div>\n          )}\n          {!!element.readOnly && !!value && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {errorMessage || validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementBSB)\n"]}
+{"version":3,"file":"FormElementBSB.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBSB.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport InputMask from 'react-input-mask'\nimport clsx from 'clsx'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes, MiscTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport { formService } from '@oneblink/apps'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n  id: string\n  formId: number\n  element: FormTypes.BSBElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<\n    string | { isInvalid: boolean; isValidating: boolean }\n  >\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementBSB({\n  id,\n  formId,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [text, setText] = React.useState(typeof value === 'string' ? value : '')\n  const isValidFormat = /\\d{3}-\\d{3}/.test(text)\n\n  const [{ isLoading, errorMessage, bsbRecord }, setState] = React.useState<{\n    isLoading: boolean\n    errorMessage: string | null\n    bsbRecord: MiscTypes.BSBRecord | null\n  }>({\n    isLoading: false,\n    errorMessage: null,\n    bsbRecord: null,\n  })\n\n  React.useEffect(() => {\n    if (bsbRecord) {\n      onChange(element, {\n        value: bsbRecord.bsb,\n      })\n    }\n  }, [bsbRecord, element, onChange, value])\n\n  React.useEffect(() => {\n    if (text === '') {\n      return\n    }\n\n    if (!isValidFormat) {\n      setState({\n        isLoading: false,\n        errorMessage: null,\n        bsbRecord: null,\n      })\n      return\n    }\n\n    setState({\n      isLoading: true,\n      errorMessage: null,\n      bsbRecord: null,\n    })\n\n    const abortController = new AbortController()\n    const getBSBRecord = async () => {\n      onChange(element, {\n        value: { isValidating: true, isInvalid: false },\n      })\n      try {\n        const bsbRecord = await formService.getBSBRecord(\n          formId,\n          text,\n          abortController.signal,\n        )\n        if (!abortController.signal.aborted) {\n          setState({\n            isLoading: false,\n            errorMessage: null,\n            bsbRecord,\n          })\n        }\n      } catch (error) {\n        console.warn('Error validating BSB number', error)\n        if (!abortController.signal.aborted) {\n          onChange(element, {\n            value: { isInvalid: true, isValidating: false },\n          })\n          setState({\n            isLoading: false,\n            errorMessage: `The BSB number \"${text}\" does not exist`,\n            bsbRecord: null,\n          })\n        }\n      }\n    }\n\n    getBSBRecord()\n\n    return () => {\n      abortController.abort()\n    }\n  }, [formId, isValidFormat, text, onChange, element])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (((isDirty || displayValidationMessage) &&\n      !!validationMessage &&\n      !isLoading) ||\n      errorMessage) &&\n    !isLookingUp\n\n  const hasCopyButton = !!value && !!element.readOnly\n  const hasLookupButton = element.isDataLookup || element.isElementLookup\n  return (\n    <div className=\"cypress-bsb-element\">\n      <FormElementLabelContainer\n        className=\"ob-bsb\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div\n          className={clsx('field has-addons', {\n            'no-addons-mobile': !hasCopyButton && !hasLookupButton,\n          })}\n        >\n          <div\n            className={clsx('control is-expanded', {\n              'is-loading': isLoading,\n            })}\n          >\n            <InputMask\n              mask=\"999-999\"\n              maskChar=\"x\"\n              type=\"text\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-bsb-control\"\n              value={text}\n              onChange={(e) => {\n                setText(e.target.value)\n              }}\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={() => {\n                if (text === 'xxx-xxx') {\n                  onChange(element, {\n                    value: undefined,\n                  })\n                }\n                setIsDirty()\n              }}\n              aria-describedby={ariaDescribedby}\n            />\n          </div>\n          {bsbRecord && (\n            <BSBDisplay\n              bsbRecord={bsbRecord}\n              className=\"ob-bsb__display-desktop\"\n            />\n          )}\n          {hasCopyButton && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n          />\n        </div>\n        {bsbRecord && (\n          <BSBDisplay\n            bsbRecord={bsbRecord}\n            className=\"ob-bsb__display-mobile\"\n          />\n        )}\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {errorMessage || validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nconst BSBDisplay = ({\n  bsbRecord,\n  className,\n}: {\n  bsbRecord: MiscTypes.BSBRecord\n  className: string\n}) => {\n  return (\n    <div className={`control ob-bsb__record-control ${className}`}>\n      <a className=\"button is-static ob-bsb__record-button\">\n        {bsbRecord.financialInstitutionMnemonic} - {bsbRecord.name}\n      </a>\n    </div>\n  )\n}\nexport default React.memo(FormElementBSB)\n"]}

package/dist/styles/abn.scss

@@ -0,0 +1,48 @@
+.ob-abn__display-mobile {
+  display: none;
+  @media only screen and (max-width: $mobile) {
+    display: block;
+  }
+
+  .ob-abn__record-button {
+    border-top: 0px;
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    width: 100%;
+  }
+}
+
+.ob-abn__display-desktop {
+  @media only screen and (max-width: $mobile) {
+    display: none;
+  }
+}
+
+.ob-abn .field .control:first-child .input {
+  @media only screen and (max-width: $mobile) {
+    border-bottom-left-radius: 0px;
+  }
+}
+
+/** Styles copy or lookup button */
+.ob-abn .field .control:last-child .button {
+  @media only screen and (max-width: $mobile) {
+    border-bottom-right-radius: 0px;
+  }
+}
+
+/** Styles input field when there are no copy or lookup buttons */
+.ob-abn
+  .field.has-addons.no-addons-mobile
+  .control:first-child:not(:only-child)
+  .input {
+  @media only screen and (max-width: $mobile) {
+    border-top-right-radius: 4px;
+  }
+}
+
+.field.no-addons-mobile .control:not(:last-child) {
+  @media only screen and (max-width: $mobile) {
+    margin-right: 0px;
+  }
+}

package/dist/styles/bsb.scss

@@ -8,3 +8,52 @@
   text-overflow: ellipsis;
   display: block;
 }
+
+.ob-bsb__display-mobile {
+  display: none;
+  @media only screen and (max-width: $mobile) {
+    display: block;
+  }
+
+  .ob-bsb__record-button {
+    border-top: 0px;
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    width: 100%;
+  }
+}
+
+.ob-bsb__display-desktop {
+  @media only screen and (max-width: $mobile) {
+    display: none;
+  }
+}
+
+.ob-bsb .field .control:first-child .input {
+  @media only screen and (max-width: $mobile) {
+    border-bottom-left-radius: 0px;
+  }
+}
+
+/** Styles copy or lookup button */
+.ob-bsb .field .control:last-child .button {
+  @media only screen and (max-width: $mobile) {
+    border-bottom-right-radius: 0px;
+  }
+}
+
+/** Styles input field when there are no copy or lookup buttons */
+.ob-bsb
+  .field.has-addons.no-addons-mobile
+  .control:first-child:not(:only-child)
+  .input {
+  @media only screen and (max-width: $mobile) {
+    border-top-right-radius: 4px;
+  }
+}
+
+.field.no-addons-mobile .control:not(:last-child) {
+  @media only screen and (max-width: $mobile) {
+    margin-right: 0px;
+  }
+}

package/dist/styles.css

@@ -9505,6 +9505,53 @@ textarea:disabled {
   display: block;
 }
 
+.ob-bsb__display-mobile {
+  display: none;
+}
+@media only screen and (max-width: 768px) {
+  .ob-bsb__display-mobile {
+    display: block;
+  }
+}
+.ob-bsb__display-mobile .ob-bsb__record-button {
+  border-top: 0px;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  width: 100%;
+}
+
+@media only screen and (max-width: 768px) {
+  .ob-bsb__display-desktop {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .ob-bsb .field .control:first-child .input {
+    border-bottom-left-radius: 0px;
+  }
+}
+
+/** Styles copy or lookup button */
+@media only screen and (max-width: 768px) {
+  .ob-bsb .field .control:last-child .button {
+    border-bottom-right-radius: 0px;
+  }
+}
+
+/** Styles input field when there are no copy or lookup buttons */
+@media only screen and (max-width: 768px) {
+  .ob-bsb .field.has-addons.no-addons-mobile .control:first-child:not(:only-child) .input {
+    border-top-right-radius: 4px;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .field.no-addons-mobile .control:not(:last-child) {
+    margin-right: 0px;
+  }
+}
+
 .ob-progress__attachment-wrapper .ob-progress__attachment-bar {
   position: absolute;
   bottom: 0;
@@ -9711,6 +9758,53 @@ textarea:disabled {
   height: 500px;
 }
 
+.ob-abn__display-mobile {
+  display: none;
+}
+@media only screen and (max-width: 768px) {
+  .ob-abn__display-mobile {
+    display: block;
+  }
+}
+.ob-abn__display-mobile .ob-abn__record-button {
+  border-top: 0px;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  width: 100%;
+}
+
+@media only screen and (max-width: 768px) {
+  .ob-abn__display-desktop {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .ob-abn .field .control:first-child .input {
+    border-bottom-left-radius: 0px;
+  }
+}
+
+/** Styles copy or lookup button */
+@media only screen and (max-width: 768px) {
+  .ob-abn .field .control:last-child .button {
+    border-bottom-right-radius: 0px;
+  }
+}
+
+/** Styles input field when there are no copy or lookup buttons */
+@media only screen and (max-width: 768px) {
+  .ob-abn .field.has-addons.no-addons-mobile .control:first-child:not(:only-child) .input {
+    border-top-right-radius: 4px;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .field.no-addons-mobile .control:not(:last-child) {
+    margin-right: 0px;
+  }
+}
+
 .flatpickr-calendar {
   background: transparent;
   opacity: 0;

package/dist/styles.scss

@@ -140,6 +140,7 @@ $section-padding-mobile: $section-padding-mobile-y $section-padding-mobile-x;
 @import './styles/westpac-payment.scss';
 @import './styles/api-nsw-liquor-licence.scss';
 @import './styles/arcgis-web-map.scss';
+@import './styles/abn.scss';
 //
 // Third Party
 //

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "6.2.0-beta.4",
+  "version": "6.2.0",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"
@@ -46,7 +46,7 @@
     "@mui/lab": "^5.0.0-alpha.152",
     "@mui/material": "^5.15.6",
     "@mui/x-date-pickers": "^6.19.2",
-    "@oneblink/apps": "^13.0.0-beta.4",
+    "@oneblink/apps": "^13.0.0-beta.5",
     "@oneblink/release-cli": "^3.2.1",
     "@oneblink/types": "github:oneblink/types",
     "@types/blueimp-load-image": "^5.16.6",