{"version":3,"file":"components-ui-builder-column-with-images-022ea862e1d1b405ac81.js","mappings":"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","sources":["webpack://www-differentdog-com/./src/components/ui-builder/column-with-images/index.tsx"],"sourcesContent":["import { Builder } from '@builder.io/react'\nimport React, { useEffect } from 'react'\nimport Slider from 'react-slick'\nimport LinkButton, { LinkButtonProp } from '../common/button'\nimport './column-with-images.css'\nimport CdnImage from 'components/util/CdnImage'\n// import CloudinaryImage from 'components/util/CloudinaryImage'\n\nenum Alignment {\n  Center = 'center',\n  Left = 'left',\n  Right = 'right'\n}\ninterface Step {\n  // cloudinaryImage: any\n  builderImage: any\n  imageAltText: string\n  descriptionTitleText: string\n  descriptionTitleTextAlignment: Alignment\n  descriptionText: string\n  descriptionTextExtra: string\n  descriptionTextAlignment: Alignment\n  stepBackgroundColor: string\n  optimalImgEnable: boolean\n  linkLabel: string\n  link: string\n}\ninterface Props {\n  backgroundColor: string\n  steps: Step[]\n  stepDescriptionTitleTextColor: string\n  stepDescriptionTextColor: string\n  buttonOneProp: LinkButtonProp\n  optionalImage: boolean\n  cloudinaryOptionalImage: any\n  builderOptionalImage: any\n  optionalImageAltText: string\n  imageProperty: string\n  imageOrientation: 'landscape' | 'portrait'\n}\n\nfunction SamplePrevArrow(props: any) {\n  const { className, style, onClick } = props\n  return (\n    <div\n      className={className}\n      style={{\n        ...style,\n        display: 'flex',\n        justifyContent: 'center',\n        zIndex: 2,\n        left: '-14px !important',\n        top: '50% !imporatant',\n        transform: 'translateY(-50%) !important'\n      }}\n      onClick={onClick}\n    />\n  )\n}\n\nfunction SampleNextArrow(props: any) {\n  const { className, style, onClick } = props\n  return (\n    <div\n      className={className}\n      style={{\n        ...style,\n        display: 'flex',\n        justifyContent: 'center',\n        zIndex: 2,\n        right: '-14px !important',\n        top: '50% !imporatant',\n        transform: 'translateY(-50%) !important'\n      }}\n      onClick={onClick}\n    />\n  )\n}\n\nconst settingsDesktop = {\n  dots: false,\n  infinite: false,\n  speed: 500,\n  slidesToShow: 4,\n  slidesToScroll: 1,\n  nextArrow: <SampleNextArrow />,\n  prevArrow: <SamplePrevArrow />\n}\n\nconst settingsMobile = {\n  dots: false,\n  infinite: false,\n  speed: 500,\n  slidesToShow: 2,\n  slidesToScroll: 1,\n  nextArrow: <SampleNextArrow />,\n  prevArrow: <SamplePrevArrow />\n}\n\nconst ColumnWithImages = ({\n  backgroundColor,\n  steps,\n  stepDescriptionTitleTextColor,\n  stepDescriptionTextColor,\n  buttonOneProp,\n  optionalImage,\n  cloudinaryOptionalImage,\n  builderOptionalImage,\n  optionalImageAltText = '',\n  imageProperty,\n  imageOrientation\n}: Props) => {\n  useEffect(() => {\n    const handleScroll = () => {\n      const hash = window.location.hash\n      if (hash) {\n        const decodedHash = decodeURIComponent(hash.slice(1))\n        const targetElement = document.getElementById(decodedHash)\n        if (targetElement) {\n          targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' })\n        }\n      }\n    }\n\n    handleScroll()\n    window.addEventListener('load', handleScroll)\n\n    return () => {\n      window.removeEventListener('load', handleScroll)\n    }\n  }, [])\n\n  const getAlignmentClass = (textAlignment: any) => {\n    if (textAlignment === Alignment.Right) {\n      return 'text-right'\n    }\n    if (textAlignment === Alignment.Center) {\n      return 'text-center'\n    }\n    return 'text-left'\n  }\n\n  function getImgOrientation() {\n    if (imageOrientation === 'landscape') {\n      return 'h-44'\n    }\n    return 'h-60'\n  }\n\n  const handleInputClick = (e: any, linkLabel: string) => {\n    try {\n      e.preventDefault()\n\n      const hash = linkLabel.toLowerCase().replace(/\\s+/g, '-')\n\n      if (window.location.href.includes('/treats')) {\n        // when on the treats page\n        const targetElement = document.getElementById(hash)\n        if (targetElement) {\n          window.history.pushState(null, '', `#${hash}`)\n          targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' })\n        } else {\n          console.log(`handleInputClick: Element with id \"${hash}\" not found`)\n        }\n      } else {\n        // redirect to treats page with hash\n        window.location.href = `/treats#${hash}`\n      }\n    } catch (error) {\n      console.error('Error in handleInputClick:', error)\n      window.location.href = '/treats'\n    }\n  }\n\n  return (\n    <div className=\"m-auto w-full\" style={{ backgroundColor }}>\n      <div className=\"mx-auto max-w-7xl py-5 sm:px-2 sm:py-10 lg:px-4\">\n        {/* ================= Mobile Slider start */}\n        <div className=\"relative flex justify-center md:hidden\">\n          <Slider {...settingsMobile} style={{ width: '85%' }}>\n            {steps?.map((step: Step, i: number) => (\n              <div key={i} className=\"mx-auto !flex h-full max-w-sm justify-center\">\n                <div\n                  className=\"mx-2 my-0 flex w-full flex-col rounded-3xl h-full\"\n                  style={{\n                    backgroundColor: step?.stepBackgroundColor || '#F9F5F1'\n                  }}\n                >\n                  <div className={`w-full sm:flex-shrink-0 ${getImgOrientation()}`}>\n                    <CdnImage\n                      className={`${imageProperty} rounded-t-3xl`}\n                      url={step.builderImage}\n                      alt={step.imageAltText}\n                      steps={[400, 300]}\n                      style={{\n                        width: '400px',\n                        height: '280px',\n                        maxHeight: '100%',\n                        maxWidth: '100%'\n                      }}\n                    />\n                    {/* {step.builderImage ? (\n                      <CdnImage\n                        className={`${imageProperty}`}\n                        url={step.builderImage}\n                        alt={step.imageAltText}\n                        steps={[400, 300]}\n                        style={{\n                          width: '400px',\n                          height: '280px',\n                          maxHeight: '100%',\n                          maxWidth: '100%'\n                        }}\n                      />\n                    ) : (\n                      <CloudinaryImage\n                        className={`${imageProperty}`}\n                        publicId={step.cloudinaryImage?.public_id}\n                        alt={step.imageAltText}\n                        steps={[400, 300]}\n                        style={{\n                          width: '400px',\n                          height: '280px',\n                          maxHeight: '100%',\n                          maxWidth: '100%'\n                        }}\n                      />\n                    )} */}\n                  </div>\n\n                  <div className=\"flex flex-col justify-between p-6 pt-0 flex-grow\">\n                    <div>\n                      <a\n                        href={`${step?.link}`}\n                        onClick={e => {\n                          handleInputClick(e, step?.linkLabel)\n                        }}\n                      >\n                        <p\n                          className={` enable-list-styles my-1 break-words text-base lg:text-lg font-semibold font-sans`}\n                          dangerouslySetInnerHTML={{ __html: step.descriptionTitleText }}\n                          style={{ color: stepDescriptionTitleTextColor }}\n                        ></p>\n                      </a>\n                      <p\n                        className={`enable-list-styles mt-2 break-words text-base font-sans ${getAlignmentClass(\n                          step.descriptionTextAlignment\n                        )}`}\n                        dangerouslySetInnerHTML={{ __html: step.descriptionText }}\n                        style={{ color: stepDescriptionTextColor }}\n                      ></p>\n                    </div>\n                    {optionalImage && step?.optimalImgEnable && (\n                      <div>\n                        <div className=\"mx-auto my-5\" style={{ borderBottom: '3px solid black' }}></div>\n                        <div className=\"w-6/12\">\n                          <CdnImage\n                            url={builderOptionalImage}\n                            alt={optionalImageAltText}\n                            steps={[120]}\n                            style={{\n                              width: '120px',\n                              height: '55px',\n                              maxHeight: '100%',\n                              maxWidth: '100%'\n                            }}\n                          />\n                          {/* {builderOptionalImage ? (\n                            <CdnImage\n                              url={builderOptionalImage}\n                              alt={optionalImageAltText}\n                              steps={[120]}\n                              style={{\n                                width: '120px',\n                                height: '55px',\n                                maxHeight: '100%',\n                                maxWidth: '100%'\n                              }}\n                            />\n                          ) : (\n                            <CloudinaryImage\n                              publicId={cloudinaryOptionalImage?.public_id}\n                              alt={optionalImageAltText}\n                              steps={[120]}\n                              style={{\n                                width: '120px',\n                                height: '55px',\n                                maxHeight: '100%',\n                                maxWidth: '100%'\n                              }}\n                            />\n                          )} */}\n                        </div>\n                      </div>\n                    )}\n                  </div>\n                  <div className=\"p-6 pt-0 mt-auto\">\n                    <p\n                      className={`enable-list-styles break-words text-base font-sans ${getAlignmentClass(\n                        step.descriptionTextAlignment\n                      )}`}\n                      dangerouslySetInnerHTML={{ __html: step.descriptionTextExtra }}\n                      style={{ color: stepDescriptionTextColor }}\n                    ></p>\n                  </div>\n                </div>\n              </div>\n            ))}\n          </Slider>\n        </div>\n        {/* ================= Mobile Slider End*/}\n        {steps.length < 5 ? (\n          <>\n            {/* =================Start Desktop Grid*/}\n            <div className=\"hidden md:flex md:justify-center\">\n              <div className=\"flex  max-w-2xl justify-center gap-y-10 gap-x-4 px-4 md:w-full md:max-w-none\">\n                {steps?.map((step: Step, i: number) => (\n                  <div\n                    key={i}\n                    className=\"flex w-1/4 flex-col rounded-3xl\"\n                    style={{ backgroundColor: step?.stepBackgroundColor || '#F9F5F1' }}\n                  >\n                    <div className={`w-full sm:flex-shrink-0 ${getImgOrientation()}`}>\n                      <CdnImage\n                        className={`${imageProperty} rounded-t-3xl`}\n                        url={step.builderImage}\n                        alt={step.imageAltText}\n                        steps={[400, 300]}\n                        style={{\n                          width: '100%',\n                          height: '100%'\n                        }}\n                      />\n                      {/* {step.builderImage ? (\n                        <CdnImage\n                          className={`${imageProperty}`}\n                          url={step.builderImage}\n                          alt={step.imageAltText}\n                          steps={[400, 300]}\n                          style={{\n                            width: '100%',\n                            height: '100%'\n                          }}\n                        />\n                      ) : (\n                        <CloudinaryImage\n                          className={`${imageProperty}`}\n                          publicId={step.cloudinaryImage?.public_id}\n                          alt={step.imageAltText}\n                          steps={[400, 300]}\n                          style={{\n                            width: '100%',\n                            height: '100%'\n                          }}\n                        />\n                      )} */}\n                    </div>\n\n                    <div className=\"flex h-full flex-col justify-between p-6 \">\n                      <div>\n                        <a\n                          href={`${step?.link}`}\n                          onClick={e => {\n                            handleInputClick(e, step?.linkLabel)\n                          }}\n                        >\n                          <p\n                            className={`enable-list-styles my-1 break-words text-base lg:text-lg font-semibold font-sans ${getAlignmentClass(\n                              step.descriptionTitleTextAlignment\n                            )}`}\n                            dangerouslySetInnerHTML={{ __html: step.descriptionTitleText }}\n                            style={{ color: stepDescriptionTitleTextColor }}\n                          ></p>\n                        </a>\n                        <p\n                          className={`enable-list-styles mt-2 break-words text-base font-sans ${getAlignmentClass(\n                            step.descriptionTextAlignment\n                          )}`}\n                          style={{ color: stepDescriptionTextColor }}\n                          dangerouslySetInnerHTML={{ __html: step.descriptionText }}\n                        ></p>\n                        <p\n                          className={`enable-list-styles mt-2 break-words text-base font-sans ${getAlignmentClass(\n                            step.descriptionTextAlignment\n                          )}`}\n                          style={{ color: stepDescriptionTextColor }}\n                          dangerouslySetInnerHTML={{ __html: step.descriptionTextExtra }}\n                        ></p>\n                      </div>\n                      {optionalImage && step?.optimalImgEnable && (\n                        <div>\n                          <div className=\"mx-auto my-5\" style={{ borderBottom: '3px solid black' }}></div>\n                          <div className=\"w-6/12\">\n                            <CdnImage url={builderOptionalImage} alt={optionalImageAltText} steps={[120]} />\n                            {/* {builderOptionalImage ? (\n                              <CdnImage url={builderOptionalImage} alt={optionalImageAltText} steps={[120]} />\n                            ) : (\n                              <CloudinaryImage\n                                publicId={cloudinaryOptionalImage?.public_id}\n                                alt={optionalImageAltText}\n                                steps={[120]}\n                              />\n                            )} */}\n                          </div>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n            {/* ====================End Desktop Grid*/}\n          </>\n        ) : (\n          <>\n            {/* ============ Desktop slider for >=5 card Start =============*/}\n            <div className=\"hidden md:flex md:justify-center\">\n              <Slider {...settingsDesktop} style={{ width: '80%' }}>\n                {steps?.map((step: Step, i: number) => (\n                  <div key={i} className=\"!flex h-full\">\n                    <div\n                      className=\"mx-2 flex w-full flex-col rounded-3xl h-full\"\n                      style={{ backgroundColor: step?.stepBackgroundColor || '#F9F5F1' }}\n                    >\n                      <div className={`w-full sm:flex-shrink-0 ${getImgOrientation()}`}>\n                        <CdnImage\n                          className={`${imageProperty} rounded-t-3xl`}\n                          url={step.builderImage}\n                          alt={step.imageAltText}\n                          steps={[400, 300]}\n                          style={{\n                            width: '300px',\n                            // height: '200px',\n                            maxHeight: '100%',\n                            maxWidth: '100%'\n                          }}\n                        />\n                        {/* {step.builderImage ? (\n                          <CdnImage\n                            className={`${imageProperty}`}\n                            url={step.builderImage}\n                            alt={step.imageAltText}\n                            steps={[400, 300]}\n                            style={{\n                              width: '300px',\n                              height: '200px',\n                              maxHeight: '100%',\n                              maxWidth: '100%'\n                            }}\n                          />\n                        ) : (\n                          <CloudinaryImage\n                            className={`${imageProperty}`}\n                            publicId={step.cloudinaryImage?.public_id}\n                            alt={step.imageAltText}\n                            steps={[400, 300]}\n                            style={{\n                              width: '300px',\n                              height: '200px',\n                              maxHeight: '100%',\n                              maxWidth: '100%'\n                            }}\n                          />\n                        )} */}\n                      </div>\n                      <div className=\"flex flex-col justify-between p-6 pt-0 flex-grow\">\n                        <div>\n                          <a\n                            href={`${step?.link}`}\n                            onClick={e => {\n                              handleInputClick(e, step?.linkLabel)\n                            }}\n                          >\n                            <p\n                              className={`enable-list-styles my-1 break-words text-base lg:text-lg font-semibold font-sans ${getAlignmentClass(\n                                step.descriptionTitleTextAlignment\n                              )}`}\n                              dangerouslySetInnerHTML={{ __html: step.descriptionTitleText }}\n                              style={{ color: stepDescriptionTitleTextColor }}\n                            ></p>\n                          </a>\n                          <p\n                            className={`enable-list-styles mt-2 break-words text-base font-sans ${getAlignmentClass(\n                              step.descriptionTextAlignment\n                            )}`}\n                            dangerouslySetInnerHTML={{ __html: step.descriptionText }}\n                            style={{ color: stepDescriptionTextColor }}\n                          ></p>\n                        </div>\n                        {optionalImage && step?.optimalImgEnable && (\n                          <div>\n                            <div className=\"mx-auto my-5\" style={{ borderBottom: '3px solid black' }}></div>\n                            <div className=\"w-6/12\">\n                              <CdnImage\n                                url={builderOptionalImage}\n                                alt={optionalImageAltText}\n                                steps={[120]}\n                                style={{\n                                  width: '120px',\n                                  height: '55px',\n                                  maxHeight: '100%',\n                                  maxWidth: '100%'\n                                }}\n                              />\n                              {/* {builderOptionalImage ? (\n                                <CdnImage\n                                  url={builderOptionalImage}\n                                  alt={optionalImageAltText}\n                                  steps={[120]}\n                                  style={{\n                                    width: '120px',\n                                    height: '55px',\n                                    maxHeight: '100%',\n                                    maxWidth: '100%'\n                                  }}\n                                />\n                              ) : (\n                                <CloudinaryImage\n                                  publicId={cloudinaryOptionalImage?.public_id}\n                                  alt={optionalImageAltText}\n                                  steps={[120]}\n                                  style={{\n                                    width: '120px',\n                                    height: '55px',\n                                    maxHeight: '100%',\n                                    maxWidth: '100%'\n                                  }}\n                                />\n                              )} */}\n                            </div>\n                          </div>\n                        )}\n                      </div>\n\n                      <div className=\"p-6 pt-0 mt-auto\">\n                        <p\n                          className={`enable-list-styles break-words text-base font-sans ${getAlignmentClass(\n                            step.descriptionTextAlignment\n                          )}`}\n                          dangerouslySetInnerHTML={{ __html: step.descriptionTextExtra }}\n                          style={{ color: stepDescriptionTextColor }}\n                        ></p>\n                      </div>\n                    </div>\n                  </div>\n                ))}\n              </Slider>\n            </div>\n            {/* =============== Desktop slider for >=5 card End =============== */}\n          </>\n        )}\n        <div className=\"flex justify-center px-4 pt-10 text-center\" style={{ backgroundColor }}>\n          <LinkButton\n            buttonColor={buttonOneProp.buttonColor}\n            buttonUrl={buttonOneProp.buttonUrl}\n            buttonText={buttonOneProp.buttonText}\n            loggedInButtonText={buttonOneProp.loggedInButtonText}\n            buttonTextColor={buttonOneProp.buttonTextColor}\n            isLink={false}\n            classList={\n              'px-5 py-3 border border-transparent text-base font-medium rounded-full md:py-4 md:text-lg md:px-10 w-full md:w-auto'\n            }\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default ColumnWithImages\n"],"names":["Alignment","SamplePrevArrow","props","className","style","onClick","React","Object","assign","display","justifyContent","zIndex","left","top","transform","SampleNextArrow","right","settingsDesktop","dots","infinite","speed","slidesToShow","slidesToScroll","nextArrow","prevArrow","settingsMobile","_ref","backgroundColor","steps","stepDescriptionTitleTextColor","stepDescriptionTextColor","buttonOneProp","optionalImage","builderOptionalImage","cloudinaryOptionalImage","_ref$optionalImageAlt","optionalImageAltText","imageProperty","imageOrientation","useEffect","handleScroll","hash","window","location","decodedHash","decodeURIComponent","slice","targetElement","document","getElementById","scrollIntoView","behavior","block","addEventListener","removeEventListener","getAlignmentClass","textAlignment","Right","Center","getImgOrientation","handleInputClick","e","linkLabel","preventDefault","toLowerCase","replace","href","includes","history","pushState","error","console","Slider","width","map","step","i","key","stepBackgroundColor","CdnImage","url","builderImage","alt","imageAltText","height","maxHeight","maxWidth","link","dangerouslySetInnerHTML","__html","descriptionTitleText","color","descriptionTextAlignment","descriptionText","optimalImgEnable","borderBottom","descriptionTextExtra","length","descriptionTitleTextAlignment","LinkButton","buttonColor","buttonUrl","buttonText","loggedInButtonText","buttonTextColor","isLink","classList"],"sourceRoot":""}