{"version":3,"sources":["components/RenewOffer/RenewOffer.tsx","assets/images/cash-offer-bg.jpg"],"names":["RenewOffer","params","window","location","search","history","useHistory","appraisalRefNo","queryString","parse","offerPrice","React","data","setData","fetching","setFetching","error","handleRenewOffer","a","SourceTypeId","push","renewOffer","renewData","currentVin","Vin","message","getRenewData","fetch","environmentVariableList","REACT_APP_CW_CASH_OFFER","method","headers","Headers","Accept","body","JSON","stringify","AppraisalRefNo","response","json","status","Error","Details","ItemTypeId","SellItemBike","SellItemCar","console","href","includes","css","breakpoints","md","spinning","CashOfferBg","ItemYear","Make","Model","span","OwnerZip","Mileage","Color","type","size","onClick","module","exports"],"mappings":"2UA2BA,I,imDAqgBeA,UAxXc,WAC3B,IAAMC,EAASC,OAAOC,SAASC,OACzBC,EAAUC,cAGVC,EAAiBC,IAAYC,MAAMR,GAAlB,UAAyC,KAC1DS,EAAaF,IAAYC,MAAMR,GAAlB,iBAAgD,KANlC,EAQTU,WAAoB,MARX,mBAQ1BC,EAR0B,KAQpBC,EARoB,OASDF,YAAe,GATd,mBAS1BG,EAT0B,KAShBC,EATgB,OAUPJ,WAAe,IAVR,mBAU1BK,EAV0B,KAuB3BC,GAvB2B,KAuBX,uCAAG,sBAAAC,EAAA,sDACvB,IAM4B,KAAtBN,EAAKO,aACPd,EAAQe,KAAK,kCAAmC,CAC9CC,YAAY,EACZC,UAAWV,EACXW,WAAU,OAAEX,QAAF,IAAEA,OAAF,EAAEA,EAAMY,MAGpBnB,EAAQe,KAAK,4BAA6B,CACxCC,YAAY,EACZC,UAAWV,EACXW,WAAU,OAAEX,QAAF,IAAEA,OAAF,EAAEA,EAAMY,MAGtB,MAAOR,GACP,IAAaA,MAAM,CAEjBS,QAAST,EAAMS,SAAW,6CAvBP,2CAAH,sDA4BhBC,EAAY,uCAAG,WAAOnB,GAAP,mBAAAW,EAAA,sEAEjBH,GAAY,GAFK,SAIMY,MAAM,GAAD,OACvBC,IAAwBC,wBADD,gCAE1B,CACEC,OAAQ,OACRC,QAAS,IAAIC,QAAQ,CACnBC,OAAQ,mBACR,eAAgB,qBAElBC,KAAMC,KAAKC,UAAU,CACnBC,eAAgB9B,MAbL,cAIX+B,EAJW,gBAkBsBA,EAASC,OAlB/B,UAkBXjB,EAlBW,OAoBO,MAApBgB,EAASE,OApBI,uBAqBT,IAAIC,MAAJ,UAAUnB,EAAUmB,aAApB,aAAU,EAAiBC,SArBlB,QAwBjB7B,EAC2B,IAAzBS,EAAUqB,WACNrB,EAAUsB,aACVtB,EAAUuB,aA3BC,kDA8BjBC,QAAQ9B,MAAR,MA9BiB,yBAgCjBD,GAAY,GAhCK,6EAAH,sDAwElB,OApCAJ,aAAgB,WACd,IAAMoC,EAAO7C,OAAOC,SAAS4C,KACzBA,EAAKC,SAAS,YAAkD,IAArCD,EAAKC,SAAS,oBAC3CtB,EAAanB,KA+Bd,KAEEK,GAAQE,EAET,qBACEmC,IAAKA,cAAF,6KAaoBC,IAAYC,GAbhC,wDAkBH,mBAAMC,UAAU,MAKlBpC,GAAUN,GAAeH,GAgExBO,GAAYF,EAEb,qBACEqC,IAAKA,cAAF,oFAIuBI,IAJvB,mPAkBH,qBACEJ,IAAG,GAoBH,oBACEA,IAAG,GADL,sBAeA,mBACEA,IAAG,GAiBH,wBACGrC,EAAK0C,SADR,IACmB1C,EAAK2C,MAExB,wBAAK3C,EAAK4C,QAEZ,mBACEP,IAAG,GAMH,mBAAKQ,KAAM,IACT,+BACuB,KAAtB7C,EAAKO,aAAsB,KAAOP,EAAK8C,UAG1C,mBAAKD,KAAM,IACT,mCACC7C,EAAK+C,UAIV,mBACEV,IAAG,GAMH,mBAAKQ,KAAM,IACT,iCAEC7C,EAAKgD,OAGR,mBAAKH,KAAM,IACT,uCADF,OAMF,mBACER,IAAG,GAWH,mBAAQY,KAAK,UAAUC,KAAK,QAAQC,QAAS9C,GAA7C,kBAUR,qBACEgC,IAAKA,cAAF,6KAaoBC,IAAYC,GAbhC,wDAkBH,mBAAMC,UAAU,KA5NhB,qBACEH,IAAG,GAcH,qBACEA,IAAKA,cAAF,gMAcoBC,IAAYC,GAdhC,wDAmBH,yDACA,wDAEA,qBACEF,IAAKA,cAAF,qHAUoBC,IAAYC,GAVhC,wDAeH,iEACA,wE,oBCtXZa,EAAOC,QAAU,IAA0B","file":"static/js/41.ce63b65e.chunk.js","sourcesContent":["import * as React from \"react\";\r\n\r\nimport { Button, Col, Divider, Row, Spin, notification } from \"antd\";\r\nimport {\r\n  CashOfferContextProvider,\r\n  SET_COMPLETED_STEP,\r\n  SET_CURRENT_STEP,\r\n  useCashOfferContext,\r\n} from \"../../context/CashOfferContext\";\r\nimport { ListingDetail, Mutation, Query } from \"../../generated/graphql\";\r\nimport { useLazyQuery, useMutation, useQuery } from \"react-apollo\";\r\n\r\nimport CashOfferBg from \"../../assets/images/cash-offer-bg.jpg\";\r\nimport { breakpoints } from \"../../constants\";\r\nimport { css } from \"@emotion/core\";\r\nimport { environmentVariableList } from \"../../config/env\";\r\nimport { formatCurrency } from \"../../utils/format\";\r\nimport { formatDate } from \"../../utils/format\";\r\nimport { loader } from \"graphql.macro\";\r\nimport moment from \"moment\";\r\nimport queryString from \"query-string\";\r\nimport { useHistory } from \"react-router-dom\";\r\n\r\n// interface Props {\r\n//   listingDetail: ListingDetail;\r\n// }\r\n\r\nconst GET_OFFER_DETAILS_QUERY = loader(\"./getAprQuery.graphql\");\r\n\r\ntype SellItemBike = {\r\n  HasDamage: boolean;\r\n  DamageDescription: string;\r\n  HasBeenOperated: boolean;\r\n  HasPhotos: boolean;\r\n  OwnerZip: string;\r\n  PickupZip: string;\r\n  AppraisalRefNo: string;\r\n  AppraisalStatusId: number;\r\n  CurrentStepNo: number;\r\n  Vin: string;\r\n  ItemTypeId: number;\r\n  ItemName: string;\r\n  ItemYear: number;\r\n  Make: string;\r\n  Model: string;\r\n  Series: string;\r\n  NadaModelId: number;\r\n  Color: string;\r\n  Mileage: number;\r\n  EquipmentNotes: string;\r\n  ServiceNotes: string;\r\n  CustomerNotes: string;\r\n  HaveOutstandingLoan: boolean;\r\n  OverallConditionId: number;\r\n  CurrentStep: string;\r\n  Attachments: [\r\n    {\r\n      AttachmentTypeId: number;\r\n      FileName: string;\r\n      FileUrl: string;\r\n    }\r\n  ];\r\n  BankName: string;\r\n  RemainingLoanAmount: number;\r\n  CreatedDate: string;\r\n  AccountId: number;\r\n  ItemGuid: string;\r\n  Uuid: string;\r\n  CategoryName: string;\r\n  MarketingCategory: string;\r\n  IsSocialLogin: boolean;\r\n  UserName: string;\r\n  BodyStyle: string;\r\n  CustomerRepId: number;\r\n  ClosestDealerships: string;\r\n};\r\n\r\ntype SellItemCar = {\r\n  HasDamage: boolean;\r\n  DamageDescription: string;\r\n  HasBeenOperated: boolean;\r\n  HasPhotos: boolean;\r\n  InteriorType: string;\r\n  BBModelId: string;\r\n  KBBModelId: string;\r\n  ManheimModelId: string;\r\n  ExteriorColor: string;\r\n  InteriorColor: string;\r\n  AftermarketModifications: string;\r\n  DoesYourCarRun: boolean;\r\n  HasBeenSmokedIn: boolean;\r\n  PhysicalConditionId: number;\r\n  MechanicalConditionId: number;\r\n  TireConditionId: number;\r\n  Trim: string;\r\n  TrimSource: string;\r\n  ItemOptions: [\r\n    {\r\n      OptionName: string;\r\n      IsInstalled: boolean;\r\n      IsStandard: boolean;\r\n      OptionHeader: string;\r\n      OptionCategory: string;\r\n      OptionCode: string;\r\n    }\r\n  ];\r\n  CityMileage: number;\r\n  HighwayMileage: number;\r\n  FuelType: string;\r\n  Transmission: string;\r\n  DriveTrain: string;\r\n  EngineDescription: string;\r\n  EngineSize: string;\r\n  OwnerZip: string;\r\n  PickupZip: string;\r\n  AppraisalRefNo: string;\r\n  AppraisalStatusId: number;\r\n  CurrentStepNo: number;\r\n  Vin: string;\r\n  ItemTypeId: number;\r\n  ItemName: string;\r\n  ItemYear: number;\r\n  Make: string;\r\n  Model: string;\r\n  Series: string;\r\n  NadaModelId: number;\r\n  Color: string;\r\n  Mileage: number;\r\n  EquipmentNotes: string;\r\n  ServiceNotes: string;\r\n  CustomerNotes: string;\r\n  HaveOutstandingLoan: boolean;\r\n  OverallConditionId: number;\r\n  CurrentStep: string;\r\n  Attachments: [\r\n    {\r\n      AttachmentTypeId: number;\r\n      FileName: string;\r\n      FileUrl: string;\r\n    }\r\n  ];\r\n  BankName: string;\r\n  RemainingLoanAmount: number;\r\n  CreatedDate: string;\r\n  AccountId: number;\r\n  ItemGuid: string;\r\n  Uuid: string;\r\n  CategoryName: string;\r\n  MarketingCategory: string;\r\n  IsSocialLogin: true;\r\n  UserName: string;\r\n  BodyStyle: string;\r\n  CustomerRepId: number;\r\n  ClosestDealerships: string;\r\n};\r\n\r\ntype RenewResponse = {\r\n  ItemTypeId: number;\r\n  SellItemBike: null | SellItemBike;\r\n  SellItemCar: null | SellItemCar;\r\n  Error: null | {\r\n    Code: string;\r\n    Arguments: string;\r\n    Message: string;\r\n    Details: string;\r\n  };\r\n};\r\n\r\nconst RenewOffer: React.FC = () => {\r\n  const params = window.location.search;\r\n  const history = useHistory();\r\n  // const { state, dispatch } = useCashOfferContext();\r\n\r\n  const appraisalRefNo = queryString.parse(params)[\"AprRefNo\"] || null;\r\n  const offerPrice = queryString.parse(params)[\"RenewOfferEmail\"] || null;\r\n\r\n  const [data, setData] = React.useState<any>(null);\r\n  const [fetching, setFetching] = React.useState(false);\r\n  const [error, setError] = React.useState(\"\");\r\n\r\n  // const { refetch: getOfferDetails, loading, error } = useQuery<Query>(\r\n  //   GET_OFFER_DETAILS_QUERY,\r\n  //   {\r\n  //     skip: true,\r\n  //     variables: {\r\n  //       appraisalRefNo: appraisalRefNo,\r\n  //       vin: \"\",\r\n  //     },\r\n  //   }\r\n  // );\r\n\r\n  const handleRenewOffer = async () => {\r\n    try {\r\n      // notification.success({\r\n      //   message:\r\n      //     \"You Successfully Accepted your Offer. You will be contacted by a RumbleOn, Inc customer support team soon via Email/Phone you provided.\",\r\n      // });\r\n      // history.push(\"/\");\r\n      if (data.SourceTypeId === 17) {\r\n        history.push(\"/list-your-vehicle-for-a-dealer\", {\r\n          renewOffer: true,\r\n          renewData: data,\r\n          currentVin: data?.Vin,\r\n        });\r\n      } else {\r\n        history.push(\"/how-to/sell-your-vehicle\", {\r\n          renewOffer: true,\r\n          renewData: data,\r\n          currentVin: data?.Vin,\r\n        });\r\n      }\r\n    } catch (error) {\r\n      notification.error({\r\n        // icon: \"error\",\r\n        message: error.message || \"There was an error Retrieving your offer\",\r\n      });\r\n    }\r\n  };\r\n\r\n  const getRenewData = async (appraisalRefNo: string) => {\r\n    try {\r\n      setFetching(true);\r\n\r\n      const response = await fetch(\r\n        `${environmentVariableList.REACT_APP_CW_CASH_OFFER}/Services/Sell/Item/Retrieve`,\r\n        {\r\n          method: \"POST\",\r\n          headers: new Headers({\r\n            Accept: \"application/json\",\r\n            \"Content-Type\": \"application/json\",\r\n          }),\r\n          body: JSON.stringify({\r\n            AppraisalRefNo: appraisalRefNo,\r\n          }),\r\n        }\r\n      );\r\n\r\n      const renewData: RenewResponse = await response.json();\r\n\r\n      if (response.status !== 200) {\r\n        throw new Error(renewData.Error?.Details);\r\n      }\r\n\r\n      setData(\r\n        renewData.ItemTypeId === 1\r\n          ? renewData.SellItemBike\r\n          : renewData.SellItemCar\r\n      );\r\n    } catch (e) {\r\n      console.error(e);\r\n    } finally {\r\n      setFetching(false);\r\n    }\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    const href = window.location.href;\r\n    if (href.includes(\"AprRef\") && href.includes(\"RenewOfferEmail\") === true) {\r\n      getRenewData(appraisalRefNo as string);\r\n\r\n      //\r\n      // getOfferDetails()\r\n      //   .then((data) => {\r\n      //     console.log(data.data.getAppraisal);\r\n\r\n      //     // dispatch({\r\n      //     //   type: SET_COMPLETED_STEP,\r\n      //     //   payload: 1,\r\n      //     // });\r\n      //     // dispatch({\r\n      //     //   type: SET_CURRENT_STEP,\r\n      //     //   payload: 2,\r\n      //     // });\r\n      //     // console.log(\"state\", state);\r\n      //     // history.push(\"/sell\", {\r\n      //     //   renewOffer: true,\r\n      //     //   data: data,\r\n      //     // });\r\n\r\n      //     const { itemTypeId } = data.data.getAppraisal;\r\n\r\n      //     if (itemTypeId === 1) {\r\n      //       setData(data.data.getAppraisal.sellItemBike);\r\n      //     } else {\r\n      //       setData(data.data.getAppraisal.sellItemCar);\r\n      //     }\r\n      //   })\r\n      //   .catch(() => {});\r\n    }\r\n  }, []);\r\n\r\n  if (!data && fetching) {\r\n    return (\r\n      <div\r\n        css={css`\r\n          display: flex;\r\n          flex-direction: column;\r\n          justify-content: center;\r\n          align-items: center;\r\n          margin: 0 22%;\r\n          // border-radius: 5px;\r\n          padding-top: 2%;\r\n          height: 800px;\r\n          text-align: center;\r\n          h1 {\r\n            color: white;\r\n          }\r\n          @media (max-width: ${breakpoints.md}) {\r\n            margin: 0;\r\n          }\r\n        `}\r\n      >\r\n        <Spin spinning={true} />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  if (error || !offerPrice || !appraisalRefNo) {\r\n    return (\r\n      <div\r\n        css={css`\r\n          background-color: #f5f4f2;\r\n          flex-direction: column;\r\n\r\n          // padding: 8px;\r\n          font-size: 18px;\r\n          @media (max-width: 1025px) and (min-width: 769px) {\r\n            font-size: 12px;\r\n          }\r\n          @media (max-width: 340px) {\r\n            font-size: 12px;\r\n          }\r\n        `}\r\n      >\r\n        <div\r\n          css={css`\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: center;\r\n            margin: 0 22%;\r\n            // border-radius: 5px;\r\n            padding-top: 2%;\r\n            height: 800px;\r\n            text-align: center;\r\n            background: #2b2b2b;\r\n            h1 {\r\n              color: white;\r\n            }\r\n            @media (max-width: ${breakpoints.md}) {\r\n              margin: 0;\r\n            }\r\n          `}\r\n        >\r\n          <h1>Oops, This must be our fault,</h1>\r\n          <h1>We could not find this offer</h1>\r\n\r\n          <div\r\n            css={css`\r\n              margin: 0 22%;\r\n              // border-radius: 5px;\r\n              padding-top: 2%;\r\n              text-align: center;\r\n              background: #2b2b2b;\r\n              h1 {\r\n                font-size: 16px;\r\n                color: white;\r\n              }\r\n              @media (max-width: ${breakpoints.md}) {\r\n                margin: 0;\r\n              }\r\n            `}\r\n          >\r\n            <h1>Contact your RumbleOn Representative:</h1>\r\n            <h1>cashoffer@rumbleon.com | (972) 905-9838</h1>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  if (!fetching && data) {\r\n    return (\r\n      <div\r\n        css={css`\r\n          display: flex;\r\n          background-color: #f5f4f2;\r\n          flex-direction: column;\r\n          background-image: url(${CashOfferBg});\r\n          background-position: center;\r\n          background-size: cover;\r\n          background-repeat: no-repeat;\r\n          // padding: 8px;\r\n          font-size: 18px;\r\n          @media (max-width: 1025px) and (min-width: 769px) {\r\n            font-size: 12px;\r\n          }\r\n          @media (max-width: 340px) {\r\n            font-size: 12px;\r\n          }\r\n        `}\r\n      >\r\n        <div\r\n          css={css`\r\n            min-height: 600px;\r\n            margin: 4% 25%;\r\n            border-radius: 2px;\r\n            box-shadow: 0px 0px 2px gray;\r\n            background: white;\r\n            display: flex;\r\n            flex-direction: column;\r\n            h3 {\r\n              text-transform: uppercase;\r\n              font-size: 18px;\r\n            }\r\n            @media (max-width: 1025px) and (min-width: 769px) {\r\n              font-size: 12px;\r\n            }\r\n            @media (max-width: 768px) {\r\n              margin: 0.2%;\r\n            }\r\n          `}\r\n        >\r\n          <h3\r\n            css={css`\r\n              text-align: center;\r\n              padding-top: 4%;\r\n              padding-left: 4%;\r\n              text-transform: uppercase;\r\n              @media (max-width: 768px) {\r\n                text-align: center;\r\n                padding-left: 4%;\r\n              }\r\n            `}\r\n          >\r\n            Your Offer Details\r\n          </h3>\r\n\r\n          <p\r\n            css={css`\r\n              text-align: left;\r\n              padding-top: 4%;\r\n              padding-left: 4%;\r\n              text-transform: uppercase;\r\n              h3 {\r\n                font-size: 18px;\r\n              }\r\n              h4 {\r\n                font-size: 16px;\r\n              }\r\n              @media (max-width: 768px) {\r\n                text-align: left;\r\n                padding-left: 4%;\r\n              }\r\n            `}\r\n          >\r\n            <h3>\r\n              {data.ItemYear} {data.Make}\r\n            </h3>\r\n            <h4>{data.Model}</h4>\r\n          </p>\r\n          <Row\r\n            css={css`\r\n              padding: 4%;\r\n              @media (max-width: 340px) {\r\n              }\r\n            `}\r\n          >\r\n            <Col span={12}>\r\n              <h3>Zip</h3>\r\n              {data.SourceTypeId === 17 ? \"--\" : data.OwnerZip}\r\n            </Col>\r\n\r\n            <Col span={12}>\r\n              <h3>Mileage</h3>\r\n              {data.Mileage}\r\n            </Col>\r\n          </Row>\r\n\r\n          <Row\r\n            css={css`\r\n              padding: 4%;\r\n              @media (max-width: 340px) {\r\n              }\r\n            `}\r\n          >\r\n            <Col span={12}>\r\n              <h3>Color</h3>\r\n              {/* {data.ItemTypeId === 1? data.Color : data.ExteriorColor} */}\r\n              {data.Color}\r\n            </Col>\r\n\r\n            <Col span={12}>\r\n              <h3>Offer Price</h3>\r\n              --\r\n            </Col>\r\n          </Row>\r\n\r\n          <Row\r\n            css={css`\r\n              flex: 1;\r\n              display: flex;\r\n              padding-bottom: 4%;\r\n              justify-content: center;\r\n              align-items: flex-end;\r\n              @media (max-width: 768px) {\r\n                flex: 0.5;\r\n              }\r\n            `}\r\n          >\r\n            <Button type=\"primary\" size=\"large\" onClick={handleRenewOffer}>\r\n              RENEW OFFER\r\n            </Button>\r\n          </Row>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div\r\n      css={css`\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        align-items: center;\r\n        margin: 0 22%;\r\n        // border-radius: 5px;\r\n        padding-top: 2%;\r\n        height: 800px;\r\n        text-align: center;\r\n        h1 {\r\n          color: white;\r\n        }\r\n        @media (max-width: ${breakpoints.md}) {\r\n          margin: 0;\r\n        }\r\n      `}\r\n    >\r\n      <Spin spinning={true} />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default RenewOffer;\r\n","module.exports = __webpack_public_path__ + \"static/media/cash-offer-bg.b71d9c79.jpg\";"],"sourceRoot":""}