import React, { useCallback, useReducer } from 'react'; import PropTypes from 'prop-types'; import { produce } from 'immer'; import classnames from 'classnames'; import { useI18nContext } from '../../../../hooks/useI18nContext'; import CheckBox from '../../../ui/check-box/check-box.component'; import { BackgroundColor, IconColor, TextVariant, TextAlign, Size, JustifyContent, FontWeight, } from '../../../../helpers/constants/design-system'; import Popover from '../../../ui/popover'; import Button from '../../../ui/button'; import { AvatarIcon, Text, IconName } from '../../../component-library'; import Box from '../../../ui/box/box'; /** * a very simple reducer using produce from Immer to keep checkboxes state manipulation * immutable and painless. */ const checkboxStateReducer = produce((state, action) => { switch (action.type) { case 'check': state[action.checkboxId] = state[action.checkboxId] ? !state[action.checkboxId] : true; break; default: throw new Error( 'You must provide a type when dispatching an action for checkboxState', ); } }); export default function SnapInstallWarning({ onCancel, onSubmit, warnings, snapName, }) { const t = useI18nContext(); const [checkboxState, dispatch] = useReducer(checkboxStateReducer, {}); const isAllChecked = warnings.every((warning) => checkboxState[warning.id]); const onCheckboxClicked = useCallback((checkboxId) => { dispatch({ type: 'check', checkboxId }); }, []); const SnapInstallWarningFooter = () => { return (