{"version":3,"file":"js/pages-Account-CreditCards-CreditCardsPage-8d068f19e7fa5c52873f.chunk.js","mappings":"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","sources":["webpack://printivity/./client/app/styleguide/components/CreditCardItem/CreditCardItem.tsx","webpack://printivity/./client/app/api/account/creditCards.ts","webpack://printivity/./client/app/bundles/App/pages/Account/CreditCards/CreditCardsPage.tsx","webpack://printivity/./client/app/utils/money.ts"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport Cards from 'react-credit-cards-2';\nimport { getTypeInfo } from 'credit-card-type';\nimport 'react-credit-cards-2/es/styles-compiled.css';\nimport { CreditCardType } from 'credit-card-type/dist/types';\nimport Button from '../Button/Button';\nimport { WalletPaymentSource } from 'contexts/UserContextContainer/types';\nimport { IconCheckmark } from 'styleguide/icons';\nimport { CreditCard } from 'bundles/App/pages/Account/CreditCards/types';\n\nexport interface Props {\n  wallet: WalletPaymentSource;\n  preview?: boolean;\n  onDefaultClick: (id: number) => void;\n  onDeleteClick: (id: number) => void;\n}\n\nconst isExpired = (expMonth: number, expYear: number): boolean => {\n  const date = new Date();\n  const curYear: number = date.getFullYear();\n  const curMonth: number = date.getMonth() + 1; // getMonth returns 0 based month\n\n  if (curYear < expYear) {\n    return false;\n  }\n  if (curYear === expYear && curMonth <= expMonth) {\n    return false;\n  }\n  return true;\n};\n\nconst formatCardName = (name: string): string => (name === 'master' ? 'mastercard' : name);\n\nconst CreditCardItem = ({ wallet, preview = true, ...props }: Props) => {\n  const creditCard: CreditCard = wallet.paymentSource;\n  const ccInfo: CreditCardType = getTypeInfo(formatCardName(creditCard.ccType));\n  const valid = !!ccInfo;\n  const expired: boolean = isExpired(parseInt(creditCard.month, 10), parseInt(creditCard.year, 10));\n\n  return (\n    <div\n      className={cn(\n        !valid && '!border-gray-600 !bg-gray-100',\n        expired\n          ? 'border-red-400 bg-red-50 hover:bg-red-100'\n          : 'border-gray-200 bg-slate-50 hover:border-gray-400 hover:bg-slate-100',\n        'flex flex-col rounded-xl border border-solid p-4 shadow-lg ' +\n          'group cursor-default select-none transition duration-300 ease-out hover:shadow-xl',\n      )}\n    >\n      <div className=\"scale-95 p-2 transition duration-300 ease-out group-hover:scale-100\">\n        <Cards\n          preview={preview}\n          issuer={creditCard.ccType}\n          number={creditCard.lastDigits.padStart(valid ? ccInfo.lengths[0] : 16, '*')}\n          expiry={`${creditCard.month.padStart(2, '0')}${creditCard.year}`}\n          name={creditCard.name}\n        />\n      </div>\n      <div className={cn(!valid && '!text-gray-400 !line-through', 'p-2')}>\n        <div className=\"font-hvHeavy text-base font-black\">{valid ? ccInfo.niceType : 'INVALID CARD'}</div>\n        <div className=\"text-sm\">Credit Card ending in ({creditCard.lastDigits})</div>\n        <div className={cn(expired && valid ? 'font-bold text-red-600' : '', 'text-sm')}>\n          <span>Expiration: {`${creditCard.month.padStart(2, '0')}/${creditCard.year}`}</span>\n          {expired && <span className=\"font-hvBold\">&nbsp;&nbsp;Expired!</span>}\n        </div>\n      </div>\n      <div className=\"flex justify-evenly gap-1\">\n        <Button size=\"sm\" color=\"orange\" type=\"button\" outline onClick={() => props.onDeleteClick(wallet.id)}>\n          Delete\n        </Button>\n        {valid &&\n          !expired &&\n          (!wallet.default ? (\n            <Button\n              size=\"sm\"\n              color=\"dark\"\n              type=\"button\"\n              outline\n              onClick={() => props.onDefaultClick(wallet.id)}\n            >\n              Make Default\n            </Button>\n          ) : (\n            <Button className=\"!opacity-100\" type=\"button\" color=\"blue\" size=\"sm\" outline disabled>\n              <div className=\"inline-flex space-x-1\">\n                <IconCheckmark fill=\"94a3b8\" color=\"blue\" />\n                <div>Default</div>\n              </div>\n            </Button>\n          ))}\n      </div>\n    </div>\n  );\n};\n\nexport default CreditCardItem;\n","import apiCall from 'app/libs/utils/api/apiCall';\nimport { buildUrl } from 'libs/utils/api';\nimport { BasicResponse, CreditCardsResponse } from '../types';\nimport { SharedErrors } from 'libs/utils/api/types';\n\n// /credit_cards\nexport const creditCardsScope = (path?) => `/credit_cards${path || ''}`;\n\n// /credit_cards/:id\nexport const destroyCreditCard = id => {\n  const url = buildUrl(creditCardsScope(`/${id}`));\n  return apiCall.delete<BasicResponse, SharedErrors>({ url, data: { id }, unscoped: true });\n};\n\n// /credit_cards/:id/make_default\nexport const makeCreditCardDefault = id => {\n  const url = buildUrl(creditCardsScope(`/${id}/make_default`));\n  return apiCall.post<CreditCardsResponse, SharedErrors>({ url, data: { id }, unscoped: true });\n};\n","import * as React from 'react';\nimport CreditCardItem from 'styleguide/components/CreditCardItem/CreditCardItem';\nimport TitleContainer from '../TitleContainer/TitleContainer';\nimport { Status } from 'libs/utils/api/types';\nimport Footer from 'styleguide/components/Footer/Footer';\nimport { destroyCreditCard, makeCreditCardDefault } from 'api/account/creditCards';\nimport toast from 'utils/toast';\nimport UserContext from 'contexts/UserContextContainer/UserContext';\nimport { formatMoney } from 'utils/money';\n\nconst CreditCardsPage = () => {\n  const { currentUser, deleteCreditCard, updateCreditCards } = React.useContext(UserContext);\n\n  const deleteCreditCardHandler = (id: number) => {\n    destroyCreditCard(id).then(res => {\n      if (res.status === Status.Ok) {\n        deleteCreditCard(id);\n      } else {\n        toast.error('There was problem while processing your request.');\n      }\n    });\n  };\n\n  const makeCreditCardDefaultHandler = (id: number) => {\n    makeCreditCardDefault(id).then(res => {\n      if (res.status === Status.Ok) {\n        updateCreditCards(res.payload.walletPaymentSources);\n      } else {\n        toast.error('There was problem while processing your request.');\n      }\n    });\n  };\n\n  return (\n    <>\n      <TitleContainer title=\"Saved payment methods\" />\n      <div className=\"mx-auto max-w-base pl-1\">\n        {!!currentUser.availableStoreCreditTotal && currentUser.availableStoreCreditTotal > 0 && (\n          <div className=\"px-1 pt-1 text-center font-hvMedium text-lg text-green-700 md:px-4 md:pt-4 md:text-left md:text-2xl lg:px-8 lg:pt-8 lg:text-4xl\">\n            Available Store Credit: {formatMoney(currentUser.availableStoreCreditTotal)}\n          </div>\n        )}\n        <div className=\"flex flex-row flex-wrap justify-center gap-8 p-1 md:justify-start md:p-4 lg:p-8\">\n          {currentUser.walletPaymentSources.map(wallet => (\n            <CreditCardItem\n              key={wallet.id}\n              wallet={wallet}\n              onDeleteClick={deleteCreditCardHandler}\n              onDefaultClick={makeCreditCardDefaultHandler}\n            />\n          ))}\n        </div>\n      </div>\n\n      <Footer />\n    </>\n  );\n};\n\nexport default CreditCardsPage;\n","export const formatMoney = amount =>\n  amount === null\n    ? '$-.--'\n    : `$${parseFloat(amount)\n        .toFixed(2)\n        .replace(/\\d(?=(\\d{3})+\\.)/g, '$&,')}`;\n"],"names":["_ref","name","expMonth","expYear","date","curYear","curMonth","wallet","_ref$preview","preview","props","_objectWithoutProperties","_excluded","creditCard","paymentSource","ccInfo","getTypeInfo","ccType","valid","expired","parseInt","month","year","Date","getFullYear","getMonth","React","className","cn","Cards","issuer","number","lastDigits","padStart","lengths","expiry","concat","niceType","Button","size","color","type","outline","onClick","onDeleteClick","id","disabled","IconCheckmark","fill","onDefaultClick","creditCardsScope","path","_React$useContext","UserContext","currentUser","deleteCreditCard","updateCreditCards","deleteCreditCardHandler","url","buildUrl","apiCall","data","unscoped","destroyCreditCard","then","res","status","Status","Ok","toast","error","makeCreditCardDefaultHandler","post","makeCreditCardDefault","payload","walletPaymentSources","TitleContainer","title","availableStoreCreditTotal","formatMoney","map","CreditCardItem","key","Footer","amount","parseFloat","toFixed","replace"],"sourceRoot":""}