{"version":3,"sources":["webpack:///./src/pages/customer-centre/resources/financial-tools-resources/budget-planner/index.tsx"],"names":["withTranslation","LocaleNameSpaceKeys","CUSTOMER_CENTRE","props","t","activeLocaleTag","useLocaleContext","iFrameClassName","setIFrameClassName","useState","iFrameStep","setIFrameStep","layoutOptions","seo","title","heroSection","options","heroImage","fileName","alt","accentColor","HeroSectionColors","SKY_BLUE","budgetPlannerLinks","en","video","frame","fr","className","onLoad","src","scrolling","i18nKey","href"],"mappings":"4FAAA,kHAgFeA,sBAAgBC,IAAoBC,gBAApCF,CAnEyBG,IACtC,MAAM,EAAEC,GAAMD,GACR,gBAAEE,GAAoBC,eACtB,EAACC,EAAD,EAAkBC,GAAsBC,mBAAS,KACjD,EAACC,EAAD,EAAaC,GAAiBF,mBAAS,GAEvCG,EAA+B,CACnCC,IAAK,CACHC,MAAOV,EAAE,4BAKXW,YAAa,CACXC,QAAS,CACPC,UAAW,CACTC,SAAU,oBACVC,IAAK,cAEPC,YAAaC,IAAkBC,YAK/BC,EAAqB,CACzBC,GAAI,CACFC,MAAO,gDACPC,MAAO,sEAETC,GAAI,CACFF,MAAO,8CACPC,MAAO,iFAYX,OACE,kBAAC,IAAD,CAAQV,QAASJ,EAAegB,UAAU,iBACxC,yBAAKA,UAAU,mBACb,yBAAKA,UAAU,2CACb,6BAASA,UAAU,oCACjB,4BACEA,UAAWrB,EACXsB,OAfS,KACfnB,EACFF,EAAmB,aAEnBG,EAAc,IAYNmB,IAAKP,EAAmBlB,GAAiBqB,MACzCZ,MAAM,wBACNiB,UAAU,QAEZ,uBAAGH,UAAU,mCACX,kBAAC,IAAD,CAAOxB,EAAGA,EAAG4B,QAAQ,sBACnB,kBAAC,IAAD,CAAcC,KAAMV,EAAmBlB,GAAiBoB,iB","file":"component---src-pages-customer-centre-resources-financial-tools-resources-budget-planner-index-tsx-7a363a15b63a29055d12.js","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { PageProps } from 'gatsby';\nimport { WithTranslation, Trans, withTranslation } from 'react-i18next';\n\nimport Layout, { LayoutOptions, HeroSectionColors } from '../../../../../components/Layout/Layout';\nimport { LocaleNameSpaceKeys } from '../../../../../localization/translations';\nimport ExternalLink from '../../../../../components/ExternalLink/ExternalLink';\nimport { useLocaleContext } from '../../../../../context/Locale';\n\nimport './style.scss';\n\ntype Props = PageProps & WithTranslation;\n\nconst BudgetPlanner: React.FC<Props> = (props: Props) => {\n  const { t } = props;\n  const { activeLocaleTag } = useLocaleContext();\n  const [iFrameClassName, setIFrameClassName] = useState('');\n  const [iFrameStep, setIFrameStep] = useState(0);\n\n  const layoutOptions: LayoutOptions = {\n    seo: {\n      title: t('budgetPlanner.seo.title'),\n    },\n    // page: {\n    //   title: t('budgetPlanner.heading'),\n    // },\n    heroSection: {\n      options: {\n        heroImage: {\n          fileName: 'hero-image-13.jpg',\n          alt: 'Hero Image',\n        },\n        accentColor: HeroSectionColors.SKY_BLUE,\n      },\n    },\n  };\n\n  const budgetPlannerLinks = {\n    en: {\n      video: 'https://www.youtube.com/watch?v=eidft2ovmQc&t',\n      frame: 'https://itools-ioutils.fcac-acfc.gc.ca/BP-PB-Widget/budget-planner',\n    },\n    fr: {\n      video: 'https://www.youtube.com/watch?v=UC6FkmYKiHY',\n      frame: 'https://itools-ioutils.fcac-acfc.gc.ca/BP-PB-Widget/planificateur-budgetaire',\n    },\n  };\n\n  const addClassName = () => {\n    if (iFrameStep) {\n      setIFrameClassName('next-step');\n    } else {\n      setIFrameStep(1);\n    }\n  };\n\n  return (\n    <Layout options={layoutOptions} className=\"BudgetPlanner\">\n      <div className=\"grid-container \">\n        <div className=\"row row-wrap BudgetPlanner__generic-gap\">\n          <section className=\"column column-100 budget-planner\">\n            <iframe\n              className={iFrameClassName}\n              onLoad={addClassName}\n              src={budgetPlannerLinks[activeLocaleTag].frame}\n              title=\"FCAC - Budget Planner\"\n              scrolling=\"yes\"\n            />\n            <p className=\"BudgetPlanner__body-generic-gap\">\n              <Trans t={t} i18nKey=\"budgetPlanner.body\">\n                <ExternalLink href={budgetPlannerLinks[activeLocaleTag].video} />\n              </Trans>\n            </p>\n          </section>\n        </div>\n      </div>\n    </Layout>\n  );\n};\n\nexport default withTranslation(LocaleNameSpaceKeys.CUSTOMER_CENTRE)(BudgetPlanner);\n"],"sourceRoot":""}