{"version":3,"file":"addToMylist.866e4da87faf4d9ee9c3.js","sources":["webpack:///./Source/FECOM.Web.UI/Scripts/apps/wishlist/AddToMyList.tsx","webpack:///./Source/FECOM.Web.UI/Scripts/components/Checkbox.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useState } from 'react';\r\nimport canUseDOM from '../../utilities/canUseDOM';\r\nimport popupAlert from '../../utilities/popup-alert';\r\nimport * as api from './WishlistApi';\r\nimport { GetWishlistResult, WishlistViewModel } from '../../types/generated';\r\nimport LoaderMask from '../../components/LoaderMask';\r\nimport Loader from '../../components/Loader';\r\nimport Modal from '../../components/Modal';\r\nimport PropTypes from 'prop-types';\r\nimport WishlistEditForm from './components/WishlistEditForm';\r\nimport { Listbox, Transition } from '@headlessui/react';\r\nimport { Button } from '../../components/Button';\r\nimport Checkbox from '../../components/Checkbox';\r\n\r\ninterface AddToMyListProps {\r\n  isLoggedIn: boolean;\r\n  catalogueRef?: string | null;\r\n  dropdownTitle?: string;\r\n  wishlists?: Array<GetWishlistResult>;\r\n  quantity?: number;\r\n  isBasketPage?: boolean;\r\n  isBasketSummary?: boolean;\r\n}\r\n\r\nexport default function AddToMyList(props: AddToMyListProps) {\r\n  const [isLoading, setIsLoading] = useState<boolean>(false);\r\n  const [showCreateModal, setShowCreateModal] = useState<boolean>(false);\r\n  const [wishlists, setWishlists] =\r\n    useState<Array<GetWishlistResult> | null>(null);\r\n  const [editListName, setEditListName] = useState<string>('');\r\n  const [editListDefault, setEditListDefault] = useState<boolean>(false);\r\n  const [currentPath, setCurrentPath] = useState<string>(\r\n    canUseDOM() ? window.location.pathname : ''\r\n  );\r\n  const [selectedLists, setSelectedLists] = useState<Array<number>>([]);\r\n\r\n  const listBoxId = `${props.catalogueRef ?? ''}-multi-select`;\r\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\r\n\r\n  useEffect(() => {\r\n    setCurrentPath(canUseDOM() ? window.location.pathname : '');\r\n    if (!props.wishlists) {\r\n      api.getWishlists().then((data) => {\r\n        if (data.isNotLoggedIn) {\r\n          setIsLoading(false);\r\n        } else {\r\n          setWishlists(data.getWishlistsResult);\r\n          setIsLoading(false);\r\n        }\r\n      });\r\n    }\r\n  }, [props.wishlists]);\r\n\r\n  const handleModalClose = () => {\r\n    setShowCreateModal(false);\r\n    setEditListName('');\r\n    setEditListDefault(false);\r\n  };\r\n\r\n  const handleCreateInputChange = (\r\n    event: React.ChangeEvent<HTMLInputElement>\r\n  ) => {\r\n    const target = event.target;\r\n    const name = target.name;\r\n    if (name === 'editListName') {\r\n      const value = target.value;\r\n      setEditListName(value);\r\n    }\r\n\r\n    if (name === 'editListDefault') {\r\n      const value = target.checked;\r\n      setEditListDefault(value);\r\n    }\r\n  };\r\n\r\n  const handleCreateList = () => {\r\n    if (editListName) {\r\n      api\r\n        .createWishlist(editListName, editListDefault)\r\n        .then((data: WishlistViewModel) => {\r\n          setWishlists(data.allWishlists);\r\n          setEditListName('');\r\n          setEditListDefault(false);\r\n\r\n          if (selectedLists?.length === 0) {\r\n            let quantity = 1;\r\n\r\n            if (props.quantity) {\r\n              if (isNaN(props.quantity) || props.quantity < 1) {\r\n                popupAlert.showNegative(\r\n                  'Please check the quantity field, only positive numbers are allowed.'\r\n                );\r\n                return;\r\n              } else {\r\n                quantity = props.quantity;\r\n              }\r\n            }\r\n\r\n            if (data.isDuplicate) {\r\n              popupAlert.showSoftNegative(\r\n                data.message ?? 'A list with this name already exists.'\r\n              );\r\n            }\r\n\r\n            api\r\n              .addItemToWishlist(\r\n                props.catalogueRef || null,\r\n                data.currentWishlistId,\r\n                quantity\r\n              )\r\n              .then(() => {\r\n                if (props.isBasketSummary) {\r\n                  if (data.isDuplicate) {\r\n                    popupAlert.showPositive('Basket saved to existing list ');\r\n                  } else {\r\n                    popupAlert.showPositive('Basket saved to new list ');\r\n                  }\r\n                } else {\r\n                  if (data.isDuplicate) {\r\n                    popupAlert.showPositive('Item added to existing list');\r\n                  } else {\r\n                    popupAlert.showPositive('Item added to new list');\r\n                  }\r\n                }\r\n                setShowCreateModal(false);\r\n              });\r\n          } else if (selectedLists?.length > 0) {\r\n            if (data.isDuplicate) {\r\n              popupAlert.showSoftNegative(\r\n                data.message ?? 'A list with this name already exists.'\r\n              );\r\n            } else if (data.isWarning) {\r\n              popupAlert.showPositive(\r\n                data.message ?? 'A list with this name already exists.'\r\n              );\r\n            } else if (data.isSuccess) {\r\n              popupAlert.showPositive(\r\n                data.message ?? `Successfully created my list ${editListName}`\r\n              );\r\n            }\r\n            setSelectedLists([...selectedLists, data.currentWishlistId]);\r\n            buttonRef.current?.click();\r\n            setShowCreateModal(false);\r\n          }\r\n        })\r\n        .catch((error: any) => {\r\n          console.log(error);\r\n          popupAlert.showNegative(\r\n            'There was a problem completing this request, please try again.'\r\n          );\r\n        });\r\n    }\r\n  };\r\n\r\n  const addItemToWishlists = () => {\r\n    let quantity = 1;\r\n\r\n    if (props.quantity) {\r\n      if (isNaN(props.quantity) || props.quantity < 1) {\r\n        popupAlert.showNegative(\r\n          'Please check the quantity field, only positive numbers are allowed.'\r\n        );\r\n        return;\r\n      } else {\r\n        quantity = props.quantity;\r\n      }\r\n    }\r\n\r\n    if (selectedLists && selectedLists.length > 0) {\r\n      api\r\n        .addItemToWishlists(props.catalogueRef || null, selectedLists, quantity)\r\n        .then(() => {\r\n          if (props.isBasketSummary) {\r\n            popupAlert.showPositive(\r\n              `Basket saved to ${selectedLists.length > 1 ? 'lists' : 'list'}`\r\n            );\r\n          } else {\r\n            popupAlert.showPositive(\r\n              `Item added to ${selectedLists.length > 1 ? 'lists' : 'list'}`\r\n            );\r\n          }\r\n          setSelectedLists([]);\r\n          buttonRef.current?.click();\r\n        });\r\n    }\r\n  };\r\n\r\n  const handleListSelect = (listId: number) => {\r\n    const isInList = selectedLists.findIndex((x) => x == listId) !== -1;\r\n    if (!isInList && listId) setSelectedLists([...selectedLists, listId]);\r\n    else if (isInList && listId) {\r\n      const index = selectedLists.indexOf(listId);\r\n      if (index !== -1) {\r\n        setSelectedLists([...selectedLists.filter((x) => x !== listId)]);\r\n      }\r\n    }\r\n  };\r\n\r\n  if (!props.isLoggedIn && props.isBasketSummary) {\r\n    return (\r\n      <div>\r\n        <a\r\n          style={{ whiteSpace: 'normal' }}\r\n          className=\"btn btn-sm btn-outline-primary btn-block\"\r\n          href={`/login/?returnUrl=${currentPath}`}\r\n        >\r\n          {'Sign in to Save Basket to List'}\r\n        </a>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  if (!props.isLoggedIn) {\r\n    return (\r\n      <div className=\"add-to-my-list\">\r\n        <a\r\n          className={`btn btn-link add-to-my-list-button ${\r\n            props.isBasketPage ? 'pl-0' : ''\r\n          }`}\r\n          href={`/login/?returnUrl=${currentPath}`}\r\n        >\r\n          <span\r\n            className={`add-to-list-label ${props.isBasketPage ? 'pl-0' : ''}`}\r\n          >\r\n            Add to My Lists\r\n          </span>\r\n        </a>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div\r\n      style={{\r\n        position: 'relative',\r\n        display: 'flex'\r\n      }}\r\n    >\r\n      {isLoading && (\r\n        <LoaderMask type=\"absolute\">\r\n          <Loader size=\"xsmall\" />\r\n        </LoaderMask>\r\n      )}\r\n      <div className=\"add-to-my-list\">\r\n        <Listbox value={selectedLists} multiple>\r\n          <Listbox.Button\r\n            id={listBoxId}\r\n            className=\"multi-select btn btn-primary\"\r\n            ref={buttonRef}\r\n          >\r\n            {props.dropdownTitle || 'Add to List...'}\r\n          </Listbox.Button>\r\n          <Transition\r\n            as={Fragment}\r\n            leave=\"transition ease-in duration-100\"\r\n            leaveFrom=\"opacity-100\"\r\n            leaveTo=\"opacity-0\"\r\n          >\r\n            <Listbox.Options className=\"options\">\r\n              <Listbox.Option\r\n                key={'create'}\r\n                className=\"create-option\"\r\n                value={listBoxId}\r\n                onClick={() => {\r\n                  setShowCreateModal(true);\r\n                  setEditListDefault(wishlists?.length === 0 ?? false);\r\n                }}\r\n              >\r\n                Create new list\r\n              </Listbox.Option>\r\n              <div className=\"list-items\">\r\n                {wishlists?.map((list) => (\r\n                  <Listbox.Option\r\n                    key={list.wishlistId}\r\n                    className={({ active, selected }) =>\r\n                      `option  ${active || selected ? 'active' : ''}\r\n                    `\r\n                    }\r\n                    value={list.wishlistId}\r\n                  >\r\n                    <Checkbox\r\n                      className=\"checkbox\"\r\n                      checked={\r\n                        selectedLists.findIndex((x) => x == list.wishlistId) !==\r\n                        -1\r\n                      }\r\n                      label={list.name}\r\n                      name={list.name ?? ''}\r\n                      value={list.wishlistId}\r\n                      onChange={(\r\n                        event: React.ChangeEvent<HTMLInputElement>\r\n                      ) => {\r\n                        event.stopPropagation();\r\n\r\n                        if (list.wishlistId) handleListSelect(list.wishlistId);\r\n                      }}\r\n                    />\r\n                  </Listbox.Option>\r\n                ))}\r\n              </div>\r\n\r\n              <div className=\"footer\">\r\n                <div className=\"buttons\">\r\n                  <Button\r\n                    handleClick={() => {\r\n                      setSelectedLists([]);\r\n                      buttonRef.current?.click();\r\n                    }}\r\n                    className=\"my-list-btn btn btn-outline-primary\"\r\n                  >\r\n                    Clear\r\n                  </Button>\r\n                  <Button\r\n                    handleClick={() => void addItemToWishlists()}\r\n                    className=\"my-list-btn my-list-btn-add mx-2 btn btn-primary\"\r\n                  >\r\n                    Add\r\n                  </Button>\r\n                </div>\r\n              </div>\r\n            </Listbox.Options>\r\n          </Transition>\r\n        </Listbox>\r\n      </div>\r\n      <Modal\r\n        title=\"Create a New List\"\r\n        isVisible={showCreateModal}\r\n        handleClose={handleModalClose}\r\n        escapeToClose={true}\r\n        footer={\r\n          <Footer\r\n            isBasketPage={props.isBasketPage || false}\r\n            handleCancel={handleModalClose}\r\n            handleComplete={handleCreateList}\r\n            btnText={selectedLists?.length > 0 ? 'Create' : 'Create and Add'}\r\n          />\r\n        }\r\n      >\r\n        <WishlistEditForm\r\n          handleSubmit={handleCreateList}\r\n          isDefaultVisible={(wishlists ?? []).length > 0}\r\n          handleInputChange={handleCreateInputChange}\r\n          listName={editListName}\r\n          listIsDefault={editListDefault}\r\n        />\r\n      </Modal>\r\n    </div>\r\n  );\r\n}\r\n\r\ninterface FooterProps {\r\n  handleCancel: () => void;\r\n  handleComplete: () => void;\r\n  isBasketPage: boolean;\r\n  btnText?: string;\r\n}\r\n\r\nconst Footer = ({ handleCancel, handleComplete, btnText }: FooterProps) => (\r\n  <>\r\n    <button onClick={handleCancel} className=\"btn btn-outline-primary\">\r\n      Cancel\r\n    </button>\r\n    <button onClick={handleComplete} className=\"btn btn-primary\">\r\n      {btnText ?? 'Create'}\r\n    </button>\r\n  </>\r\n);\r\n\r\nFooter.propTypes = {\r\n  handleCancel: PropTypes.func.isRequired,\r\n  handleComplete: PropTypes.func.isRequired,\r\n  isBasketPage: PropTypes.bool\r\n};\r\n","import { ChangeEvent } from 'react';\r\n\r\ninterface CheckboxProps {\r\n  label?: string;\r\n  type?: string;\r\n  name: string;\r\n  id?: string;\r\n  checked?: boolean;\r\n  required?: boolean;\r\n  disabled?: boolean;\r\n  error?: boolean;\r\n  placeholder?: string;\r\n  value?: string | number;\r\n  onChange?(e: ChangeEvent<HTMLInputElement>): void;\r\n  indeterminate?: boolean;\r\n  className?: string;\r\n}\r\n\r\nconst Checkbox = ({\r\n  label = '',\r\n  name = '',\r\n  id,\r\n  checked = false,\r\n  required = false,\r\n  disabled = false,\r\n  value,\r\n  onChange,\r\n  indeterminate,\r\n  className\r\n}: CheckboxProps) => {\r\n  const requiredMarker = required ? (\r\n    <>\r\n      &nbsp;\r\n      <span className=\"text-danger\">*</span>\r\n    </>\r\n  ) : null;\r\n\r\n  return (\r\n    <label\r\n      className={`custom-control custom-checkbox align-items-center ${className}`}\r\n    >\r\n      <input\r\n        className=\"custom-control-input\"\r\n        id={id}\r\n        name={name}\r\n        type=\"checkbox\"\r\n        value={value}\r\n        checked={checked}\r\n        disabled={disabled}\r\n        onChange={onChange}\r\n        ref={(el) => el && (el.indeterminate = indeterminate as boolean)}\r\n      />\r\n      <span className=\"custom-control-indicator\" />\r\n      <span className=\"custom-control-description\">\r\n        {label}\r\n        {requiredMarker}\r\n      </span>\r\n    </label>\r\n  );\r\n};\r\n\r\nexport default Checkbox;\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAYA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AAEA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AAAA;AAGA;AACA;AACA;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AAAA;AACA;AAAA;AAAA;AACA;AAAA;AAGA;AAAA;AACA;AAAA;AAGA;AAAA;AACA;AAAA;AAGA;AACA;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AACA;AAGA;AACA;AAGA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AAEA;AACA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AACA;AACA;AAHA;AAAA;AADA;AAUA;AACA;AACA;AACA;AACA;AAAA;AAEA;AAGA;AAJA;AAOA;AADA;AAAA;AANA;AADA;AAeA;AACA;AACA;AAEA;AACA;AACA;AAFA;AADA;AAOA;AAAA;AACA;AAAA;AADA;AAIA;AAAA;AACA;AAAA;AAAA;AAEA;AACA;AACA;AAHA;AAAA;AAQA;AACA;AACA;AACA;AAJA;AAMA;AAAA;AAGA;AACA;AACA;AAAA;AACA;AAAA;AACA;AACA;AAPA;AAAA;AAWA;AAAA;AACA;AACA;AADA;AAGA;AAAA;AAAA;AAAA;AAAA;AAIA;AANA;AASA;AACA;AACA;AAAA;AAGA;AACA;AACA;AACA;AAGA;AAEA;AACA;AAfA;AARA;AADA;AADA;AA+BA;AAAA;AACA;AAAA;AAEA;AAAA;AACA;AAAA;AACA;AACA;AACA;AALA;AAAA;AAUA;AAAA;AAAA;AACA;AAFA;AAAA;AAVA;AADA;AA3CA;AANA;AARA;AADA;AAkFA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAJA;AANA;AAeA;AACA;AACA;AACA;AACA;AALA;AAdA;AA5FA;AAoHA;AACA;AAQA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AAJA;AADA;AACA;AAUA;AACA;AACA;AACA;AAHA;;;;;;;;;;;;;;;;;;;;;;AC9VA;AAWA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AAEA;AAAA;AAAA;AAFA;AAMA;AAEA;AADA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AATA;AAWA;AAAA;AACA;AAAA;AAAA;AAfA;AAqBA;AACA;AACA;;;;A","sourceRoot":""}