\n {\n const result = checkValue(v);\n if (result) {\n return result;\n } else {\n return true;\n }\n },\n },\n }}\n render={({ field: { value, onChange } }) => (\n
\n );\n};\n\nexport default DateField;\n","import React, { useEffect } from \"react\";\nimport { Controller } from \"react-hook-form\";\nimport { FieldProp } from \"../model/FieldProp\";\nimport { DateTimeModel } from \"../../../businessFoundation/Primitives/DateTimeManage/DateTimeModel\";\nimport { TextField } from \"@episerver/ui-framework\";\n\nconst DateTimeField: React.FC\n
}\n \n {errors.extendedProperties ? errors.extendedProperties[index]?.value?.message ?? \"\" : \"\"}\n
\n\n \n \n
\n );\n }\n\n return CustomersApp;\n} \n\n\nexport const Contacts = getCustomersApp(CustomersType.Contacts);\nexport const Organizations = getCustomersApp(CustomersType.Organizations);\nexport const Users = getCustomersApp(CustomersType.Users);\nexport const Accounts = getCustomersApp(CustomersType.Accounts);\n","import { createSelector, createSlice } from \"@reduxjs/toolkit\";\nimport { RootState } from \"../store\";\n\nexport const initialAdminInfo = {\n readOnly: false\n};\n\nexport const adminInfoSlice = createSlice({\n name: \"adminInfo\",\n initialState: initialAdminInfo,\n reducers: {\n setReadOnly: (state, action): void => {\n state.readOnly = action.payload;\n }\n }\n});\n\nexport const { setReadOnly } = adminInfoSlice.actions;\n\nexport const readOnlySelector = createSelector(\n (state: RootState): boolean => state.adminInfo.readOnly,\n (readOnly: boolean) => readOnly\n);","import { configureStore, combineReducers } from \"@reduxjs/toolkit\";\nimport { addressFormSlice } from \"./AddressManager/reducers/addressFormReducer\";\nimport { addressListSlice } from \"./AddressManager/reducers/addressListReducer\";\nimport { contactDetailSlice } from \"./ContactManager/reducers/contactDetailReducer\";\nimport { contactListSlice } from \"./ContactManager/reducers/contactListReducer\";\nimport { userAccountAssignmentsSlice } from \"./ContactManager/reducers/userAccountAssignmentsReducer\";\nimport { addAssignmentsToUserSlice } from \"./ContactManager/reducers/addAssignmentsToUserReducer\";\nimport { contactNoteManagerSlice } from \"./ContactNoteManager/reducers/contactNoteManagerReducer\";\nimport { enumFormSlice } from \"./EnumManager/reducers/enumFormReducer\";\nimport { enumManagerSlice } from \"./EnumManager/reducers/enumManagerReducer\";\nimport { addChildOrganizationsSlice } from \"./OrganizationManager/reducers/addChildOrganizationsReducer\";\nimport { addContactsToOrganizationSlice } from \"./OrganizationManager/reducers/addContactsToOrganizationReducer\";\nimport { childOrganizationListSlice } from \"./OrganizationManager/reducers/childOrganizationListReducer\";\nimport { contactListInOrganizationSlice } from \"./OrganizationManager/reducers/contactListInOrganizationReducer\";\nimport { organizationDetailSlice } from \"./OrganizationManager/reducers/organizationDetailReducer\";\nimport { organizationListSlice } from \"./OrganizationManager/reducers/organizationListReducer\";\nimport { adminInfoSlice } from \"./AdminInfo/adminInfoReducer\";\n\n\nconst reducer = combineReducers({\n contactList: contactListSlice.reducer,\n contactDetail: contactDetailSlice.reducer,\n contactNoteManager: contactNoteManagerSlice.reducer,\n enumManager: enumManagerSlice.reducer,\n enumForm: enumFormSlice.reducer,\n addressList: addressListSlice.reducer,\n addressForm: addressFormSlice.reducer,\n organizationList: organizationListSlice.reducer,\n organizationDetail: organizationDetailSlice.reducer,\n childOrganizationList: childOrganizationListSlice.reducer,\n addChildOrganizations: addChildOrganizationsSlice.reducer,\n addContactsToOrganization: addContactsToOrganizationSlice.reducer,\n contactListInOrganization: contactListInOrganizationSlice.reducer,\n userAccountAssignments: userAccountAssignmentsSlice.reducer,\n addAssignmentsToUser: addAssignmentsToUserSlice.reducer,\n adminInfo: adminInfoSlice.reducer,\n});\n\nconst store = (readOnly: boolean) => {\n var store = configureStore({\n reducer,\n preloadedState: {\n adminInfo: {\n readOnly\n }\n }\n });\n return store;\n};\n\nexport type AppDispatch = ReturnType\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n - \n
\n {!inTab && (\n \n
\n \n )}\n \n \n {!readOnly &&\n \n dispatch(\n onOpenDialog({\n form: {\n open: true,\n title: \"Add an address\",\n address: {\n ...initialAddressFormState.form.address,\n [inView === InView.Organization ? \"organizationId\" : \"contactId\"]: viewId,\n primaryKeyId: \"00000000-0000-0000-0000-000000000000\",\n isNew: true,\n idx: addresses.length\n },\n extendedPropertyErrors: [],\n },\n })\n )\n }\n >\n Create\n \n }\n \n \n \n \n \n {columns.map((column, index) => {\n return (\n {column.title} \n );\n })}\n \n \n \n {addresses.map((row: Address, index: number) => {\n if (\n index < startRow ||\n index >= startRow + rowsPerPage ||\n row.primaryKeyId == \"00000000-0000-0000-0000-000000000000\"\n ) {\n return \n \n dispatch(onChangeAddressPage(startRow))}\n onChangeRowsPerPage={(rowsPerPage) => dispatch(onChangeAddressRowPerPage(rowsPerPage))}\n />\n \n {!inTab && (\n \n
\n
\n \n )}\n\n {/* Delete dialog */}\n {\n if (e.detail.action === \"confirm\") onDelete();\n else onCancel();\n }}\n >\n \n \n \n
\n );\n};\n\nexport default AddressList;\n","import React, { Fragment, useEffect } from \"react\";\nimport { useAppDispatch, useAppSelector } from \"../../hooks\";\nimport {\n DataTable,\n DataTableBody,\n DataTableCell,\n DataTableCheckboxCell,\n DataTableColumnHeaderCell,\n DataTableContent,\n DataTableHeaderCheckboxCell,\n DataTableHeaderRow,\n DataTableOverflowMenuCell,\n DataTablePagination,\n DataTableRow,\n DataTableToolbar,\n Dialog,\n GridCell,\n GridRow,\n List,\n ListItem,\n TextButton,\n TextField,\n Typography,\n} from \"@episerver/ui-framework\";\nimport { ContactNote } from \"../model/ContactNote\";\nimport {\n selectedContactNotesSelector,\n contactNoteSelector,\n paginationSelector,\n onChangeContactNotePage,\n onChangeContactNoteRowPerPage,\n dialogStatusSelector,\n onChangeDialogStatus,\n confirmDialogStatusSelector,\n onChangeConfirmDialogStatus,\n selectAllContactNotes,\n deselectAllContactNotes,\n selectContactNote,\n deselectContactNote,\n} from \"../reducers/contactNoteManagerReducer\";\nimport {\n contactSelector,\n onAddOrUpdateContactNote,\n onDeleteContactNote,\n} from \"../../ContactManager/reducers/contactDetailReducer\";\nimport { Controller, useForm } from \"react-hook-form\";\nimport ExtendedProperty from \"../../ExtendedProperty/ExtendedProperty\";\nimport { Property } from \"../../../businessFoundation/MetaClassData/MetaClassDataList/MetaClassDataModel\";\nimport { fetchContactNoteById } from \"../reducers/asyncThunks\";\nimport { useSelector } from \"react-redux\";\nimport { readOnlySelector } from \"../../AdminInfo/adminInfoReducer\";\n\nconst ContactNoteManager = () => {\n const dispatch = useAppDispatch();\n const contact = useAppSelector(contactSelector);\n const selectedContactNotes = useAppSelector(selectedContactNotesSelector);\n const contactNote = useAppSelector(contactNoteSelector);\n const dialogStatus = useAppSelector(dialogStatusSelector);\n const confirmDialogStatus = useAppSelector(confirmDialogStatusSelector);\n const { rowsPerPage, startRow, rowsPerPageOptions, totalRowCount } = useAppSelector(paginationSelector);\n const readOnly = useSelector(readOnlySelector);\n\n const columns: Array<{ selector: string; title: string; sortable: boolean }> = [\n { selector: \"noteTitle\", title: \"Title\", sortable: false },\n { selector: \"noteContent\", title: \"Note Text\", sortable: false },\n { selector: \"contactId\", title: \"Originated By\", sortable: false },\n { selector: \"created\", title: \"Created\", sortable: true },\n { selector: \"\", title: \"\", sortable: false },\n ];\n\n const {\n control,\n watch,\n setValue,\n setError,\n clearErrors,\n trigger,\n reset,\n formState: { errors, isValid, isDirty },\n } = useFormManage Addresses
\n\n
\n
\n
\n history.goBack()}>Back \n
\n {confirmDialog.message}
\n- \n
\n
\n \n {\n setIsOpen(true);\n }}>\n {\"Select parent organization\"}\n \n {\n clearParent();\n }}>\n {\"Clear parent\"}\n \n
\n }\n \n \n \n \n \n \n \n {columns.map((column) => {\n if (column.sortable)\n return (\n \n onSort(column.selector, direction)\n }\n sortDirection={\n defaultSearchParams.sortField !== column.selector ? SortDirection.Ascending :\n defaultSearchParams.sortType === ServerSortType.Asc\n ? SortDirection.Ascending\n : SortDirection.Descending\n }\n >\n {column.title}\n \n );\n return (\n \n {column.title}\n \n );\n })}\n \n \n \n {organizations.map((row: Organization) => {\n return renderRow(row);\n })}\n \n \n {\n const params = defaultSearchParams;\n params.startIndex = startRow === 0 ? 0 : startRow;\n searchOrganizations(params).then((data) => {\n setDefaultSearchParams(params);\n setOrganizations(data.organizations);\n setTotalCount(data.totalRecords);\n });\n }}\n onChangeRowsPerPage={(rowsPerPage: number) => {\n const params = defaultSearchParams;\n params.startIndex = 0;\n params.recordsToRetrieve = rowsPerPage;\n searchOrganizations(params).then((data) => {\n setDefaultSearchParams(params);\n setOrganizations(data.organizations);\n setTotalCount(data.totalRecords);\n });\n }}\n />\n \n {errorOpen && \n \n {error ?? ''}\n \n }\n timeout={-1}\n dismissesOnAction\n onClose={() => { setErrorOpen(false); }}\n action={[\n }\n
\n \n \n \n \n {\n handleSearch(value, rowsPerPage);\n }}\n onSearch={(value: string) => {\n handleSearch(value, rowsPerPage);\n }}\n value={keyword}\n />\n \n \n \n \n {contacts.length > 0 && (\n onToggleAllSelected(e.target.checked)}\n />\n )}\n \n \n {columns.map((column) => {\n if (column.sortable)\n return (\n \n onSort(column.selector, direction)\n }\n sortDirection={\n sortedColumn === column.selector\n ? sortDirection\n : SortDirection.Unsorted\n }\n >\n {column.title}\n \n );\n return (\n \n {column.title}\n \n );\n })}\n \n \n \n {contacts.map((row: Contact) => {\n return renderRow(row);\n })}\n \n \n onChangePage(startRow)}\n onChangeRowsPerPage={(rowsPerPage) => onChangeRowsPerPage(rowsPerPage)}\n />\n \n
\n \n );\n};\n\nexport default AddAssignmentsToUser;\n","import React, {useEffect} from \"react\";\nimport { useAppDispatch, useAppSelector } from \"../../hooks\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport {\n DataTable,\n DataTableBody,\n DataTableCell,\n DataTableColumnHeaderCell,\n DataTableContent,\n DataTableHeaderRow,\n DataTablePagination,\n DataTableRow,\n DataTableToolbar,\n TextButton,\n} from \"@episerver/ui-framework\";\nimport {\n userAccountAssignmentsPaginationSelector,\n onChangeContactPage,\n onChangeContactRowPerPage,\n} from \"../reducers/userAccountAssignmentsReducer\";\nimport { Contact } from \"../../ContactManager/model/contact\";\nimport { useHistory } from \"react-router-dom\";\nimport { onChangeDialog } from \"../reducers/addAssignmentsToUserReducer\";\nimport { userAccountAssignmentsSelector } from \"../reducers/userAccountAssignmentsReducer\";\nimport { fetchUserAccountAssignments } from \"../reducers/asyncThunks\";\nimport { readOnlySelector } from \"../../AdminInfo/adminInfoReducer\";\n\ninterface UserAccountAssignmentsProps {\n userId: string;\n}\n\nconst UserAccountAssignments = (props: UserAccountAssignmentsProps) => {\n const dispatch = useAppDispatch();\n const history = useHistory();\n const Assignments = useSelector(userAccountAssignmentsSelector);\n const { rowsPerPage, startRow, rowsPerPageOptions, totalRowCount } = useSelector(\n userAccountAssignmentsPaginationSelector\n );\n const readOnly = useSelector(readOnlySelector);\n\n useEffect(() => {\n dispatch(fetchUserAccountAssignments(props.userId));\n }, []);\n\n const columns: Array<{ selector: string; title: string; sortable: boolean }> = [\n { selector: \"FullName\", title: \"Full Name\", sortable: true },\n { selector: \"Email\", title: \"Email\", sortable: true },\n { selector: \"LastOrderDate\", title: \"Last Order Date\", sortable: true },\n { selector: \"CustomerGroup\", title: \"Customer Group\", sortable: true },\n ];\n\n const renderRow = (rowData: Contact): React.ReactElement => {\n return (\n \n \n \n \n \n \n \n {columns.map((column) => {\n return (\n \n {column.title}\n \n );\n })}\n \n \n \n {Assignments.map((row: Contact, index: number) => {\n if (index < startRow || index >= startRow + rowsPerPage) {\n return \n \n dispatch(onChangeContactPage(startRow))}\n onChangeRowsPerPage={(rowsPerPage) => dispatch(onChangeContactRowPerPage(rowsPerPage))}\n />\n \n
\n );\n};\n\nexport default UserAccountAssignments;\n","import {\n GridRow,\n GridCell,\n TextButton,\n Breadcrumb,\n List,\n ListItem,\n TabBar,\n Tab,\n Typography,\n TextField,\n ExposedDropdownMenu,\n OverflowMenu,\n Dialog,\n RadioButtonGroup,\n RadioButton,\n} from \"@episerver/ui-framework\";\nimport React, { Fragment, useEffect } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { useHistory, useParams } from \"react-router-dom\";\nimport AddressList from \"../../AddressManager/components/AddressList\";\nimport { Address, InView } from \"../../AddressManager/model/address\";\nimport {\n initialAddressFormState,\n onOpenDialog as onOpenAddressDialog,\n} from \"../../AddressManager/reducers/addressFormReducer\";\nimport { fetchEnumsByType } from \"../../EnumManager/reducers/asyncThunks\";\nimport {\n enumFormTitle,\n initialEnumFormState,\n onOpenDialog as onOpenEnumDialog,\n} from \"../../EnumManager/reducers/enumFormReducer\";\nimport { enumType } from \"../../EnumManager/reducers/enumManagerReducer\";\nimport { Organization } from \"../../OrganizationManager/model/organization\";\nimport { Contact, ContactTab, EnumData, KeyValueOption, ContactType, ContactsType, UserExtendedProps, AccountExtendedProps} from \"../model/contact\";\nimport {\n fetchAddressesByContactId,\n fetchContactById,\n fetchCurrencies,\n fetchLanguages,\n fetchOrganizations,\n updateContact,\n fetchUserByContactId,\n createCustomerAccount,\n fetchTwoFactor,\n resetTwoFactor,\n fetchCmsUserApproved,\n approveCmsUser\n} from \"../reducers/asyncThunks\";\nimport {\n changeTitle,\n setParentId,\n contactSelector,\n contactTitle,\n currenciesSelector,\n customerGroupsSelector,\n languagesSelector,\n organizationsSelector,\n breadcrumbItemsSelector,\n updateBreadcrumb,\n titleSelector,\n activeTabSelector,\n changeActiveTab,\n reset as resetData,\n onChangeProperty,\n onAddAcountDialog,\n customerAccountSelector,\n onChangeAccount,\n errorSelector,\n customerAccountTwoFactorSelector, \n customerAccountTwoFactorSuccessfullyResetSelector,\n setTwoFactorSuccessfullyReset,\n cmsUserApprovedSelector,\n setCmsUserApproved\n} from \"../reducers/contactDetailReducer\";\nimport { useAppDispatch, useAppSelector } from \"../../hooks\";\nimport ContactNoteManager from \"../../ContactNoteManager/components/ContactNoteManager\";\nimport { useState } from \"react\";\nimport { Property } from \"../../../businessFoundation/MetaClassData/MetaClassDataList/MetaClassDataModel\";\nimport { Controller, useForm } from \"react-hook-form\";\nimport { unwrapResult } from \"@reduxjs/toolkit\";\nimport ExtendedProperty from \"../../ExtendedProperty/ExtendedProperty\";\nimport { Snackbar, SnackbarAction } from \"@rmwc/snackbar\";\nimport AddParentOrganization from \"./AddParentOrganization\";\nimport AddAssignmentsToUser from \"./AddAssignmentsToUser\";\nimport UserAccountAssignments from \"./UserAccountAssignments\";\nimport { CCCheckbox } from \"../../CCCheckbox\";\nimport { readOnlySelector } from \"../../AdminInfo/adminInfoReducer\";\n\nexport const limitString = (val: string, num: number) => {\n if (val && val.length > num) {\n return val.substring(0, num) + \"...\";\n } else {\n return val;\n }\n};\n\ninterface ContactDetailProps {\n type: ContactType;\n}\n\nconst ContactDetail = (props: ContactDetailProps) => {\n const dispatch = useAppDispatch();\n const history = useHistory();\n const { contactId } = useParams<{ contactId: string }>();\n const title = useSelector(titleSelector);\n const initialContact = useSelector(contactSelector);\n const languages = useSelector(languagesSelector);\n const customerGroups = useSelector(customerGroupsSelector);\n const currencies = useSelector(currenciesSelector);\n const organizations = useSelector(organizationsSelector);\n const breadcrumbItems = useSelector(breadcrumbItemsSelector);\n const activeTab = useSelector(activeTabSelector);\n const customerAccount = useSelector(customerAccountSelector);\n const [invalidUsername, setInvalidUsername] = useState(false);\n const [invalidUsernameMessage, setInvalidUsernameMessage] = useState(\"\");\n const [invalidEmail, setInvalidEmail] = useState(false);\n const [invalidPassword, setInvalidPassword] = useState(false);\n const [errorMessage, setErrorMessage] = useState(\"\");\n const [errorOpen, setErrorOpen] = useState(false);\n const twoFactorEnabled = useSelector(customerAccountTwoFactorSelector);\n const twoFactorSuccessfullyReset = useSelector(customerAccountTwoFactorSuccessfullyResetSelector);\n const cmsUserApproved = useSelector(cmsUserApprovedSelector);\n const error = useSelector(errorSelector);\n const readOnly = useSelector(readOnlySelector);\n let type = props.type;\n\n if (type === ContactType.Contact && initialContact.customerGroup !== null) {\n switch(initialContact.customerGroup) {\n case \"User\": \n case \"AccountAdmin\":\n type = ContactType.User;\n break;\n case \"Account\":\n type = ContactType.Account;\n break;\n default: break;\n }\n }\n\n const allowedExtendedPropsNames = type === ContactType.Account ? AccountExtendedProps : UserExtendedProps;\n\n const {\n control,\n handleSubmit,\n watch,\n setValue,\n setError,\n clearErrors,\n trigger,\n reset,\n formState: { errors },\n } = useForm\n {!readOnly &&\n \n dispatch(\n onChangeDialog({\n open: true,\n })\n )\n }\n >\n Update\n \n }\n\n
\n \n (\n
\n \n (\n
\n \n (\n
\n \n (\n
\n \n (\n
\n \n ({\n label: limitString(customerGroup.name, 40),\n value: customerGroup.id.toString(),\n }))}\n value={\n values.customerGroupId !== null &&\n customerGroups.filter((x) => x.id.toString() == values.customerGroupId).length >\n 0\n ? values.customerGroupId.toString()\n : \"0\"\n }\n onValueChange={(val: string) => {\n if(!readOnly)\n setValue(\"customerGroupId\", val);\n }}\n readOnly={readOnly}\n />\n
\n {!readOnly &&\n \n \n \n \n
\n }\n \n - \n
\n \n (\n {\n if(!readOnly)\n onChange(props); \n }}\n readOnly={readOnly}\n />\n )}\n />\n
}\n \n \n
\n \n
\n \n \n
\n \n {\n dispatch(\n onAddAcountDialog({\n open: true,\n username: \"\",\n password: \"\",\n description: \"\",\n email: initialContact.email,\n approved: false,\n })\n );\n }}\n >\n Create account\n \n
\n \n {twoFactorEnabled && !readOnly ?\n {\n dispatch(resetTwoFactor(customerAccount.email));\n }}>\n {\"Reset Two Factor\"}\n \n : twoFactorSuccessfullyReset \n ? Two-factor for this user was reset successfully. \n : Not Set\n }\n
\n \n {\n onChangeAccountField(e);\n }}\n readOnly={readOnly}\n />\n
\n \n {\n onChangeAccountField(e);\n }}\n readOnly={readOnly}\n />\n
\n \n \n {\n onChangeRadioButton(e);\n }}\n >\n Yes\n \n {\n onChangeRadioButton(e);\n }}\n >\n No\n \n \n
\n \n
\n
\n {
\n {renderDetails()}\n
}\n {contactId && activeTab === ContactTab.Addresses && renderAddresses()}\n {contactId && activeTab === ContactTab.ContactNote && renderContactNotes()}\n {contactId && activeTab === ContactTab.AccountAssignments && type === ContactType.User && renderAccountAssignments()}\n \n
\n {\n onCancelOrSave();\n history.push(`/${ContactsType[type]}`)\n }}>Cancel \n {!readOnly &&\n {\n onCancelOrSave();\n handleSubmit(onSubmit)();\n }}>\n Save\n \n }\n
\n {errorOpen && \n - \n
\n {ContactsType[props.type]} \n \n \n \n {\n handleSearch(value, rowsPerPage);\n }}\n onSearch={(value: string) => {\n handleSearch(value, rowsPerPage);\n }}\n />\n \n \n \n \n !readOnly && onSelectAll(e)} />\n \n {Object.keys(columns).map((column) => {\n if (columns[column].sortable) {\n return (\n columns[column].visible && (\n \n onSort(columns[column].selector, direction)\n }\n sortDirection={\n sortedColumn === columns[column].selector\n ? sortDirection\n : SortDirection.Unsorted\n }\n >\n {columns[column].name}\n \n )\n );\n } else {\n return (\n columns[column].visible && (\n \n {columns[column].name}\n \n )\n );\n }\n })}\n {\n const changedColumn = Object.keys(columns).find(\n (column) => columns[column].name === columnName\n );\n if (changedColumn) {\n setColumns({\n ...columns,\n [changedColumn]: { ...columns[changedColumn], visible: checked },\n });\n }\n }}\n />\n \n \n \n <>\n {contacts.length == 0 && (\n \n No Contacts found. \n \n )}\n {contacts.map((row: Contact) => renderRow(row))}\n \n \n \n \n {\n if (e.detail.action === \"confirm\") onDelete();\n else onCancel();\n }}\n >\n \n {confirmDialog.message} \n \n \n
\n );\n};\n\nexport default ContactList;\n","import { Dialog, TextField } from \"@episerver/ui-framework\";\nimport { useFormik } from \"formik\";\nimport * as Yup from \"yup\";\nimport React from \"react\";\nimport { useEffect } from \"react\";\nimport { useAppDispatch, useAppSelector } from \"../../hooks\";\nimport { useParams } from \"react-router-dom\";\nimport { fetchEnumsByType, updateEnum } from \"../reducers/asyncThunks\";\nimport {\n formSelector,\n initialEnumFormState,\n onChangeName,\n onChangeType,\n onOpenDialog,\n} from \"../reducers/enumFormReducer\";\nimport { EnumData } from \"../model/Enum\";\n\nconst EnumForm = () => {\n const dispatch = useAppDispatch();\n const { type } = useParams<{ type: string }>();\n const { open, title, enumData } = useAppSelector(formSelector);\n\n useEffect(() => {\n if (type) {\n dispatch(onChangeType(type));\n }\n }, [type]);\n\n const { values, isValid, errors, handleSubmit, setFieldValue, validateForm } = useFormik({\n enableReinitialize: true,\n initialValues: enumData,\n validationSchema: Yup.object({\n name: Yup.string().trim().required(\"*Required\"),\n }),\n onSubmit: async (enumData: EnumData) => {\n dispatch(onOpenDialog(initialEnumFormState));\n await dispatch(updateEnum(enumData));\n dispatch(fetchEnumsByType(enumData.type));\n },\n });\n\n const onChangeTextField = (e: any) => {\n e.persist();\n let { name, value } = e.target;\n setFieldValue(name, value);\n dispatch(onChangeName(value));\n };\n\n useEffect(() => {\n validateForm();\n }, [values]);\n\n return (\n \n {!readOnly && \n \n Create \n {selectedContacts.length > 0 && (\n onConfirmDialog(selectedContacts)}>\n Delete Selected ({selectedContacts.length})\n \n )}\n \n }\n
\n \n
- \n
\n
\n
\n
\n \n history.push({\n pathname: from === \"\" ? window.history.state.from : from,\n state: { from: history.location.pathname, detail: detail ?? window.history.state.detail },\n })\n }\n >\n Back\n \n
\n {confirmDialog.message}
\n- \n
\n Organizations \n \n \n \n {\n handleSearch(value, rowsPerPage);\n }}\n onSearch={(value: string) => {\n handleSearch(value, rowsPerPage);\n }}\n />\n \n \n \n \n !readOnly && onToggleAllSelected(e.target.checked)}\n />\n \n {Object.keys(columns).map((column) => {\n if (columns[column].sortable)\n return (\n columns[column].visible && (\n \n onSort(columns[column].selector, direction)\n }\n sortDirection={\n sortedColumn === columns[column].selector\n ? sortDirection\n : SortDirection.Unsorted\n }\n >\n {columns[column].name}\n \n )\n );\n return (\n columns[column].visible && (\n \n {columns[column].name}\n \n )\n );\n })}\n \n {\n const changedColumn = Object.keys(columns).find(\n (column) => columns[column].name === columnName\n );\n if (changedColumn) {\n setColumns({\n ...columns,\n [changedColumn]: { ...columns[changedColumn], visible: checked },\n });\n }\n }}\n />\n \n \n <>\n {organizations.length == 0 && (\n \n No Organizations found. \n \n )}\n {organizations.map(renderRow)}\n \n \n \n \n {\n if (e.detail.action === \"confirm\") onConfirm(confirmDialog.data.mode);\n else onCancel();\n }}\n >\n \n \n onChangeDeleteMode(DeleteMode.Detach)}\n >\n Delete Organizations Only\n \n onChangeDeleteMode(DeleteMode.Delete)}\n >\n Delete Organizations, Child Organizations and Contacts.\n \n \n \n \n
\n );\n};\n\nexport default OrganizationList;\n","import React, { Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport { useAppDispatch, useAppSelector } from \"../../hooks\";\nimport {\n DataTable,\n DataTableBody,\n DataTableCell,\n DataTableCheckboxCell,\n DataTableColumnHeaderCell,\n DataTableContent,\n DataTableHeaderCheckboxCell,\n DataTableHeaderRow,\n DataTablePagination,\n DataTableRow,\n DataTableToolbar,\n Dialog,\n Search,\n SortDirection,\n} from \"@episerver/ui-framework\";\nimport { Organization, OrganizationSearchResult, SearchParams, ServerSortType } from \"../model/organization\";\nimport { debounce } from \"lodash-es\";\nimport { organizationSelector } from \"../reducers/organizationDetailReducer\";\nimport axios from \"axios\";\nimport { isOpenDialogSelector, onChangeDialog } from \"../reducers/addChildOrganizationsReducer\";\n\n\ninterface AddChildOrganizationsProps {\n addChildren: ((children: Organization[]) => void) | undefined;\n}\n\nconst AddChildOrganizations = (props: AddChildOrganizationsProps) => {\n const dispatch = useAppDispatch();\n const organization = useAppSelector(organizationSelector);\n const [defaultSearchParams, setDefaultSearchParams] = useState\n {!readOnly && \n \n history.push(\"/Organizations/Edit\")}>\n Create\n \n {selectedOrganizations.length > 0 && (\n onDeleteSelected()}>\n Delete Selected ({selectedOrganizations.length})\n \n )}\n \n }\n
\n \n Selected organizations can have related contacts and child organizations. What do you want to\n delete?\n
\n\n \n \n \n \n \n \n {organizations.length > 0 && (\n onToggleAllSelected(e.target.checked)}\n />\n )}\n \n \n {columns.map((column) => {\n if (column.sortable)\n return (\n \n onSort(column.selector, direction)\n }\n sortDirection={\n defaultSearchParams.sortField !== column.selector ? SortDirection.Ascending :\n defaultSearchParams.sortType === ServerSortType.Asc\n ? SortDirection.Ascending\n : SortDirection.Descending\n }\n >\n {column.title}\n \n );\n return (\n \n {column.title}\n \n );\n })}\n \n \n \n {organizations\n .filter((row: Organization) => organization.primaryKeyId != row.primaryKeyId)\n .map((row: Organization) => {\n return renderRow(row);\n })}\n \n \n {\n const params = defaultSearchParams;\n params.startIndex = startRow === 0 ? 0 : startRow;\n searchOrganizations(params).then((data) => {\n setDefaultSearchParams(params);\n setOrganizations(data.organizations);\n setTotalCount(getTotalRecords(data.organizations, data.totalRecords));\n });\n }}\n onChangeRowsPerPage={(rowsPerPage: number) => {\n const params = defaultSearchParams;\n params.startIndex = 0;\n params.recordsToRetrieve = rowsPerPage;\n searchOrganizations(params).then((data) => {\n setDefaultSearchParams(params);\n setOrganizations(data.organizations);\n setTotalCount(getTotalRecords(data.organizations, data.totalRecords));\n });\n }}\n />\n \n
\n \n );\n};\n\nexport default AddChildOrganizations;","import React, { Fragment, useCallback, useEffect, useRef } from \"react\";\nimport { useAppDispatch, useAppSelector } from \"../../hooks\";\nimport {\n DataTable,\n DataTableBody,\n DataTableCell,\n DataTableCheckboxCell,\n DataTableColumnHeaderCell,\n DataTableContent,\n DataTableHeaderCheckboxCell,\n DataTableHeaderRow,\n DataTablePagination,\n DataTableRow,\n DataTableToolbar,\n Dialog,\n Search,\n SortDirection,\n} from \"@episerver/ui-framework\";\nimport {\n addContactsTitleSelector,\n contactListPaginationSelector,\n deselectAllContacts,\n deselectContact,\n isOpenDialogSelector,\n keywordSelector,\n onChangeDialog,\n selectAllContacts,\n selectContact,\n selectedContactsSelector,\n sort,\n sortSelector,\n changeKeyword,\n contactsSelector,\n} from \"../reducers/addContactsToOrganizationReducer\";\nimport { Contact, ContactsType, ServerSortType } from \"../../ContactManager/model/contact\";\nimport { fetchContacts, searchContacts } from \"../../ContactManager/reducers/asyncThunks\";\nimport { debounce } from \"lodash-es\";\nimport { onAddOrUpdateContact, organizationSelector } from \"../reducers/organizationDetailReducer\";\n\ninterface AddContactsToOrganizationProps {\n organizationId: string;\n}\n\nconst AddContactsToOrganization = (props: AddContactsToOrganizationProps) => {\n const dispatch = useAppDispatch();\n const contacts = useAppSelector(contactsSelector);\n const organization = useAppSelector(organizationSelector);\n const { sortDirection, sortedColumn } = useAppSelector(sortSelector);\n const sortDirectionRef = useRef\n \n \n {\n handleSearch(value, rowsPerPage);\n }}\n onSearch={(value: string) => {\n handleSearch(value, rowsPerPage);\n }}\n value={keyword}\n />\n \n \n \n \n {contacts.length > 0 && (\n onToggleAllSelected(e.target.checked)}\n />\n )}\n \n \n {columns.map((column) => {\n if (column.sortable)\n return (\n \n onSort(column.selector, direction)\n }\n sortDirection={\n sortedColumn === column.selector\n ? sortDirection\n : SortDirection.Unsorted\n }\n >\n {column.title}\n \n );\n return (\n \n {column.title}\n \n );\n })}\n \n \n \n {contacts.map((row: Contact) => {\n return renderRow(row);\n })}\n \n \n onChangePage(startRow)}\n onChangeRowsPerPage={(rowsPerPage) => onChangeRowsPerPage(rowsPerPage)}\n />\n \n
\n \n );\n};\n\nexport default AddContactsToOrganization;\n","import React, { Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n DataTable,\n DataTableBody,\n DataTableCell,\n DataTableColumnHeaderCell,\n DataTableContent,\n DataTableHeaderRow,\n DataTablePagination,\n DataTableRow,\n DataTableToolbar,\n Dialog,\n Search,\n SortDirection,\n TextButton,\n Typography,\n} from \"@episerver/ui-framework\";\n\nimport { Organization, OrganizationSearchResult, SearchParams, ServerSortType } from \"../model/organization\";\nimport { debounce } from \"lodash-es\";\nimport axios from \"axios\";\nimport { Snackbar, SnackbarAction } from \"@rmwc/snackbar\";\n\ninterface AddParentOrganizationProps {\n organizationId: string | null;\n setParentId: ((parentId: string | null) => void) | undefined;\n displayPrayerId?: boolean;\n}\n\nconst AddParentOrganization = (props: AddParentOrganizationProps) => {\n\n const [defaultSearchParams, setDefaultSearchParams] = useState\n {\n setIsOpen(true);\n }}>\n {\"Select parent organization\"}\n \n {\n clearParent();\n }}>\n {\"Clear parent\"}\n \n
\n \n \n \n \n \n \n \n {columns.map((column) => {\n if (column.sortable)\n return (\n \n onSort(column.selector, direction)\n }\n sortDirection={\n defaultSearchParams.sortField !== column.selector ? SortDirection.Ascending :\n defaultSearchParams.sortType === ServerSortType.Asc\n ? SortDirection.Ascending\n : SortDirection.Descending\n }\n >\n {column.title}\n \n );\n return (\n \n {column.title}\n \n );\n })}\n \n \n \n {organizations.map((row: Organization) => {\n return renderRow(row);\n })}\n \n \n {\n const params = defaultSearchParams;\n params.startIndex = startRow === 0 ? 0 : startRow;\n searchOrganizations(params).then((data) => {\n setDefaultSearchParams(params);\n setOrganizations(data.organizations);\n setTotalCount(data.totalRecords);\n });\n }}\n onChangeRowsPerPage={(rowsPerPage: number) => {\n const params = defaultSearchParams;\n params.startIndex = 0;\n params.recordsToRetrieve = rowsPerPage;\n searchOrganizations(params).then((data) => {\n setDefaultSearchParams(params);\n setOrganizations(data.organizations);\n setTotalCount(data.totalRecords);\n });\n }}\n />\n \n {errorOpen && \n \n {error ?? ''}\n \n }\n timeout={-1}\n dismissesOnAction\n onClose={() => { setErrorOpen(false); }}\n action={[\n }\n
\n \n \n \n \n \n \n \n \n {columns.map((column) => {\n return (\n \n {column.title}\n \n );\n })}\n \n \n \n {organization.children.map((row: Organization, index: number) => {\n if (index < startRow || index >= startRow + rowsPerPage) {\n return \n \n dispatch(onChangeChildOrganizationPage(startRow))}\n onChangeRowsPerPage={(rowsPerPage) => dispatch(onChangeChildOrganizationRowPerPage(rowsPerPage))}\n />\n \n
\n );\n};\n\nexport default ChildOrganizationList;\n","import React, {useEffect} from \"react\";\nimport { useAppDispatch, useAppSelector } from \"../../hooks\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport {\n DataTable,\n DataTableBody,\n DataTableCell,\n DataTableColumnHeaderCell,\n DataTableContent,\n DataTableHeaderRow,\n DataTablePagination,\n DataTableRow,\n DataTableToolbar,\n TextButton,\n} from \"@episerver/ui-framework\";\nimport {\n contactsInOrganizationPaginationSelector,\n onChangeContactPage,\n onChangeContactRowPerPage,\n} from \"../reducers/contactListInOrganizationReducer\";\nimport { Contact } from \"../../ContactManager/model/contact\";\nimport { useHistory } from \"react-router-dom\";\nimport { onChangeDialog } from \"../reducers/addContactsToOrganizationReducer\";\nimport { organizationSelector } from \"../reducers/organizationDetailReducer\";\nimport { fetchContactsInOrganization } from \"../reducers/asyncThunks\";\nimport { readOnlySelector } from \"../../AdminInfo/adminInfoReducer\";\n\ninterface ContactListInOrganizationProps {\n organizationId: string;\n}\n\nconst ContactListInOrganization = (props: ContactListInOrganizationProps) => {\n const dispatch = useAppDispatch();\n const history = useHistory();\n const organization = useSelector(organizationSelector);\n const { rowsPerPage, startRow, rowsPerPageOptions, totalRowCount } = useSelector(\n contactsInOrganizationPaginationSelector\n );\n const readOnly = useSelector(readOnlySelector);\n\n useEffect(() => {\n dispatch(fetchContactsInOrganization(props.organizationId));\n }, []);\n\n const columns: Array<{ selector: string; title: string; sortable: boolean }> = [\n { selector: \"FullName\", title: \"Full Name\", sortable: true },\n { selector: \"Email\", title: \"Email\", sortable: true },\n { selector: \"LastOrderDate\", title: \"Last Order Date\", sortable: true },\n { selector: \"CustomerGroup\", title: \"Customer Group\", sortable: true },\n ];\n\n const renderRow = (rowData: Contact): React.ReactElement => {\n return (\n \n {!readOnly &&\n {\n dispatch(\n onChangeDialog({\n open: true,\n })\n );\n dispatch(clearAddChildError());\n }}\n >\n Add\n \n }\n
\n \n \n \n \n \n \n \n {columns.map((column) => {\n return (\n \n {column.title}\n \n );\n })}\n \n \n \n {organization.contacts.map((row: Contact, index: number) => {\n if (index < startRow || index >= startRow + rowsPerPage) {\n return \n \n dispatch(onChangeContactPage(startRow))}\n onChangeRowsPerPage={(rowsPerPage) => dispatch(onChangeContactRowPerPage(rowsPerPage))}\n />\n \n
\n );\n};\n\nexport default ContactListInOrganization;\n","import {\n GridRow,\n GridCell,\n TextButton,\n Breadcrumb,\n List,\n ListItem,\n Tab,\n TabBar,\n Typography,\n TextField,\n ExposedDropdownMenu,\n OverflowMenu,\n} from \"@episerver/ui-framework\";\nimport React, { FunctionComponent, Fragment, useEffect } from \"react\";\nimport { useAppDispatch, useAppSelector } from \"../../hooks\";\nimport { useHistory, useParams } from \"react-router-dom\";\nimport AddressList from \"../../AddressManager/components/AddressList\";\nimport { Address, InView } from \"../../AddressManager/model/address\";\nimport { EnumData } from \"../../ContactManager/model/contact\";\nimport { fetchEnumsByType } from \"../../EnumManager/reducers/asyncThunks\";\nimport { enumFormTitle, initialEnumFormState, onOpenDialog } from \"../../EnumManager/reducers/enumFormReducer\";\nimport { onChangeTotalCount } from \"../reducers/childOrganizationListReducer\";\nimport { enumType } from \"../../EnumManager/reducers/enumManagerReducer\";\nimport { Organization, OrganizationTab } from \"../model/organization\";\nimport { fetchOrganizationById, updateOrganization } from \"../reducers/asyncThunks\";\nimport {\n changeTitle,\n setParentId,\n organizationCustomerGroupsSelector,\n titleSelector,\n organizationSelector,\n businessCategoriesSelector,\n organizationTypesSelector,\n organizationTitle,\n breadcrumbItemsSelector,\n updateBreadcrumb,\n activeTabSelector,\n changeActiveTab,\n updateOrganizationId,\n onChangeProperty,\n errorSelector,\n onAddOrUpdateChildren,\n reset as resetData,\n} from \"../reducers/organizationDetailReducer\";\nimport AddChildOrganizations from \"./AddChildOrganizations\";\nimport AddContactsToOrganization from \"./AddContactsToOrganization\";\nimport AddParentOrganization from \"./AddParentOrganization\";\nimport ChildOrganizationList from \"./ChildOrganizationList\";\nimport ContactListInOrganization from \"./ContactListInOrganization\";\nimport { useState } from \"react\";\nimport { unwrapResult } from \"@reduxjs/toolkit\";\nimport { Snackbar, SnackbarAction } from \"@rmwc/snackbar\";\nimport { errorSelector as addChildErrorSeletor, clearAddChildError } from \"../reducers/addChildOrganizationsReducer\";\nimport { Controller, useForm } from \"react-hook-form\";\nimport ExtendedProperty from \"../../ExtendedProperty/ExtendedProperty\";\nimport { Property } from \"../../../businessFoundation/MetaClassData/MetaClassDataList/MetaClassDataModel\";\nimport { readOnlySelector } from \"../../AdminInfo/adminInfoReducer\";\n\nexport const limitString = (val: string, num: number) => {\n if (val && val.length > num) {\n return val.substring(0, num) + \"...\";\n } else {\n return val;\n }\n};\n\nconst OrganizationDetail: React.FC = () => {\n const dispatch = useAppDispatch();\n const history = useHistory();\n const { organizationId } = useParams<{ organizationId: string }>();\n const title = useAppSelector(titleSelector);\n const initialOrganization = useAppSelector(organizationSelector);\n const organizationTypes = useAppSelector(organizationTypesSelector);\n const organizationCustomerGroups = useAppSelector(organizationCustomerGroupsSelector);\n const businessCategories = useAppSelector(businessCategoriesSelector);\n const breadcrumbItems = useAppSelector(breadcrumbItemsSelector);\n const activeTab = useAppSelector(activeTabSelector);\n const [errorOpen, setErrorOpen] = useState(false);\n const error = useAppSelector(errorSelector);\n const addChildError = useAppSelector(addChildErrorSeletor);\n const readOnly = useAppSelector(readOnlySelector);\n\n const {\n control,\n handleSubmit,\n watch,\n setValue,\n setError,\n clearErrors,\n trigger,\n reset,\n formState: { errors }, \n } = useForm\n {!readOnly &&\n \n dispatch(\n onChangeDialog({\n open: true,\n })\n )\n }\n >\n Add\n \n }\n
\n \n (\n
\n \n ({\n label: limitString(type.name, 40),\n value: type.id.toString(),\n }))}\n value={\n values.organizationTypeId != null &&\n organizationTypes.filter((x) => x.id.toString() == values.organizationTypeId)\n .length > 0\n ? values.organizationTypeId.toString()\n : \"0\"\n }\n onValueChange={(val: string) => {\n setValue(\"organizationTypeId\", val);\n }}\n readOnly={readOnly}\n disabled={readOnly}\n />\n
\n \n {!readOnly &&\n \n \n }\n\n\n\n\n \n
\n \n - \n
\n
\n \n
\n
\n {
\n {renderDetails()}\n
}\n {organizationId && activeTab === OrganizationTab.Contacts && renderContacts()}\n {organizationId && activeTab === OrganizationTab.Organizations && renderOrganizations()}\n {organizationId && activeTab === OrganizationTab.Addresses && renderAddresses()}\n \n
\n history.push(\"/Organizations\")}>Cancel \n {!readOnly && \n handleSubmit(onSubmit)()}>\n Save\n \n }\n
\n {errorOpen && \n
\n \n
\n = 0}\n onChange={(e: any) => {\n onChangeCheckbox(e);\n }}\n >\n Public\n \n = 0}\n value={AddressType.Shipping}\n onChange={(e: any) => {\n onChangeCheckbox(e);\n }}\n >\n Shipping\n \n = 0}\n value={AddressType.Billing}\n onChange={(e: any) => {\n onChangeCheckbox(e);\n }}\n >\n Billing\n \n
\n \n {errors.addressType?.message}\n
\n \n )}\n />\n \n
\n
\n );\n }\n}\n\nexport default InvoiceSearch;","import fetch from 'cross-fetch';\nimport {\n translateResourceString\n} from '../util/translationUtility';\n\nimport {\n ERROR_USER_ALERT,\n} from '../SharedComponents/UserMessaging/';\n\nexport const fetchAccountOrganizationOptions = (endpointUrl) => {\n return fetch(\n endpointUrl,\n {\n headers: {\n 'content-type': 'application/json',\n 'X-Requested-With': 'fetch'\n },\n credentials: 'same-origin'\n }\n )\n .then((response) => {\n if (response.ok) {\n return response.json();\n } else {\n if (typeof console !== 'undefined' && console.error) {\n console.error(response);\n }\n throw new Error()\n }\n })\n .then(data => {\n if (!data || !data.options) {\n if (typeof console !== 'undefined' && console.error) {\n console.error(data);\n }\n throw new Error(\"Invalid data format\");\n }\n return { success: true, options: data.options };\n })\n .catch(() => {\n return {\n success: false,\n errorMessage: {\n text: translateResourceString(\"/MyAccountPage/InvoicePayments/ErrorLoadingAccountOrganization\"),\n type: ERROR_USER_ALERT\n }\n }\n });\n}","import React from 'react';\nimport fetch from 'cross-fetch';\n\nimport InvoiceSearch from './InvoiceSearch';\nimport { fetchAccountOrganizationOptions } from \"./SharedServiceCalls\";\n\nimport { printCurrency, printDate, formatAddress } from '../util/formatUtility';\nimport { addResourceStrings, translateResourceString } from '../util/translationUtility';\nimport { MessagesList, ERROR_USER_ALERT } from '../SharedComponents/UserMessaging/';\nimport invoiceEventBusClient from \"../util/invoiceEventBusClient\";\n\nlet messageId = 0;\nconst createUserMessage = ({ text, type }) => ({ id: messageId++, text, type });\n\nclass InvoiceHistoryApp extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n accountOrganizationOptions: [],\n selectedAccountOrganizationOption: null,\n userMessages: [],\n invoicePayments: []\n };\n\n addResourceStrings(props.LocalizationItems);\n }\n\n async componentDidMount() {\n var accountsAndOrganizationsResponse = await fetchAccountOrganizationOptions(this.props.GetAccountsAndOrganizationsOptionsEndpoint);\n if (accountsAndOrganizationsResponse.success) {\n this.setState( { accountOrganizationOptions: accountsAndOrganizationsResponse.options,\n selectedAccountOrganizationOption: accountsAndOrganizationsResponse.options.length > 0 \n ? accountsAndOrganizationsResponse.options[0] : null});\n } else {\n if (accountsAndOrganizationsResponse.message) {\n this.addMessage(accountsAndOrganizationsResponse.message);\n }\n }\n \n invoiceEventBusClient.on(\"paymentProcessed\", () => \n {\n if(this.state.selectedAccountOrganizationOption != null){\n this.fetchInvoicePaymentHistory(this.state.selectedAccountOrganizationOption);\n }\n }); \n }\n\n componentDidUpdate(prevProps, prevState) {\n if (prevState.selectedAccountOrganizationOption !== this.state.selectedAccountOrganizationOption) {\n if (!!this.state.selectedAccountOrganizationOption) {\n this.fetchInvoicePaymentHistory(this.state.selectedAccountOrganizationOption);\n } else {\n this.setState({ allInvoices: [] });\n }\n }\n }\n\n componentWillUnmount() {\n invoiceEventBusClient.remove(\"paymentProcessed\");\n }\n\n fetchInvoicePaymentHistory = (option) => {\n\n var fetchUrl = this.props.GetInvoicePaymentHistoryForAccountEndpoint + \"?accountId=\" + option.AccountId;\n if (!option.AccountId) {\n fetchUrl = this.props.GetInvoicePaymentHistoryForOrganizationEndpoint + \"?organizationId=\" + option.OrganizationId;\n }\n\n fetch(\n fetchUrl,\n {\n headers: {\n 'content-type': 'application/json',\n 'X-Requested-With': 'fetch'\n },\n credentials: 'same-origin',\n }\n )\n .then((response) => {\n if (response.ok) {\n return response.json();\n } else {\n if (typeof console !== 'undefined' && console.log) {\n console.error(response);\n }\n throw new Error()\n }\n })\n .then(data => {\n if (!data || !data.invoicePayments) {\n if (typeof console !== 'undefined' && console.error) {\n console.error(data);\n }\n throw new Error(\"Invalid data format\");\n }\n this.setState(prevState => {\n return { invoicePayments: data.invoicePayments };\n });\n })\n .catch(() => {\n this.setState(prevState => ({\n userMessages: prevState.userMessages.concat([\n createUserMessage({\n text: translateResourceString(\"/MyAccountPage/InvoicePayments/ErrorLoadingInvoices\"),\n type: ERROR_USER_ALERT\n })\n ])\n }));\n });\n }\n\n addMessage = ({ text, type }) => {\n this.setState(prevState => ({\n userMessages: prevState.userMessages.concat([\n createUserMessage({\n text: text,\n type: type\n })\n ])\n }))\n }\n\n onDismissMessage = (id) => {\n this.setState(prevState => ({\n userMessages: prevState.userMessages\n ? prevState.userMessages.filter((message) => message.id !== id)\n : []\n }));\n }\n\n render() {\n const {\n accountOrganizationOptions,\n selectedAccountOrganizationOption,\n userMessages,\n invoicePayments\n } = this.state;\n\n const {\n } = this.props;\n\n //const invoicesRender = invoices.map((x, i, y) => this.renderInvoice(i), this);\n\n return (\n this.searchInput.focus()} style={{ position: \"absolute\", right: \"1rem\", top: \".8rem\", zIndex: 2 }}>\n \n
\n this.onFocusChanged(false)}>\n { this.searchInput = input; }}\n type=\"text\" value={searchBoxHasFocus\n ? searchTerm\n : (selectedAccountOrganizationOption && this.getDisplay(selectedAccountOrganizationOption)) || searchTerm}\n placeholder={translateResourceString(\"/MyAccountPage/InvoicePayments/DefaultSelectOptionText\")}\n onChange={(e) => this.setState({ searchTerm: e.target.value })}\n onFocus={() => this.onFocusChanged(true)}\n />\n
\n \n
\n - \n {filteredOptions.map((option) => {\n return
- this.onAccountOrganizationOptionSelected(option)}>\n {this.getDisplay(option)}\n \n })}\n
\n
\n \n \n \n
\n
\n | \n | {translateResourceString(\"/MyAccountPage/InvoicePayments/History/PaymentNumberHeading\")} | \n{translateResourceString(\"/MyAccountPage/InvoicePayments/History/BillToHeading\")} | \n{translateResourceString(\"/MyAccountPage/InvoicePayments/History/CustomerNameAddressHeading\")} | \n{translateResourceString(\"/MyAccountPage/InvoicePayments/History/PaidDateHeading\")} | \n{translateResourceString(\"/MyAccountPage/InvoicePayments/History/SurchargeHeading\")} | \n{translateResourceString(\"/MyAccountPage/InvoicePayments/History/TotalPaidHeading\")} | \n{translateResourceString(\"/MyAccountPage/InvoicePayments/History/PaymentMethodHeading\")} | \n\n|
|---|---|---|---|---|---|---|---|---|
| \n | {p.InvoicePaymentId} | \n{p.PayerId} | \n{p.CustomerName} {formatAddress(p.Address)} | \n {printDate(p.PaymentDateDisplay)} | \n{printCurrency(p.Surcharge)} | \n{printCurrency(p.Total)} | \n{p.PaymentMethod} | \n|
| \n \n \n
| \n
{children}
)\n : (\n {children}\n
\n )}\n {line}
))}\n \n\n {children}\n
\n )\n }\n}\n\nMessagesList.propTypes = {\n messages: PropTypes.arrayOf(PropTypes.shape({\n Id: PropTypes.number.isRequired,\n text: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired\n }))\n}\n\nexport default MessagesList","export const UNKNOWN_USER_ALERT = \"UNKNOWN_USER_ALERT_TYPE\"\nexport const ERROR_USER_ALERT = \"ERROR_USER_ALERT_TYPE\"","// eslint-disable-next-line\nimport React from 'react'\nimport { connect } from 'react-redux'\n\nimport { dismissMessage, dismissAllMessages } from './messagesListActionCreators'\n\nimport MessagesList from './MessagesList'\n\nconst mapStateToProps = state => ({\n messages: state.ui.messages\n});\n\nconst mapDispatchToProps = dispatch => ({\n onDismiss: (id) => dispatch(dismissMessage(id)),\n onDismissAll: () => dispatch(dismissAllMessages())\n})\n\nconst MessagesListContainer = connect(mapStateToProps, mapDispatchToProps)(MessagesList)\n\nexport default MessagesListContainer","import merge from 'lodash/merge'\nimport { notifyError } from \"../Features/UserMessaging\";\nimport { makeCatalystFetchPostInit, makeCatalystFetchInit } from \"../../util/fetchUtility\";\n\nconst validateArguments = (\n {\n notify,\n extract,\n onSuccess,\n onError,\n init\n }, endpoint) => {\n // Check that we have what we expect\n if (typeof endpoint !== 'string') {\n throw new Error(\"argument 'endpoint' must be of type string or a function that results in a string when passed the state: \" + endpoint);\n }\n if (typeof onSuccess !== 'function') {\n throw new Error(\"argument 'onSuccess' must be of type function if it is defined\");\n }\n if (typeof onError !== 'function') {\n throw new Error(\"argument 'onError' must be of type function if it is defined\");\n }\n if (typeof notify !== 'function') {\n throw new Error(\"argument 'notify' must be of type function if it is defined\");\n }\n if (typeof extract !== 'function') {\n throw new Error(\"argument 'extract' must be defined and be of type function\");\n }\n if (init && typeof init !== 'object') {\n throw new Error(\"expected init to be an object\");\n }\n}\n\n\n/*---------------------------------------------------------\n * \n * function: fetchJson(spec)\n *\n *---------------------------------------------------------\n * \n * For example, in action.js:\n *\n * var myAsyncDataFetchSpec = {\n * // Get the endpoint path from state (or simply specify a string for endpoint)\n * endpoint: (state) => state.myEndpointPath, \n *\n *\t\t // The fetch should post and include cookies, and\n * // include our headers (not necessarily custom)\n * init: { method: 'POST', credentials: 'same-origin', headers: { \"X-Custom-Header\": \"ServerHelpMe\"} }\n\n * // Tell everyone we started my action\n * notify: data => ( { type: FETCH_MY_DATA, data } ),\n *\n * // Get the data from the response\n * extract: r => r.json(),\n *\n *\t\t // When we get the data, send it to those concerned\n * onSuccess: (json, data) => ({ type: MY_JSON_DATA_RECEIVED, json, data.Id }),\n *\n *\t\t // If we fail, tell someone\n * onError: (msg, data) => {\n * \t\t\t\t console.log(msg);\n *\t \t\t console.log(data);\n *\t\t \t `We were trying my action for data with id '${data.Id}', but '${msg}' happened`;\n *\t\t\t\t },\n * };\n * export const fetchMyData = fetchJson(myAsyncDataFetchSpec);\n *\n *\n * A factory for creating async action creators for the redux-thunk \n * library.\n * https://redux.js.org/docs/advanced/AsyncActions.html\n * https://github.com/gaearon/redux-thunk\n * With redux-thunk, when store.dispatch() is called with a function \n * parameter (instead of calling store.dispatch() with an \n * action parameter, as usual), the function is called with\n * the parameters store.dispatch() and store.getState(). So, we can \n * dispatch additional actions and inspect the current state.\n *\n * We also use the fetch api \n * https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch\n *\n * To create an async action creator, pass a object specifying:\n * * the actions to take when\n * 1) the async flow begins,\n * 2) the async flow succeeds\n * 3) the async flow fails.\n * * How to extract the data from the response body\n * (see using_fetch above from MDN)\n * * How to initalize the fetch request, beyond the content type of json\n * (see using_fetch above)\n *\n * A spec object is:\n * {\n * init, // an object to deep merge with the init\n * \t\t\t\t\t\t // object for a fetch call headers:\n * \t\t\t\t\t\t // { \"Content-Type\", \"application/json \"}, body }\n * \t\t\t\t\t\t // where body is the data transformed with\n * \t\t\t\t\t\t // JSON.stringify(data) if data is truthy.\n * \t\t\t\t\t\t // If data is falsy, then body is omitted\n * \t\t\t\t\t\t // from the init object passed to fetch\n * \n * endpoint, // either 1) a string specifying the location\n * \t\t\t\t\t\t // of the fetch call to make or 2) a funciton\n * \t\t\t\t\t\t // that returns a string specifying the location\n * \t\t\t\t\t\t // of the fetch call to make when passed the\n * \t\t\t\t\t\t // result of store.getState().\n * \n * notify, // The action creator to call when starting\n * \t\t\t\t\t // an async action. We pass the data to be \n * \t\t\t\t\t\t // sent in the request as a parameter. \n * \t\t\t\t\t\t // Generally a notification action that the\n * \t\t\t\t\t\t // sync request has started.\n *\n * extract, // The function to call on the response which\n * \t\t\t\t\t\t // extracts the data. Usually something like\n * // r => r.json()\n * // or one of: arrayBuffer, blob, json, text,\n * // or formData. See\n * // https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Body\n *\n * onSuccess, // The \"action creator\" to call when the \n *\t\t\t\t\t\t // response is successfully parsed. Both the \n *\t\t\t\t\t\t // successfully parsed response and the \n *\t\t\t\t\t\t // original data that was sent in the request \n *\t\t\t\t\t // are passed as parameters. Here, you might\n * // validate your data and generate an error\n * // action if validation fails, or an update-ish\n * // action if validation succeeds\n * \n * onError, // The \"action creator\" to call when the \n *\t\t\t\t\t // response cannot be retrieved. Passed\n * // a diagnostic (not appropriate to show \n *\t\t\t\t\t // to end users, but shouldn't contain\n * // sensitive information).\n * }\n * \n * The result of passing spec to fetchJson is a function that\n * dispatches an action when passed the request data. The action will\n * trigger the dispatch of other actions before and after it executes\n * an asynchronous call to the endpoint.\n *\n *\n * Doing a GET\n * -----------\n *\n * Omitting the data and doing a simple http GET to an endpoint:\n * If data is omitted from the call to the async function, then no\n * body is passed. The default fetch http action is \"GET\". (note that\n * the default fetch behavior is to NOT send cookies, so you won't be\n * authorized). \n * \n * Getting data should be as easy as:\n *\n * var page = getPageNumber()\n * var getMyData = {\n * init: {},\n * endpoint: \"https://example.com/api/serviceName\" + (page ? \"?p=\" + page : \"\"),\n * notify: { type: FETCH_MY_DATA, page },\n * extract: r => r.json(),\n * onSuccess: json => {type: UPDATE_MY_DATA_TYPE, json, page},\n * onError: msg => notifyError(\"sorry, but something didn't go right on page \" + page, msg)\n * }\n *\n * Then, in the reducer listening to the action UPDATE_MY_DATA update the\n * redux state based on the json received. See redux examples in more\n * authoritative locations for smart ways to update your state after\n * a call to an api.\n *\n * There are probably better ways of doing this\n * https://stackoverflow.com/questions/34930735/pros-cons-of-using-redux-saga-with-es6-generators-vs-redux-thunk-with-es2017-asy?rq=1\n * https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux?rq=1\n * \n */\nexport const fetchJson = spec => data => (dispatch, getState) => {\n const {\n notify = () => { },\n extract,\n onError = diagnosticMessage => notifyError(\"An error occurred\", diagnosticMessage),\n onSuccess = () => { },\n init\n } = spec;\n let {\n endpoint\n } = spec;\n\n if (typeof endpoint === 'function') {\n // Get the endpoint if we want to compute it\n endpoint = endpoint(getState());\n }\n\n validateArguments(spec, endpoint);\n\n // Notify async action starting\n dispatch(notify(data));\n\n // Configure the fetch\n let fetchInit = (typeof data !== 'undefined')\n ? merge(makeCatalystFetchPostInit(data), init)\n : merge(makeCatalystFetchInit(), init);\n\n // Make the call\n return fetch(endpoint, fetchInit)\n .then( // Get the response if we have one\n response => {\n if (!response.ok) {\n dispatch(onError(`Got server error when calling '${endpoint}': (${response.status}): ${response.statusText}`, data));\n return null;\n } else {\n return extract(response);\n }\n },\n // handle errors that don't have a status code\n error => dispatch(onError(`Got network error when calling '${endpoint}': ${error}`, data))\n )\n .then( // Do something with whatever was extracted from the response\n responseExtracted => {\n //console.log(responseExtracted);\n try {\n dispatch(onSuccess(responseExtracted, data, getState));\n } catch (e) {\n dispatch(onError(`Error executing success callback for extracted response: ${responseExtracted} for data sent: ${data}\\n ${e}`))\n }\n },\n // notify of other errors \n error => dispatch(onError(`Error getting response: ${error}`, data))\n );\n}\n","import findIndex from 'lodash/findIndex'\nimport includes from 'lodash/includes'\n\n// BBS DDD 2017-11-20 Assumes all list elements that \n// are composite will have an \"Id\" element\n\n// If we change something, then return a new list, not the list we \n// got as an argument. If we change nothing, then return the list\n// we got as an argument.\n\n// Adds to list at front\nexport const addToList = (list, newElement) => {\n if (newElement.hasOwnProperty(\"Id\"))\n return [newElement].concat(list.filter(elt => elt.Id !== newElement.Id));\n return [newElement].concat(list.filter(elt => elt !== newElement));\n}\n\n// Returns new list if element exists, or same list\nexport const removeFromList = (list, elementToRemove) => {\n return list.filter(elt => elt !== elementToRemove);\n}\n\nexport const removeFromListById = (list, id) => {\n return list.filter(elt => elt.Id !== id);\n}\n\n// Returns new list if element exists, or same list\nexport const replaceInList = (list, valueToReplace, newValue) => {\n if (!includes(list, valueToReplace))\n return list;\n return list.map(elt => elt === valueToReplace ? newValue : elt);\n}\n\n// Returns new list if element exists, or same list\nexport const replaceInListById = (list, elementToUpdateId, newElement) => {\n if (findIndex(list, elt => elt.Id === elementToUpdateId) < 0)\n return list;\n return list.map(elt => elt.Id === elementToUpdateId ? newElement : elt);\n }","import {\n UPDATE_ITEM_QUANTITY,\n DELETE_ITEM\n} from '../../GlobalStateContainer'\n\n\nimport { removeFromListById } from '../../../util/listUtility'\n\nexport const CartItems = (state = [], action) => {\n switch (action.type) {\n case UPDATE_ITEM_QUANTITY:\n return state.map(item =>\n (item.Id === action.itemId)\n ? Object.assign({}, item, { Quantity: action.newQuantity })\n : item);\n case DELETE_ITEM:\n return removeFromListById(state, action.itemId);\n default:\n return state;\n }\n}\n","import { NEW_CHECKOUT_SUMMARY, NOTIFY_REFRESHING_CHECKOUT_SUMMARY } from \"../../GlobalStateContainer\";\n\nconst emptySummary = { Total: 0, SubTotal: 0, Discount:0, ShippingTotal: null, Currency: 'USD', TotalRemaining: 0, DiscountTotal: 0}\n\nexport const Summary = function (state = emptySummary, action) {\n switch (action.type) {\n case NEW_CHECKOUT_SUMMARY:\n return action.summary;\n default: \n return state;\n }\n}\n\nexport const isRefreshingSummary = function (state = true, action) {\n switch (action.type) {\n case NOTIFY_REFRESHING_CHECKOUT_SUMMARY:\n return true;\n case NEW_CHECKOUT_SUMMARY:\n return false;\n default:\n return state;\n }\n}\n","\nimport {\n NEW_SHIPPING_OPTIONS,\n SELECT_SHIPPING_OPTION,\n NOTIFY_REFRESHING_SHIPPING_OPTIONS\n} from '../../GlobalStateContainer'\n\nexport const ShippingOptions = function (state = [], action) {\n switch (action.type) {\n case NEW_SHIPPING_OPTIONS:\n return action.shippingOptions;\n default:\n return state;\n }\n}\n\nexport const SelectedShippingOptionId = function (state = '', action) {\n switch (action.type) {\n case SELECT_SHIPPING_OPTION:\n return action.id;\n default:\n return state;\n }\n}\n\nexport const isRefreshingShippingOptions = function (state = '', action) {\n switch (action.type) {\n case NOTIFY_REFRESHING_SHIPPING_OPTIONS:\n return true;\n case NEW_SHIPPING_OPTIONS:\n return false;\n default:\n return state;\n }\n}\n\n","import {\n NOTIFY_ERROR,\n DISMISS_MESSAGE,\n DISMISS_ALL_MESSAGES,\n NOTIFY_COMPLETE_CHECKOUT_ERROR, \n REMOVE_BILLING_ADDRESS,\n REMOVE_SHIPPING_ADDRESS,\n SELECT_BILLING_ADDRESS,\n SELECT_SHIPPING_ADDRESS,\n SELECT_SHIPPING_AND_BILLING_ADDRESS,\n UPDATE_ADDRESS,\n USE_BILLING_FOR_SHIPPING_TOGGLE,\n UPDATE_ITEM_QUANTITY,\n DELETE_ITEM,\n UPDATING_COUPONS,\n SELECT_PAYMENT_OPTION,\n BRAINTREEE_PAYMENT_DATA_UPDATE,\n BRAINTREEE_BILLING_ADDRESS_UPDATE,\n BRAINTREEE_SAVE_CARD_UPDATE,\n PURCHASE_ORDER_PAYMENT_DATA_UPDATE,\n SELECT_SHIPPING_OPTION, \n NEW_SHIPPING_OPTIONS,\n} from '../../GlobalStateContainer'\n\nimport {\n ERROR_USER_ALERT,\n UNKNOWN_USER_ALERT\n} from './userAlertTypes'\n\nimport {\n addToList,\n replaceInListById\n} from '../../../util/listUtility'\n\nimport { translateResourceString } from '../../../util/translationUtility';\n\nconst mapActionTypeToUserAlertType = (actionType) => {\n switch (actionType) {\n case NOTIFY_ERROR:\n case NOTIFY_COMPLETE_CHECKOUT_ERROR:\n return ERROR_USER_ALERT;\n default:\n return UNKNOWN_USER_ALERT;\n }\n}\n\nexport function messages(state = [], action) {\n switch (action.type) {\n case NOTIFY_ERROR:\n return addToList(\n state,\n {\n type: mapActionTypeToUserAlertType(action.type),\n text: action.message,\n Id: action.messageId\n });\n case NOTIFY_COMPLETE_CHECKOUT_ERROR:\n return addToList(\n state,\n {\n type: mapActionTypeToUserAlertType(action.type),\n text: action.message,\n Id: action.messageId\n });\n case DISMISS_MESSAGE:\n return replaceInListById(\n state,\n action.messageId,\n Object.assign({}, state.filter(m => m.Id === action.messageId)[0], { dismissed: true }))\n case DISMISS_ALL_MESSAGES:\n // ADDRESS ACTIONS\n case REMOVE_BILLING_ADDRESS: \n case REMOVE_SHIPPING_ADDRESS:\n case SELECT_BILLING_ADDRESS: \n case SELECT_SHIPPING_ADDRESS:\n case SELECT_SHIPPING_AND_BILLING_ADDRESS: \n case UPDATE_ADDRESS:\n case USE_BILLING_FOR_SHIPPING_TOGGLE:\n // CART ACTIONS\n case UPDATE_ITEM_QUANTITY:\n case DELETE_ITEM:\n // COUPONS ACTIONS\n case UPDATING_COUPONS:\n // PAYMENT METHOD ACTIONS\n case SELECT_PAYMENT_OPTION:\n case BRAINTREEE_PAYMENT_DATA_UPDATE:\n case BRAINTREEE_BILLING_ADDRESS_UPDATE:\n case BRAINTREEE_SAVE_CARD_UPDATE:\n case PURCHASE_ORDER_PAYMENT_DATA_UPDATE:\n // SHIPPING ACTIONS\n case SELECT_SHIPPING_OPTION: \n case NEW_SHIPPING_OPTIONS:\n return [];\n default:\n return state;\n }\n}\n","import { combineReducers } from 'redux'\n\nimport {\n Addresses,\n BillingAddresses,\n ShippingAddresses,\n SelectedBillingAddressId,\n SelectedShippingAddressId,\n useShippingForBilling\n} from '../Features/Address/addressReducers'\n\nimport {\n PhoneNumber,\n PhoneText,\n completeCheckoutButtonText,\n paymentButtonInfoText\n} from './uiReducers'\n\nimport {\n CartItems\n} from '../Features/Cart/cartReducers'\n\nimport {\n PaymentOptions,\n SelectedPaymentOptionId,\n PaymentRecord,\n BraintreeBillingAddress,\n BraintreeSaveCard\n} from '../Features/PaymentMethod/paymentMethodReducers'\n\nimport {\n Summary,\n isRefreshingSummary\n} from '../Features/Summary/summaryReducers'\n\nimport { isPlaceOrderPending } from '../Features/PlaceOrder/placeOrderReducers'\n\nimport {\n ShippingOptions,\n SelectedShippingOptionId,\n isRefreshingShippingOptions\n} from '../Features/ShippingMethod/shippingMethodReducers'\n\nimport {\n Coupons\n} from '../Features/Coupon/couponReducers'\n\n\nimport { messages } from '../Features/UserMessaging/userMessagingReducers'\n\nconst entities = combineReducers({\n // Address\n Addresses,\n BillingAddresses,\n SelectedBillingAddressId,\n ShippingAddresses,\n SelectedShippingAddressId,\n\n // Cart\n CartItems,\n\n // Payment\n PaymentOptions,\n SelectedPaymentOptionId,\n PaymentRecord,\n BraintreeBillingAddress,\n BraintreeSaveCard,\n\n // Shipping\n ShippingOptions,\n SelectedShippingOptionId,\n isRefreshingShippingOptions,\n\n //Summary\n Summary,\n isRefreshingSummary,\n\n // Coupon\n Coupons\n});\n\nconst ui = combineReducers({\n // Address\n useShippingForBilling,\n\n // UserMessaging\n messages,\n\n // PlaceOrder\n isPlaceOrderPending,\n paymentButtonInfoText,\n PhoneNumber,\n PhoneText,\n completeCheckoutButtonText,\n});\n\nfunction constants(state = {}, action) {\n return state; // they're constants. duh.\n}\n\nexport const checkoutApp = combineReducers({\n ui,\n entities,\n constants\n})\n","\nimport {\n ADD_SHIPPING_ADDRESS,\n ADD_BILLING_ADDRESS,\n REMOVE_SHIPPING_ADDRESS,\n REMOVE_BILLING_ADDRESS,\n SELECT_BILLING_ADDRESS,\n SELECT_SHIPPING_ADDRESS,\n UPDATE_ADDRESS,\n SELECT_SHIPPING_AND_BILLING_ADDRESS,\n USE_BILLING_FOR_SHIPPING_TOGGLE\n} from '../../GlobalStateContainer'\n\nimport {\n addToList,\n removeFromList,\n removeFromListById,\n replaceInList,\n replaceInListById\n} from '../../../util/listUtility'\n\nexport function Addresses(state = [], action) {\n switch (action.type) {\n case ADD_BILLING_ADDRESS:\n return addToList(state, action.address);\n case ADD_SHIPPING_ADDRESS:\n return addToList(state, action.address);\n case REMOVE_BILLING_ADDRESS:\n return removeFromListById(state, action.addressId);\n case REMOVE_SHIPPING_ADDRESS:\n return removeFromListById(state, action.addressId);\n case UPDATE_ADDRESS:\n return replaceInListById(state, action.addressId, action.address);\n default:\n return state;\n }\n}\n\nexport function BillingAddresses(state = [], action) {\n switch (action.type) {\n case ADD_BILLING_ADDRESS:\n return addToList(state, action.address.Id);\n case REMOVE_BILLING_ADDRESS:\n return removeFromList(state, action.addressId);\n case SELECT_SHIPPING_AND_BILLING_ADDRESS:\n return addToList(state, action.addressId)\n case UPDATE_ADDRESS:\n return replaceInList(state, action.addressId, action.address.Id);\n default:\n return state;\n }\n}\n\nexport function ShippingAddresses(state = [], action) {\n switch (action.type) {\n case ADD_SHIPPING_ADDRESS:\n return addToList(state, action.address.Id);\n case REMOVE_SHIPPING_ADDRESS:\n return removeFromList(state, action.addressId);\n case UPDATE_ADDRESS:\n return (state.includes(action.addressId) && action.addressId !== action.address.ID)\n ? replaceInList(state, action.addressId, action.address.Id)\n : state;\n default:\n return state;\n }\n}\n\nexport function SelectedBillingAddressId(state = '', action) {\n switch (action.type) {\n case REMOVE_BILLING_ADDRESS:\n return state === action.addressId ? '' : state;\n case SELECT_BILLING_ADDRESS:\n return action.addressId;\n case SELECT_SHIPPING_AND_BILLING_ADDRESS:\n return action.addressId;\n case UPDATE_ADDRESS:\n return state === action.addressId ? action.address.Id : state;\n default: \n return state;\n }\n}\n\nexport function SelectedShippingAddressId(state = '', action) {\n switch (action.type) {\n case REMOVE_SHIPPING_ADDRESS:\n return state === action.addressId ? '' : state;\n case SELECT_SHIPPING_ADDRESS:\n return action.addressId;\n case SELECT_SHIPPING_AND_BILLING_ADDRESS:\n return action.addressId;\n case UPDATE_ADDRESS:\n return state === action.addressId ? action.address.Id : state;\n default:\n return state;\n }\n}\n\nexport function useShippingForBilling(state = true, action) {\n switch (action.type) {\n case USE_BILLING_FOR_SHIPPING_TOGGLE:\n return !state;\n default:\n return state;\n }\n}\n","import {\n BRAINTREEE_PAYMENT_DATA_UPDATE,\n PURCHASE_ORDER_PAYMENT_DATA_UPDATE,\n SELECT_PAYMENT_OPTION,\n NOTIFY_COMPLETE_CHECKOUT_ERROR,\n BRAINTREEE_BILLING_ADDRESS_UPDATE,\n BRAINTREEE_SAVE_CARD_UPDATE\n} from '../../GlobalStateContainer'\n\nexport const PaymentOptions = function (state = [], action) {\n return state;\n}\n\nexport const SelectedPaymentOptionId = function (state = '', action) {\n switch (action.type) {\n case SELECT_PAYMENT_OPTION:\n return action.paymentMethodId || '';\n case NOTIFY_COMPLETE_CHECKOUT_ERROR:\n return state;\n default:\n return state;\n }\n}\n\nexport const PaymentRecord = function (state = {}, action) {\n switch (action.type) {\n case BRAINTREEE_PAYMENT_DATA_UPDATE:\n return Object.assign({}, state,\n {\n BraintreePaymentNonce: action.payload && action.payload.nonce,\n BraintreePaymentPayload: action.payload,\n BraintreeDeviceData: action.payload && action.payload.deviceData,\n BraintreeVaulted: action.payload && action.payload.vaulted\n });\n case PURCHASE_ORDER_PAYMENT_DATA_UPDATE:\n return Object.assign({}, state, { POValue: action.number });\n case NOTIFY_COMPLETE_CHECKOUT_ERROR:\n return Object.assign({}, state, { POValue: null, BraintreePaymentNonce: null, BraintreePaymentPayload: null, BraintreeDeviceData: null, BraintreeVaulted: null });\n default:\n return state;\n }\n}\n\nexport const BraintreeBillingAddress = function (state = null, action) {\n switch (action.type) {\n case BRAINTREEE_BILLING_ADDRESS_UPDATE:\n return action.braintreeBillingAddress;\n case NOTIFY_COMPLETE_CHECKOUT_ERROR:\n return null;\n default:\n return state;\n }\n}\n\nexport const BraintreeSaveCard = function (state = null, action) {\n switch (action.type) {\n case BRAINTREEE_SAVE_CARD_UPDATE:\n return action.braintreeSaveCard;\n case NOTIFY_COMPLETE_CHECKOUT_ERROR:\n return false;\n default:\n return state;\n }\n}","import {\n UPDATING_COUPONS\n} from '../../GlobalStateContainer'\n\nexport const Coupons = function (state = [], action) {\n switch (action.type) {\n case UPDATING_COUPONS:\n console.log('UPDATING_COUPONS reducer', action);\n return action.coupons;\n default:\n return state;\n }\n}\n","import {\n NOTIFY_COMPLETE_CHECKOUT_ERROR,\n PLACE_ORDER_ASYNC\n} from '../../GlobalStateContainer'\n\nexport function isPlaceOrderPending(state = false, action) {\n switch (action.type) {\n case PLACE_ORDER_ASYNC:\n return true;\n case NOTIFY_COMPLETE_CHECKOUT_ERROR:\n return false;\n default:\n return state;\n }\n}\n","export function PhoneNumber(state = 'tel:+14144254069', action) {\n return state;\n}\n\nexport function PhoneText(state = '(414) 425-4069', action) {\n return state;\n}\n\nexport function completeCheckoutButtonText(state = '', action) {\n return state;\n}\n\nexport function paymentButtonInfoText(state = '', action) {\n return state;\n}","import React from 'react'\nimport PropTypes from 'prop-types'\n\nimport { CheckoutSection } from '../../components'\nimport { notifyError } from '../UserMessaging'\nimport { Fade } from '../../componentAnimations'\n\nimport isEqual from 'lodash/isEqual'\nimport { translateResourceString } from '../../../util/translationUtility';\n\n\nconst placeOrderDetailsChanged = (prevProps, newProps) => !isEqual(prevProps.Coupons, newProps.Coupons) || !isEqual(prevProps.CartItems, newProps.CartItems) || !isEqual(prevProps.SelectedShippingOptionId, newProps.SelectedShippingOptionId);\n\n\nclass CheckoutCoupon extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n isCollapsed: false,\n newCouponCode: ''\n };\n }\n\n onClickChange(e) {\n e.preventDefault();\n this.setState({ isCollapsed: !this.state.isCollapsed });\n }\n\n onKeyPress(e) {\n if (e.key === \"Enter\") {\n this.addCoupon();\n }\n }\n\n addCoupon() {\n if (this.state.newCouponCode && this.state.newCouponCode != '') {\n this.props.onAddCoupon(this.state.newCouponCode);\n this.setState({ newCouponCode: '' });\n } else {\n alert(translateResourceString(\"/Checkout/Coupons/NoPromotionCodeEntered\"));\n }\n }\n\n componentDidUpdate(prevProps) {\n if (placeOrderDetailsChanged(prevProps, this.props)) {\n this.props.updateCoupons();\n }\n }\n\n render() {\n const usedCoupons = this.props.Coupons ? this.props.Coupons : [];\n const appliedCoupons = usedCoupons.map(c => {\n var key = \"appliedCoupons\" + c.Code;\n return (\n \n
\n );\n });\n\n return (\n {c.Code}
\n {c.Description}
\n \n \n {this.props.Code}\n {\n (this.state.isCollapsed)\n ? ( this.onClickChange(e)}>{translateResourceString(\"/Checkout/Coupons/Change\")})\n : ()\n }\n
\n \n \n
\n \n this.setState({ newCouponCode: e.target.value })}\n onKeyPress={(e) => { this.onKeyPress(e) }}\n />\n { this.addCoupon() }}\n >Ok\n
\n {!!appliedCoupons.length && (\n \n
\n )}\n \n {translateResourceString(\"/Checkout/Coupons/CouponsApplied\")}:
\n {appliedCoupons}\n\n
\n );\n }\n}\n\nCartItem.propTypes = {\n item: PropTypes.shape({\n DisplayName: PropTypes.string.isRequired,\n ImageUrl: PropTypes.string.isRequired,\n SKU: PropTypes.string.isRequired,\n Quantity: PropTypes.number.isRequired\n }).isRequired,\n onDelete: PropTypes.func,\n onQuantityChange: PropTypes.func.isRequired\n}\n\nexport default CartItem;","import {\n fetchJson,\n UPDATE_ITEM_QUANTITY,\n DELETE_ITEM,\n UPDATING_ITEM_QUANTITY_ASYNC,\n DELETING_ITEM_ASYNC\n} from '../../GlobalStateContainer'\n\nimport { notifyError } from '../UserMessaging'\nimport { translateResourceString } from '../../../util/translationUtility';\n\n/* CART */\nexport function updateItemQuantity(itemId, newQuantity) {\n return { type: UPDATE_ITEM_QUANTITY, itemId, newQuantity }\n}\n\nexport function deleteItem(itemId) {\n return { type: DELETE_ITEM, itemId }\n}\n\n\n\nconst onUpdateQuantitySuccess = ({ error, message }, { id, qty }, getState) => {\n if (!error) {\n return updateItemQuantity(id, qty);\n } else {\n return notifyError(translateResourceString(\"/Checkout/Cart/Errors/UpdateQuantityFailed\"), message);\n }\n}\n\nconst notifyUpdatingItem = function ({ id, qty }) {\n return { type: UPDATING_ITEM_QUANTITY_ASYNC, id, qty };\n}\nconst updateItemQuantityAsyncSpec = {\n endpoint: (state) => state.constants.navigation.updateItemQuantityEndpoint,\n init: { method: 'POST', credentials: 'same-origin' },\n notify: notifyUpdatingItem,\n extract: (response) => response.json(),\n onSuccess: onUpdateQuantitySuccess,\n onError: (diagMsg) => notifyError(translateResourceString(\"/Checkout/Cart/Errors/UpdateQuantityFailed\"), diagMsg)\n}\n\nexport const updateItemQuantityAsync = fetchJson(updateItemQuantityAsyncSpec)\n\n\nconst ondeleteSuccess = ({ error, message }, { id }, getState) => {\n if (!error) {\n return deleteItem(id);\n } else {\n return notifyError(translateResourceString(\"/Checkout/Cart/Errors/DeleteItemFailed\"), message);\n }\n}\n\nconst deleteItemAsyncSpec = {\n endpoint: (state) => state.constants.navigation.deleteItemEndpoint,\n init: { method: 'POST', credentials: 'same-origin' },\n notify: ({ id }) => ({ type: DELETING_ITEM_ASYNC, id }),\n extract: (response) => response.json(),\n onSuccess: ondeleteSuccess,\n onError: (diagMsg) => notifyError(translateResourceString(\"/Checkout/Cart/Errors/DeleteItemFailed\"), diagMsg)\n}\n\nexport const deleteItemAsync = fetchJson(deleteItemAsyncSpec)","import React from 'react'\nimport { connect } from 'react-redux'\nimport CartItem from './CartItem'\nimport { CheckoutSection } from '../../components'\nimport { translateResourceString } from '../../../util/translationUtility';\nimport { deleteItemAsync, updateItemQuantityAsync, updateItemQuantity } from './cartActionCreators'\n\nconst CartList = ({ items, onQuantityChange, onDelete }) => {\n const cartItems = items.map((item) => {\n return (\n \n 
\n
\n \n \n {\n typeof e !== 'undefined' && typeof e.preventDefault !== 'undefined' && e.preventDefault();\n this.props.onDelete(item.Id, this.props.item.Quantity);\n }}\n />\n \n\n
\n \n
\n {item.DisplayName}
\n\n {translateResourceString(\"/Checkout/Cart/ItemSkuLabel\")}: {item.SKU}\n
\n \n {translateResourceString(\"/Checkout/Cart/ItemPriceLabel\")}: {this.props.item.Price}\n
\n \n{translateResourceString(\"/Checkout/Address/MissingAddress/\")}
);\n }\n const min = props.compact;\n const nameEmph = props.compact ? '' : '';\n const addr = props.address;\n const cityStateZip = `${addr.City}, ${addr.State} ${addr.PostalCode}`;\n const s = props.compact ? spanStyleCompact : spanStyle;\n const si = Object.assign({}, s, { marginLeft: 0 });\n const sj = Object.assign({}, si, { fontWeight: 'bold' });\n const a = props.compact ? addressStyleCompact : addressStyle;\n return (\n \n
\n );\n}\n\nAddressDisplay.propTypes = {\n address: AddressShape.propTypes\n}","import React from 'react'\nimport PropTypes from 'prop-types'\n\nclass RadioInput extends React.Component {\n\n componentDidMount() {\n require('./RadioInput.css');\n }\n\n render() {\n\n return (\n \n
\n {addr.Name}
\n {addr.AddressLine1}
\n \n {addr.AddressLine2}\n
\n \n {cityStateZip}\n {addr.CountryName}\n \n {addr.Phone}\n \n
\n \n onRadioSelected(address.Id)} />\n
\n \n e.preventDefault() || onSelected(address.Id)}\n >\n {selectAddressMessage}\n \n \n \n\n \n
\n \n)\n\nActiveAddressInAddressSelectorList.propTypes = {\n address: PropTypes.shape(AddressShape).isRequired,\n isSelected: PropTypes.bool.isRequired,\n onSelected: PropTypes.func.isRequired,\n onRadioSelected: PropTypes.func.isRequired,\n onBeginEdit: PropTypes.func.isRequired,\n onDelete: PropTypes.func.isRequired,\n selectAddressMessage: PropTypes.string.isRequired\n}\n\nexport default ActiveAddressInAddressSelectorList","// eslint-disable-next-line\nimport { connect } from 'react-redux'\nimport PropTypes from 'prop-types'\nimport ActiveAddressInAddressSelectorList from './ActiveAddressInAddressSelectorList'\nimport { translateResourceString } from '../../../util/translationUtility';\n\nimport { AddressShape } from './propTypes'\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n ...ownProps\n }\n}\n\nconst mapDispatchToProps = (dispatch, ownProps) => {\n\n const confirmDelete = () => {\n if (typeof window.confirm !== 'undefined')\n return window.confirm(translateResourceString(\"/Checkout/Address/DeletionConfirmationMessage\"));\n else\n return false;\n }\n\n return {\n onSelected: id => {\n ownProps.onSelected(id);\n dispatch(ownProps.selectAddressActionCreator(id));\n },\n onRadioSelected: id => {\n dispatch(ownProps.selectAddressActionCreator(id));\n ownProps.onRadioSelected(id);\n },\n onDelete: id => {\n if (confirmDelete()) {\n ownProps.onDeleted(id);\n dispatch(ownProps.deleteAddressActionCreator({ addressId: id }));\n }\n }\n };\n}\n\nconst AddressSelectorListActiveAddressContainer = connect(mapStateToProps, mapDispatchToProps)(ActiveAddressInAddressSelectorList)\n\nAddressSelectorListActiveAddressContainer.propTypes = {\n address: PropTypes.shape(AddressShape).isRequired,\n selectAddressActionCreator: PropTypes.func.isRequired,\n deleteAddressActionCreator: PropTypes.func.isRequired,\n onBeginEdit: PropTypes.func.isRequired,\n selectAddressMessage: PropTypes.string.isRequired,\n isSelected: PropTypes.bool.isRequired,\n onDeleted: PropTypes.func.isRequired,\n onSelected: PropTypes.func.isRequired,\n onRadioSelected: PropTypes.func.isRequired\n}\n\nexport default AddressSelectorListActiveAddressContainer","import PropTypes from 'prop-types';\nimport React from 'react';\nimport { connect } from 'react-redux';\n\nimport { AddressShape, AddressActionCreatorsShape as AddressActionCreators } from './propTypes';\n\nimport AddressDisplay from './AddressDisplay';\nimport { RadioInput } from '../../../SharedComponents/RadioInput';\nimport ActiveAddressInAddressSelectorListContainer from './ActiveAddressInAddressSelectorListContainer';\nimport { translateResourceString } from '../../../util/translationUtility';\n\nimport {\n hiddenAnchorStyle,\n pretendAnchorStyle\n} from '../../components'\n\nclass AddressSelectorList extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n activeAddressId: ''\n };\n\n this.onDeleted = this.onDeleted.bind(this);\n this.onSelected = this.onSelected.bind(this);\n this.onItemClick = this.onItemClick.bind(this);\n this.onRadioSelected = this.onRadioSelected.bind(this);\n }\n\n beginEdit(Id) {\n if (this.state.activeAddressId !== '') {\n // Only set active if we had an active before\n this.setState({ activeAddressId: Id });\n }\n this.props.onBeginEdit(Id);\n }\n\n onRadioSelected(id) {\n this.setState({ activeAddressId: id });\n this.props.onAddressSelected(id);\n }\n\n onSelected(id) {\n this.props.onAddressSelected(id);\n this.props.onDoneSelecting(id);\n this.setState({ activeAddressId: '' });\n }\n\n onDeleted(id) {\n this.setState({ activeAddressId: '' });\n }\n\n onItemClick(id) {\n this.setState({ activeAddressId: id });\n }\n\n render() {\n const listComponent = this;\n const props = this.props;\n const listItems = this.props.addresses.map((address) => {\n const isSelected = props.selectedAddressId === address.Id;\n const focused = listComponent.state.activeAddressId === address.Id;\n if (focused) {\n return (\n