{"version":3,"file":"productList~productMediaGallery~relatedProducts.f0024c919ee946962208.js","sources":["webpack:///./Source/FECOM.Web.UI/Scripts/apps/product/components/ProductsILove.tsx","webpack:///./Source/FECOM.Web.UI/Scripts/components/Icon.tsx","webpack:///./Source/FECOM.Web.UI/Scripts/components/Loader.tsx","webpack:///./Source/FECOM.Web.UI/Scripts/utilities/canUseDOM.ts","webpack:///./Source/FECOM.Web.UI/Scripts/utilities/productsILoveCoordinator.ts"],"sourcesContent":["import { Component } from 'react';\r\nimport Icon from '../../../components/Icon';\r\nimport canUseDOM from '../../../utilities/canUseDOM';\r\nimport popupAlert from '../../../utilities/popup-alert';\r\nimport { getIsFavourite } from '../productPageApi';\r\nimport {\r\n  PILannounce,\r\n  PILregister,\r\n  PILunregister\r\n} from '../../../utilities/productsILoveCoordinator';\r\n\r\nexport enum PositionLeftRight {\r\n  Left = 'left',\r\n  Right = 'right'\r\n}\r\n\r\ninterface ProductsILoveProps {\r\n  catalogueRef?: string | null;\r\n  isLoggedIn?: boolean;\r\n  isEnabled: boolean;\r\n  positionLeftRight?: PositionLeftRight;\r\n  top?: string;\r\n  right?: string;\r\n}\r\n\r\ninterface ProductsILoveState {\r\n  showLoginMessage: boolean;\r\n  isFavourite: boolean | null;\r\n  currentPath: string;\r\n  onHover: boolean;\r\n}\r\n\r\nclass ProductsILove extends Component<ProductsILoveProps, ProductsILoveState> {\r\n  constructor(props: ProductsILoveProps) {\r\n    super(props);\r\n\r\n    const { isLoggedIn } = this.props;\r\n\r\n    this.state = {\r\n      showLoginMessage: isLoggedIn === false,\r\n      currentPath: canUseDOM() ? window.location.pathname : '',\r\n      isFavourite: null,\r\n      onHover: false\r\n    };\r\n  }\r\n\r\n  catalogueRef? = this.props.catalogueRef;\r\n  apiBasePath = '/umbraco/surface/productssurface/';\r\n  path = `${this.apiBasePath}UpdateFavouriteProducts`;\r\n  headers: RequestInit = {\r\n    credentials: 'same-origin',\r\n    headers: {\r\n      'content-type': 'application/json',\r\n      accept: 'application/json'\r\n    }\r\n  };\r\n\r\n  componentDidMount() {\r\n    this.getIsFavouriteData();\r\n    if (this.catalogueRef) {\r\n      PILregister(this.catalogueRef, (value: boolean) => {\r\n        this.setState({\r\n          isFavourite: value\r\n        });\r\n      });\r\n    }\r\n  }\r\n  componentWillUnmount(): void {\r\n    //remove from products i love registration\r\n    PILunregister();\r\n  }\r\n\r\n  getIsFavouriteData = () => {\r\n    getIsFavourite(this.props.catalogueRef)\r\n      .then((data: any) => {\r\n        this.setState({\r\n          isFavourite: data\r\n        });\r\n      })\r\n      .catch((err: any) => console.error(err));\r\n  };\r\n\r\n  handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    const button = event.target as HTMLDivElement;\r\n    if (this.catalogueRef && this.catalogueRef !== null) {\r\n      if (this.state.isFavourite) {\r\n        this.deleteFavourite(button, this.catalogueRef);\r\n      } else if (!this.state.isFavourite) {\r\n        this.addFavourite(button, this.catalogueRef);\r\n      }\r\n    }\r\n  };\r\n\r\n  addFavourite(button: HTMLDivElement, catalogueRef: string | null) {\r\n    return fetch(this.path, {\r\n      method: 'POST',\r\n      ...this.headers,\r\n      body: JSON.stringify({\r\n        catalogueRefs: [catalogueRef],\r\n        isRemove: false\r\n      })\r\n    })\r\n      .then((response: any) => {\r\n        if (response.ok && response.warning) {\r\n          popupAlert.showWarning(response.message);\r\n        } else if (!response.ok) {\r\n          popupAlert.showNegative(\r\n            'There was a problem completing this request, please try again.'\r\n          );\r\n        } else {\r\n          this.setState({\r\n            isFavourite: true\r\n          });\r\n          if (this.catalogueRef) {\r\n            PILannounce(this.catalogueRef, true);\r\n          }\r\n          popupAlert.showPositive('Item has been added to Products I Love');\r\n        }\r\n      })\r\n      .catch((error: any) => {\r\n        console.log('Error:', error);\r\n      });\r\n  }\r\n\r\n  deleteFavourite(button: HTMLDivElement, catalogueRef: string) {\r\n    return fetch(this.path, {\r\n      method: 'POST',\r\n      ...this.headers,\r\n      body: JSON.stringify({\r\n        catalogueRefs: [catalogueRef],\r\n        isRemove: true\r\n      })\r\n    })\r\n      .then((response: any) => {\r\n        if (response.ok && response.warning) {\r\n          popupAlert.showWarning(response.message);\r\n        } else if (!response.ok) {\r\n          popupAlert.showNegative(\r\n            'There was a problem completing this request, please try again.'\r\n          );\r\n        } else {\r\n          this.setState({\r\n            isFavourite: false\r\n          });\r\n          if (this.catalogueRef) {\r\n            PILannounce(this.catalogueRef, false);\r\n          }\r\n          popupAlert.showPositive('Item has been removed from Products I Love');\r\n        }\r\n      })\r\n      .catch((error: any) => {\r\n        console.log('Error:', error);\r\n      });\r\n  }\r\n\r\n  render() {\r\n    const { isFavourite } = this.state;\r\n    const positionLeftRight =\r\n      this.props.positionLeftRight ?? PositionLeftRight.Right;\r\n    const top = this.props.top ?? '5px';\r\n    const leftRight = this.props.right ?? '5px';\r\n\r\n    return (\r\n      <>\r\n        {this.props.isEnabled && this.catalogueRef != '' && (\r\n          <div\r\n            style={{\r\n              position: 'absolute',\r\n              [positionLeftRight]: leftRight,\r\n              top: top,\r\n              height: '14%',\r\n              width: '14%',\r\n              minHeight: '30px',\r\n              minWidth: '30px',\r\n              maxHeight: '50px',\r\n              maxWidth: '50px',\r\n              fontSize: '28px'\r\n            }}\r\n          >\r\n            <div\r\n              style={{ position: 'relative', height: '100%' }}\r\n              className=\"icon--productsilove\"\r\n              onClick={(e) => {\r\n                this.handleClick(e);\r\n                e.preventDefault();\r\n                e.stopPropagation();\r\n              }}\r\n              onMouseOver={() => {\r\n                this.setState({\r\n                  onHover: true\r\n                });\r\n              }}\r\n              onMouseOut={() => {\r\n                this.setState({\r\n                  onHover: false\r\n                });\r\n              }}\r\n            >\r\n              {isFavourite || this.state.onHover ? (\r\n                <Icon\r\n                  iconName=\"heart-on-product-hover\"\r\n                  modifierCss={\r\n                    isFavourite\r\n                      ? 'icon--productsilove-mod--clicked'\r\n                      : 'icon--productsilove-mod'\r\n                  }\r\n                />\r\n              ) : (\r\n                <Icon\r\n                  iconName=\"heart-on-product\"\r\n                  modifierCss={\r\n                    isFavourite\r\n                      ? 'icon--productsilove-mod--clicked'\r\n                      : 'icon--productsilove-mod'\r\n                  }\r\n                />\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\nexport default ProductsILove;\r\n","interface IconProps {\r\n  iconName: string;\r\n  size?: number;\r\n  modifierCss?: string;\r\n}\r\n\r\nconst Icon = ({ iconName, size, modifierCss = '' }: IconProps) => {\r\n  const cssSize = size ? `icon--${size}` : '';\r\n  const cacheBuster = global.cacheBuster;\r\n\r\n  function createMarkup() {\r\n    return {\r\n      __html: `<use xlink:href=\"/bundles/svg/sprite.svg?cb=${cacheBuster}#${iconName}\"></use>`\r\n    };\r\n  }\r\n\r\n  return (\r\n    <svg\r\n      className={`icon ${cssSize} ${modifierCss}`}\r\n      dangerouslySetInnerHTML={createMarkup()}\r\n    />\r\n  );\r\n};\r\n\r\nexport default Icon;\r\n","import { FunctionComponent } from 'react';\r\n\r\ninterface LoaderProps {\r\n    isLoading?: boolean;\r\n    size?: 'xsmall' | 'small';\r\n    style?: React.StyleHTMLAttributes<HTMLDivElement>\r\n    inlineBlock?: boolean;\r\n    cssModifiers?: string;\r\n}\r\n\r\nconst Loader: FunctionComponent<LoaderProps> = ({ isLoading, size, inlineBlock = false, cssModifiers, style }: LoaderProps) => {\r\n    const cssClasses = ['loader'];\r\n\r\n    if (size) {\r\n        cssClasses.push(`loader--${size}`);\r\n    }\r\n    if (inlineBlock) {\r\n        cssClasses.push('loader--inline-block');\r\n    }\r\n\r\n    if (cssModifiers) {\r\n        cssClasses.push(cssModifiers);\r\n    }\r\n\r\n    if (isLoading === false) {\r\n        return null;\r\n    }\r\n\r\n    return (\r\n        <div style={style} className={cssClasses.join(' ')} />\r\n    );\r\n};\r\n\r\nexport default Loader;","function canUseDOM() {\r\n  return !!(\r\n    typeof window !== 'undefined' &&\r\n    window.document &&\r\n    window.document.createElement\r\n  );\r\n}\r\n\r\nexport default canUseDOM;\r\n","/**\r\n * Coordinator for when multiple PILs are possible on page for the same item\r\n */\r\n\r\nlet delegateArray: { catRef: string; d: (value: boolean) => void }[] = [];\r\n\r\nexport function PILregister(\r\n  catalogueRef: string,\r\n  delegate: (value: boolean) => void\r\n) {\r\n  //add our delegates\r\n  delegateArray.push({ catRef: catalogueRef, d: delegate });\r\n}\r\n\r\nexport function PILunregister() {\r\n  //delete all when unregister is called\r\n  delegateArray = [];\r\n}\r\n\r\nexport function PILannounce(catalogueRef: string, value: boolean): void {\r\n  for (const delegate of delegateArray.filter(\r\n    (x) => x.catRef == catalogueRef\r\n  )) {\r\n    //announce to all delegates\r\n    delegate.d(value);\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;;;AAMA;AACA;AADA;AAAA;AAAA;AAAA;AACA;AAoBA;;;;;AACA;AAAA;AACA;AADA;AACA;AAAA;AADA;AAAA;AAAA;AAAA;AAiBA;AACA;AACA;AACA;AAFA;AAFA;AACA;AAjBA;AAwCA;AAEA;AACA;AADA;AAGA;AACA;AAAA;AACA;AACA;AAhDA;AAkDA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAxDA;AAEA;AACA;AACA;AACA;AACA;AAJA;AALA;AAWA;AACA;;;AAYA;AAAA;AACA;AAAA;AACA;AAAA;AACA;AACA;AACA;AADA;AAGA;AACA;AACA;;;AACA;AACA;AACA;AACA;;;AAuBA;AAAA;AACA;AAAA;AACA;AADA;AAGA;AACA;AACA;AAFA;AAHA;AASA;AACA;AACA;AACA;AAGA;AACA;AACA;AADA;AACA;AAEA;AACA;AACA;AACA;AAAA;AACA;AACA;AAEA;AACA;AACA;;;AAEA;AAAA;AACA;AAAA;AACA;AADA;AAGA;AACA;AACA;AAFA;AAHA;AASA;AACA;AACA;AACA;AAGA;AACA;AACA;AADA;AACA;AAEA;AACA;AACA;AACA;AAAA;AACA;AACA;AAEA;AACA;AACA;;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AACA;AAEA;AACA;AAEA;AACA;AAGA;AACA;AADA;AADA;AAeA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AADA;AAGA;AACA;AACA;AACA;AADA;AAGA;AAjBA;AAqBA;AACA;AAFA;AAUA;AACA;AAFA;AA7BA;AAdA;AAFA;AA2DA;;;;AA9LA;AACA;AAgMA;;;;;;;;;;;;;;;;;;;;AC3NA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AADA;AAGA;AACA;AACA;AAEA;AACA;AAFA;AAKA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;ACdA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAEA;AACA;AACA;;;;;;;;;;;;ACjCA;AAAA;AACA;AAKA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACRA;AACA;AACA;AAEA;AAEA;AAIA;AACA;AAAA;AAAA;AAAA;AACA;AAEA;AACA;AACA;AACA;AAEA;AAAA;AAEA;AAAA;AAFA;AACA;AADA;AACA;AAEA;AACA;AACA;AACA;AANA;AAAA;AAAA;AAAA;AAAA;AAOA;;;;A","sourceRoot":""}