\n
\n
Reach out to our Customer Success team
\n
\n If you have any problems or doubt, create a ticket and {itemAuthProfile?.account_manager?.name},
\n
setIsModal(true)} className=\"mt-1\">\n Create Ticket\n \n
\n
\n
(\n props.history.push(`/ticket/${item.id}`)}>\n \n \n }\n :\n <>\n
\n {\n item?.is_unread &&
\n }\n }\n title={\n
\n {item?.title}\n {item?.type} \n \n }\n description={\n
Created {item?.created}\n }\n />\n
\n {item.status_explain} -\n #{item?.code} \n
\n \n )}\n />\n
\n
\n
\n
\n customersuccess@realestateiq.co\n \n
\n
\n Contact Us | Monday to Friday, from 8 AM to 6 PM (CT) \n
\n
props.setIsInvoice(false)}\n onCancel={() => props.setIsInvoice(false)} footer={null}>\n \n
\n \n The invoice will be generated about 24 hours after we have received\n your payment.\n \n \n } type=\"info\" showIcon className=\"my-subscription__invoice--alert\"/>\n \n \n document.getElementById(\"custom-selector-antd\")}\n {\n ...params\n }\n >\n {\n params.children\n }\n \n \n {\n ((props?.value || []).length > 0) && (\n <>\n onClear()}/>\n 0 ? (props?.value || []).length : 0}/>\n \n )\n }\n
\n )\n}\n\nexport default SelectCustomStyle\n","import {Alert, Checkbox, Divider, Form, Input, Modal, Pagination, Space} from \"antd\";\nimport {CloseOutlined, InfoCircleOutlined} from \"@ant-design/icons\";\nimport ListComponent from \"../../../common/ListComponent\";\nimport {columnsTable, getDataSource, removeArrayElementObject} from \"../../../../utils/functions\";\nimport React, {useEffect, useState} from \"react\";\n\nimport {\n ActionSubscriptionInitStore,\n ActionCreateCancelationFeedback\n} from \"../../../../data/hooks/subscription\"\n\n// ============== SELECT DATA ==============\nimport {\n selectFetching,\n selectStatusAction,\n} from \"../../../../data/reselects/subscriptionSelector\"\n\nimport {Select, Radio} from 'antd';\nimport SelectCustomStyle from \"../../../common/components/SelectCustomStyle\";\nimport {useSelector} from \"react-redux\";\nimport {Icon} from \"../../../common\";\n\nconst {Option} = Select;\n\nconst dataOptions_1 = [\n {title: \"I found many technical issues.\", value: \"I found many technical issues.\"},\n {title: \"The product is too expensive.\", value: \"The product is too expensive.\"},\n {title: \"I'm not sure how to use the tools and data.\", value: \"I'm not sure how to use the tools and data.\"},\n {title: \"I was unable to contact any leads.\", value: \"I was unable to contact any leads.\"},\n {title: \"I was unable to close a deal.\", value: \"I was unable to close a deal.\"},\n {title: \"I'm no longer in the Real Estate business.\", value: \"I'm no longer in the Real Estate business.\"},\n]\n\nconst dataOptions_3 = [\"Very dissatisfied.\", \"Dissatisfied.\", \"Somewhat dissatisfied.\", \"Somewhat satisfied.\", \"Satisfied.\", \"Very satisfied.\"]\n\nconst CancelRenewalComponent = props => {\n const [paramsOption_1, setParamsOption_1] = useState([]),\n [statusAction, setStatusAction] = useState({}),\n [form] = Form.useForm(),\n actionCreateCancelationFeedback = ActionCreateCancelationFeedback(),\n itemStatusAction = useSelector(selectStatusAction());\n\n useEffect(() => {\n if (itemStatusAction?.createCancelationFeedbackSuccess) {\n setParamsOption_1([])\n form.resetFields();\n props.setIsCancelRenewal(false)\n }\n }, [itemStatusAction?.createCancelationFeedbackSuccess]);\n\n\n const handleChange = val => {\n if (val?.reason) {\n setParamsOption_1(val?.reason)\n }\n }\n\n const onSubmit = val => {\n actionCreateCancelationFeedback(val)\n }\n\n const onCheckOption1 = val => {\n let items = [...form.getFieldValue(\"reason\")]\n if (items.includes(val)) {\n const index = items.indexOf(val);\n if (index > -1) {\n items.splice(index, 1);\n }\n form.setFieldsValue({reason: items})\n setParamsOption_1(items)\n } else {\n items.push(val);\n form.setFieldsValue({reason: items})\n setParamsOption_1(items)\n }\n }\n\n return (\n props.setIsCancelRenewal(false)}\n onCancel={() => props.setIsCancelRenewal(false)}\n getContainer={false}\n footer={null}>\n \n
We're sorry to see you go! \n
\n \n
After this step, you will be contacted by your Account\n Manager\n to cancel\n your subscription. This\n means you will no longer have access to our products - and, hence, to the best\n information in\n the market to work with off market properties.
\n
Before you make this final decision, we’d love to hear\n about\n your experience\n and how you think we\n can improve our service for other members (and you, if you decide to come back!)
\n
\n \n
\n 1. What is the main reason you decided to cancel your subscription?\n \n Select all that apply.\n \n
\n
\n
\n setParamsOption_1(e)\n }}\n // options={{\n // mode: \"multiple\",\n // // allowClear: true,\n // style: {\n // width: '100%'\n // },\n // placeholder: \"select one country\",\n // optionLabelProp: \"label\",\n // // clearIcon: \n // }}\n >\n {\n dataOptions_1.map((i, k) => {\n return (\n \n \n onCheckOption1(i.value)}\n className=\"me-2\"/>\n {i.title}\n
\n \n )\n })\n }\n \n \n \n
\n
\n 2. Would you recommend our services?\n \n 1= Strongly Disagree, 10 = Strongly Agree.\n \n
\n
\n \n \n {\n new Array(10).fill(0).map((i, k) => {\n return {k + 1} \n }\n )\n }\n \n \n
\n
\n
\n 3. How was your overall experience with Real Estate IQ?\n \n Select one option.\n \n
\n
\n \n \n \n {\n dataOptions_3.map((i, k) => {\n return (\n {i} \n )\n })\n }\n \n \n \n
\n
\n
\n 4. If we could do anything to keep you around, what would that be?\n
\n
\n \n
\n
\n
\n \n \n Proceed to cancel my subscription {\n itemStatusAction?.isCreateCancelationFeedback &&\n \n \n
\n
\n \n props.setIsCancelRenewal(false)}\n >\n Take me back\n \n \n
\n
\n
\n \n
\n {\n truncate(val, {\n 'length': 50,\n 'omission': '...'\n })\n }\n \n ),\n },\n total_amount: {\n align: 'center',\n width: 80,\n },\n download: {\n key: 'download',\n width: 50,\n align: 'center',\n // fixed: 'right',\n render: (text, record) => \n \n setIsInvoice(e)}\n isFetching={isFetching}\n resultItemList={resultItemList}\n initData={initData}\n componentTable={componentTable}\n namePageTransactions={namePageTransactions}\n pagination={pagination}\n />\n setIsCancelRenewal(e)}\n />\n setIsOpenModalBannerUpgrade(false)}\n onCancel={() => setIsOpenModalBannerUpgrade(false)}\n getContainer={false}\n footer={null}>\n \n
\n If you subscribe to the Premium Plan, you will receive in addition: up to 5 landline phone\n numbers, 5 mobile phone numbers, 5 e-mail addresses, the contact information of a relative, plus\n bankruptcy and death notices.\n
\n
\n If you are subscribed to our Standard Plan and want to upgrade to Premium, we can contact you\n and upgrade your plan right away!\n
\n
\n UPGRADE! \n
\n
\n \n
\n
\n
\n \n {\n (Object.keys(resultItem?.subscription || []).length > 0) && Object.keys(resultItem?.subscription || []).map((i, k) => {\n return
{i} {resultItem?.subscription[i]}
\n })\n }\n
\n
\n
{resultItem?.hint?.title}
\n
{resultItem?.hint?.message}
\n
\n
\n {\n if (Object.keys(resultItem?.subscription || []).length > 0) {\n setIsCancelRenewal(true)\n }\n }}>\n Cancel Renewal\n \n
\n
\n
\n
\n
\n \n
\n
Next payment: {resultItem?.next_payment}
\n
\n {/*
*/}\n {/*
*/}\n {/*
*/}\n {/* Modify payment information*/}\n {/* */}\n {/*
*/}\n
\n
\n
Last payment: {resultItem?.last_payment}
\n
\n
\n
{\n setIsInvoice(true);\n actionSubscriptionListTransaction();\n }}>Check invoice history.
\n {/*
*/}\n {/* Modify payment information*/}\n {/* */}\n
\n
\n
\n
\n
\n \n
\n
\n setIsOpenModalBannerUpgrade(true)}>\n
\n \n
\n
props.onCheck(selectedItems, event, props.parent)}\n // checkedKeys={checkedKeys}\n // onSelect={onSelect}\n // selectedKeys={selectedKeys}\n treeData={props.items}\n />\n )\n}\n\nexport default Packages\n","import {createSelector} from 'reselect'\n\nconst stateReducer = state => state.packagePaymentReducer;\n\nexport const selectFetching = (initData) =>\n createSelector(\n stateReducer,\n packagePaymentReducer => packagePaymentReducer.isFetching\n )\n\nexport const selectStatusAction = (initData) =>\n createSelector(\n stateReducer,\n packagePaymentReducer => packagePaymentReducer.statusAction\n )\n\nexport const selectPackagePaymentCreateOrder = (initItems) =>\n createSelector(\n stateReducer,\n packagePaymentReducer => packagePaymentReducer.result\n )\n","import {useCallback} from 'react'\nimport {useDispatch} from 'react-redux'\n\nimport * as HookAction from '../actions/packagePayment'\n\nexport const ActionPackageCreateOrder = () => {\n const dispatch = useDispatch()\n return useCallback(\n (params) => dispatch(HookAction.packagePaymentCreateOrderAction(params)),\n [dispatch]\n )\n}\n\nexport const ActionPackagePaymentInitStore = () => {\n const dispatch = useDispatch()\n return useCallback(\n (params) => dispatch(HookAction.packagePaymentInitStore(params)),\n [dispatch]\n )\n}\n\n","import * as Types from '../types/PackagePayment';\n\nexport const packagePaymentCreateOrderAction = (params) => ({type: Types.PACKAGE_PAYMENT_CREATE_ORDER_ACTION, params});\nexport const packagePaymentCreateOrderSuccess = (createOrder) => ({\n type: Types.PACKAGE_PAYMENT_CREATE_ORDER_SUCCESS,\n createOrder\n});\n\nexport const packagePaymentInitStore = (params) => ({type: Types.PACKAGE_PAYMENT_INIT, params});\nexport const packagePaymentClearStore = (params) => ({type: Types.PACKAGE_PAYMENT_FAIL, params});\n","import React, {useEffect, useState} from \"react\";\nimport MainLayout from \"../../common/layout/MainLayout\";\nimport {Button, Tree, Spin, Modal} from \"antd\";\nimport {ActionConfirmPackage, ActionSubscriptionDetailUpgrade} from \"../../../data/hooks/subscription\";\nimport {useSelector} from \"react-redux\";\nimport {\n selectSubscriptionDetailUpgrade,\n selectFetching,\n selectConfirmPackage\n} from \"../../../data/reselects/subscriptionSelector\";\nimport Packages from \"./components/Packages\";\nimport moment from \"moment\";\nimport {ROUTE_LIST} from \"../../../constants/define\";\nimport {find} from \"lodash\";\nimport {TYPE_PACKAGE} from \"../../../data/mapping/Response/PackagePaymentResponse\";\nimport {selectFetching as packagePaymentFetching} from \"../../../data/reselects/packagePaymentSelector\";\nimport {ActionPackageCreateOrder} from \"../../../data/hooks/packagePayment\";\nimport {TYPE_CONFIRM_PACKAGE} from \"../../../data/mapping/Response/SubscriptionResponse\";\nimport {Icon} from \"../../common\";\n\n\nconst Detail = (props) => {\n const [resultItems, setResultItems] = useState({}),\n [isShowDetailConfirmPackage, setIsShowDetailConfirmPackage] = useState(false),\n [getSelectItems, setGetSelectItems] = useState([]),\n [requestParams, setRequestParams] = useState([]),\n [confirmPackages, setConfirmPackages] = useState([]),\n // ============== ACTION ==============\n actionSubscriptionDetailUpgrade = ActionSubscriptionDetailUpgrade(),\n actionPackageCreateOrder = ActionPackageCreateOrder(),\n actionConfirmPackage = ActionConfirmPackage(),\n // ============== SELECT DATA ==============\n itemPackagePaymentFetching = useSelector(packagePaymentFetching()),\n itemFetching = useSelector(selectFetching()),\n itemDetailUpgrade = useSelector(selectSubscriptionDetailUpgrade()),\n itemConfirmPackage = useSelector(selectConfirmPackage());\n\n useEffect(() => {\n const {match} = props;\n if (Object.keys(match.params).length > 0) {\n actionSubscriptionDetailUpgrade({date: match.params?.date});\n }\n }, [props.match]);\n\n useEffect(() => {\n setConfirmPackages(itemConfirmPackage);\n setIsShowDetailConfirmPackage(Object.keys(itemConfirmPackage).length > 0)\n }, [itemConfirmPackage]);\n\n useEffect(() => {\n setResultItems(itemDetailUpgrade?.customPackages)\n }, [itemDetailUpgrade]);\n\n const onCheck = (checkedItems, event, parent) => {\n let items = [],\n listNodes = [...event?.checkedNodes];\n items[parent] = listNodes.filter(i => i.parent === 3);\n setGetSelectItems(items)\n\n let rqParams = [],\n selectParams = listNodes.filter(i => i.parent === 3);\n if ((selectParams || []).length > 0) {\n rqParams = selectParams.map(i => i?.items?.package_id)\n }\n setRequestParams(rqParams)\n }\n\n const onCreateOrder = (type) => {\n actionPackageCreateOrder({\n month: props.match.params?.date,\n type,\n packages: requestParams,\n orderType: TYPE_CONFIRM_PACKAGE.DETAIL,\n })\n }\n\n const onSubscript = event => {\n actionConfirmPackage({\n month: props.match.params?.date,\n packages: requestParams,\n orderType: TYPE_CONFIRM_PACKAGE.DETAIL\n })\n }\n // console.log(321, getSelectItems)\n return (\n \n Choose your package type\n for {moment(props.match.params?.date).format(\"YYYY-MM\")}}\n width={1000}\n visible={isShowDetailConfirmPackage}\n onOk={() => {\n }} onCancel={() => setIsShowDetailConfirmPackage(false)}\n >\n {\n isShowDetailConfirmPackage && (\n \n \n
\n {\n confirmPackages?.P && (\n
\n {confirmPackages?.P?.name} \n {\n confirmPackages?.P?.sale_price && confirmPackages?.P?.sale_price.length > 0 && (\n {confirmPackages?.P?.sale_price}
\n {confirmPackages?.P?.message}
\n onCreateOrder(TYPE_PACKAGE.PREMIUM)}>\n Buy Now {itemPackagePaymentFetching &&\n \n \n )\n }\n
\n \n )\n }\n \n
\n {\n Object.keys(itemDetailUpgrade).length > 0 && (\n \n
\n
\n
\n
\n
Free-Trial \n
Trial
\n {/*{*/}\n {/* getSelectItems[0] && getSelectItems[0].length > 0 && (*/}\n {/*
*/}\n {/* */}\n {/* Upgrade*/}\n {/* */}\n {/*
*/}\n {/* )*/}\n {/*}*/}\n
\n
\n
\n
\n
\n
Standard \n
Limited
\n {\n getSelectItems[1] && getSelectItems[1].length > 0 && (\n
\n onSubscript()}>\n Upgrade\n \n
\n )\n }\n
\n
\n
\n
\n
\n
Premium \n
Unlimited
\n {/*
*/}\n {/* */}\n {/* Upgrade*/}\n {/* */}\n {/*
*/}\n
\n
\n
\n
\n
\n
\n props.history.push(`${ROUTE_LIST.PackageSubscription}?month=${props.match.params?.date}`)}>Buy\n Now\n \n
\n
\n \n )\n}\n\nexport default Detail\n","import React from 'react'\nimport {Checkbox, Divider, Tree, Input} from \"antd\";\nimport {SearchOutlined} from '@ant-design/icons';\n\nconst {Search} = Input;\n\nconst Packages = (props) => {\n return (\n
\n
\n
\n {props?.title}\n
\n
\n \n }\n onSearch={() => console.log(\"on Search\")}/>\n
\n props.onCheck(selectedItems, event, props.parent)}\n // onSelect={(selectedKeys, e) => console.log(\"===>>> OnSelect <<===\", selectedKeys, e)}\n checkedKeys={props.selectedItems}\n // defaultExpandedKeys={['0-0-0', '0-0-1']}\n // defaultSelectedKeys={['0-0-0', '0-0-1']}\n // defaultCheckedKeys={['0-0-0', '0-0-1']}\n // onSelect={onSelect}\n // onCheck={onCheck}\n treeData={props?.items}\n />\n \n
\n )\n}\n\nexport default Packages\n","import {cloneDeep, findIndex} from \"lodash\";\nimport {useEffect, useState} from \"react\";\nimport {ActionSubscriptionListPackage} from \"../../../../data/hooks/subscription\";\nimport {useSelector} from \"react-redux\";\nimport {selectFetching, selectSubscriptionListPackage} from \"../../../../data/reselects/subscriptionSelector\";\nimport Packages from \"./Packages\";\n\nconst ChoosePackages = (props) => {\n\n const [getSelectedItems, setSetSelectedItems] = useState([]),\n [keySelected, setKeySelected] = useState([]),\n // ============== ACTION ==============\n actionSubscriptionListPackage = ActionSubscriptionListPackage(),\n // ============== SELECT DATA ==============\n itemFetching = useSelector(selectFetching()),\n itemListPackage = useSelector(selectSubscriptionListPackage());\n\n useEffect(() => {\n props.selectItems(getSelectedItems)\n }, [getSelectedItems]);\n\n\n const generateData = () => {\n const offMarkets = [];\n const offMarketSelects = [];\n (itemListPackage?.off_markets || []).map(offMarket => {\n offMarkets.push(offMarket);\n if (offMarket.select) {\n offMarketSelects.push(offMarket.key);\n }\n });\n const states = [];\n const stateSelects = [];\n (itemListPackage?.states || []).map(offMarket => {\n if (offMarketSelects.indexOf(offMarket.key) != -1) {\n states.push(offMarket);\n offMarket.children.map(state => {\n if (state.select) {\n stateSelects.push(state.key);\n }\n })\n }\n });\n const counties = [];\n const countySelects = [];\n const countyObjectSelects = [];\n const countyChecks = [];\n (itemListPackage?.counties || []).map(offMarket => {\n if (offMarketSelects.indexOf(offMarket.key) != -1) {\n const _offMarket = cloneDeep(offMarket);\n const _offMarketChecked = cloneDeep(offMarket);\n _offMarket.children = [];\n _offMarketChecked.children = [];\n let checkEmpty = true;\n let checkCheckedEmpty = true;\n offMarket.children.map(state => {\n if (stateSelects.indexOf(state.key) != -1) {\n checkEmpty = false;\n _offMarket.children.push(state);\n const _state = cloneDeep(state);\n _state.children = [];\n let checkStateEmpty = true;\n state.children.map(county => {\n if (county.select) {\n checkStateEmpty = false;\n _state.children.push(county);\n countySelects.push(county.key);\n countyObjectSelects.push(county);\n }\n })\n if (!checkStateEmpty) {\n _offMarketChecked.children.push(_state);\n checkCheckedEmpty = false;\n }\n }\n })\n if (!checkEmpty) {\n counties.push(_offMarket);\n }\n if (!checkCheckedEmpty) {\n countyChecks.push(_offMarketChecked);\n }\n }\n });\n props.onRequestParams(countyObjectSelects);\n setSetSelectedItems([offMarkets, states, counties, countyChecks]);\n setKeySelected([offMarketSelects, stateSelects, countySelects])\n }\n\n const onCheckOffMarket = (key) => {\n (itemListPackage?.off_markets || []).map(leadTypeItem => {\n if (leadTypeItem.key == key) {\n leadTypeItem.select = !leadTypeItem.select;\n if (!leadTypeItem.select) {\n onClearState(key);\n }\n }\n });\n }\n\n const onCheckState = (key) => {\n (itemListPackage?.states || []).map(leadTypeItem => {\n let isSelectAll = false;\n if (leadTypeItem.key == key) {\n isSelectAll = true;\n }\n let findSelectedItem = findIndex(leadTypeItem.children, {select: true})\n leadTypeItem.children.map(stateItem => {\n if (findSelectedItem != -1 && isSelectAll) {\n stateItem.select = false;\n onClearCounty(leadTypeItem.key, stateItem.key);\n } else if (findSelectedItem == -1 && isSelectAll) {\n stateItem.select = true;\n } else {\n if (stateItem.key == key) {\n stateItem.select = !stateItem.select;\n if (!stateItem.select) {\n onClearCounty(leadTypeItem.key, stateItem.key);\n }\n } else {\n stateItem.select = stateItem.select;\n }\n }\n })\n });\n }\n\n const onCheckCounty = (key) => {\n (itemListPackage?.counties || []).map(leadTypeItem => {\n let isSelectAllLeadType = false;\n if (leadTypeItem.key == key) {\n isSelectAllLeadType = true;\n }\n let findSelectedStateItem = false;\n leadTypeItem.children.map(stateItem => {\n let findSelectedCountyItem = findIndex(stateItem.children, {select: true});\n if (findSelectedCountyItem != -1) {\n findSelectedStateItem = true;\n }\n });\n leadTypeItem.children.map(stateItem => {\n let isSelectAllState = false;\n\n if (findSelectedStateItem && isSelectAllLeadType) {\n isSelectAllState = false;\n } else if (!findSelectedStateItem && isSelectAllLeadType) {\n isSelectAllState = true;\n } else {\n if (stateItem.key == key) {\n isSelectAllState = true;\n }\n }\n let findSelectedCountyItem = findIndex(stateItem.children, {select: true})\n stateItem.children.map(countyItem => {\n if (countyItem.items.is_subscribed) {\n }else{\n if (findSelectedStateItem && isSelectAllLeadType) {\n countyItem.select = false;\n } else if (!findSelectedStateItem && isSelectAllLeadType) {\n countyItem.select = true;\n } else if (findSelectedCountyItem != -1 && isSelectAllState) {\n countyItem.select = false;\n } else if (findSelectedCountyItem == -1 && isSelectAllState) {\n countyItem.select = true;\n } else {\n if (countyItem.key == key) {\n countyItem.select = !countyItem.select;\n } else {\n countyItem.select = countyItem.select;\n }\n }\n }\n })\n stateItem.children.map(countyItem => {\n if (countyItem.items.is_subscribed) {\n }else{\n if (countyItem.title == \"ALL\" && countyItem.select) {\n onClearCounty(leadTypeItem.key, stateItem.key);\n onSetDisableCounty(leadTypeItem.key, stateItem.key, true);\n countyItem.select = true;\n countyItem.disabled = false;\n } else if (countyItem.title == \"ALL\" && !countyItem.select) {\n onSetDisableCounty(leadTypeItem.key, stateItem.key, false);\n }\n }\n \n });\n })\n });\n }\n\n const onClearState = (offMarketKey) => {\n (itemListPackage?.states || []).map(leadTypeItem => {\n if (leadTypeItem.key == offMarketKey) {\n leadTypeItem.children.map(stateItem => {\n stateItem.select = false;\n onClearCounty(offMarketKey, stateItem.key);\n })\n }\n });\n }\n\n const onClearCounty = (offMarketKey, stateKey) => {\n (itemListPackage?.counties || []).map(leadTypeItem => {\n if (leadTypeItem.key == offMarketKey) {\n leadTypeItem.children.map(stateItem => {\n if (stateItem.key == stateKey) {\n stateItem.children.map(countyItem => {\n countyItem.select = false;\n })\n }\n })\n }\n });\n }\n\n const onSetDisableCounty = (offMarketKey, stateKey, isDisable) => {\n (itemListPackage?.counties || []).map(leadTypeItem => {\n if (leadTypeItem.key == offMarketKey) {\n leadTypeItem.children.map(stateItem => {\n if (stateItem.key == stateKey) {\n stateItem.children.map(countyItem => {\n if (!isDisable && countyItem.items.is_subscribed) {\n\n } else {\n countyItem.disabled = isDisable;\n }\n })\n }\n })\n }\n });\n }\n\n const onCheck = (checkedItems, event, parent) => {\n switch (parent) {\n case 0:\n onCheckOffMarket(event?.node?.key);\n break;\n case 1:\n onCheckState(event?.node?.key);\n break;\n case 2:\n onCheckCounty(event?.node?.key);\n break;\n }\n generateData();\n }\n\n return
\n}\n\nexport default ChoosePackages\n","import {Button} from \"antd\";\nimport React, {useEffect, useState} from \"react\";\nimport {useSelector} from \"react-redux\";\nimport {selectFetching} from \"../../../../data/reselects/subscriptionSelector\";\n\nconst InfoPackages = props => {\n\n return (\n
\n
\n
\n
\n
\n
Standard \n
Limited
\n
\n \n View Information\n \n
\n
\n
\n
\n
\n
Premium \n
Unlimited
\n
\n \n View Information\n \n
\n
\n
\n
\n
\n )\n}\n\nexport default InfoPackages\n","import React, {useEffect, useState} from \"react\"\nimport {find, findIndex, groupBy, cloneDeep} from \"lodash\";\nimport moment from 'moment';\nimport queryString from 'query-string';\nimport MainLayout from \"../../common/layout/MainLayout\";\nimport {Button, Divider, Empty, Modal, Spin, Tree} from \"antd\";\nimport Packages from \"./components/Packages\";\nimport {ActionSubscriptionListPackage, ActionConfirmPackage} from \"../../../data/hooks/subscription\";\nimport {ActionPackageCreateOrder, ActionPackagePaymentInitStore} from \"../../../data/hooks/packagePayment\";\nimport {useSelector} from \"react-redux\";\nimport {\n selectFetching,\n selectSubscriptionListPackage,\n selectConfirmPackage\n} from \"../../../data/reselects/subscriptionSelector\";\nimport {\n selectFetching as packagePaymentFetching,\n selectPackagePaymentCreateOrder,\n} from \"../../../data/reselects/packagePaymentSelector\";\nimport {removeArrayElementObject, removeElementObject} from \"../../../utils/functions\";\nimport ChoosePackages from \"./components/ChoosePackages\";\nimport InfoPackages from \"./components/InfoPackages\";\nimport {TYPE_CONFIRM_PACKAGE} from \"../../../data/mapping/Response/SubscriptionResponse\";\nimport {TYPE_PACKAGE} from \"../../../data/mapping/Response/PackagePaymentResponse\";\nimport {Icon} from \"../../common\";\n\nconst Index = (props) => {\n const namePage = \"subscription_current\",\n [month, setMonth] = useState(\"\"),\n [resultItem, setResultItem] = useState([]),\n [getSelectedItems, setSetSelectedItems] = useState([]),\n [confirmPackages, setConfirmPackages] = useState([]),\n [requestParams, setRequestParams] = useState([]),\n [keySelected, setKeySelected] = useState([]),\n [isShowDetailConfirmPackage, setIsShowDetailConfirmPackage] = useState(false),\n // ============== ACTION ==============\n actionSubscriptionListPackage = ActionSubscriptionListPackage(),\n actionConfirmPackage = ActionConfirmPackage(),\n actionPackageCreateOrder = ActionPackageCreateOrder(),\n actionPackagePaymentInitStore = ActionPackagePaymentInitStore(),\n // ============== SELECT DATA ==============\n itemFetching = useSelector(selectFetching()),\n itemPackagePaymentFetching = useSelector(packagePaymentFetching()),\n itemConfirmPackage = useSelector(selectConfirmPackage()),\n itemPackagePaymentCreateOrder = useSelector(selectPackagePaymentCreateOrder()),\n itemListPackage = useSelector(selectSubscriptionListPackage());\n\n useEffect(() => {\n actionPackagePaymentInitStore({clearResult: true})\n let month = queryString.parse(props.location.search)?.month ? queryString.parse(props.location.search)?.month : moment(new Date()).format(\"YYYYMM\");\n setMonth(month)\n actionSubscriptionListPackage({month: month});\n }, []);\n\n useEffect(() => {\n let month = queryString.parse(props.location.search)?.month ? queryString.parse(props.location.search)?.month : moment(new Date()).format(\"YYYYMM\");\n setMonth(month)\n actionSubscriptionListPackage({month: month});\n }, [props.location]);\n\n useEffect(() => {\n setResultItem(itemListPackage?.customPackages || []);\n }, [itemListPackage]);\n\n useEffect(() => {\n setConfirmPackages(itemConfirmPackage);\n setIsShowDetailConfirmPackage(Object.keys(itemConfirmPackage).length > 0)\n }, [itemConfirmPackage]);\n\n const selectItems = props => {\n setSetSelectedItems(props)\n }\n\n const onRequestParams = props => {\n let rqParams = [],\n selectParams = (props || []).filter(i => i.parent === 2 && i.select && !i.disabled);\n if ((selectParams || []).length > 0) {\n rqParams = selectParams.map(i => i?.items?.id)\n }\n setRequestParams(rqParams)\n }\n\n const onSubscript = event => {\n actionConfirmPackage({\n month,\n packages: requestParams,\n orderType: TYPE_CONFIRM_PACKAGE.PACkAGE_LIST\n })\n }\n\n const onCreateOrder = (type) => {\n actionPackageCreateOrder({\n month,\n type,\n packages: requestParams,\n orderType: TYPE_CONFIRM_PACKAGE.PACkAGE_LIST,\n })\n }\n\n return (\n
\n \n
Choose your package type\n for {moment(month).format(\"YYYY-MM\")}}\n width={1000}\n visible={isShowDetailConfirmPackage}\n onOk={() => {\n }} onCancel={() => setIsShowDetailConfirmPackage(false)}\n >\n {\n isShowDetailConfirmPackage && (\n \n \n
\n {\n confirmPackages?.S && (\n
\n {confirmPackages?.S?.name} \n {\n confirmPackages?.S?.sale_price && confirmPackages?.S?.sale_price.length > 0 && (\n {confirmPackages?.S?.sale_price}
\n {confirmPackages?.S?.message}
\n onCreateOrder(TYPE_PACKAGE.STANDARD)}>\n Buy Now {itemPackagePaymentFetching &&\n \n \n )\n }\n {\n confirmPackages?.P && (\n
\n {confirmPackages?.P?.name} \n {\n confirmPackages?.P?.sale_price && confirmPackages?.P?.sale_price.length > 0 && (\n {confirmPackages?.P?.sale_price}
\n {confirmPackages?.P?.message}
\n onCreateOrder(TYPE_PACKAGE.PREMIUM)}>\n Buy Now {itemPackagePaymentFetching &&\n \n ![](\"/layout/icon/popup-success.svg\"/)
\n ![](\"https://cdn-blnlm.nitrocdn.com/PQMiHZavNwOdtjaYEZRXHtZQWnBieyDx/assets/static/optimized/rev-8e1a71d/wp-content/uploads/2021/05/reiq-logo-2021.png\"){kind=logo}
*/}\n {/*![](\"./layout/calendar.svg\")
\n ![](\"./layout/icon-filters.svg\"){kind=icon}
\n ![\"\"](\"/layout/pages/home/home-pocket.svg\"/)
\n ![\"\"](\"/layout/pages/home/home-email.svg\"/)
\n ![](\"./layout/logo-login.svg\"\n){kind=logo}
\n ![](\"./layout/logo-login.svg\"*/}\n){kind=logo}
*/}\n // {/* ![](\"/layout/icon/ticket/phone.svg\"){kind=icon}
844-929-\n 3325\n ![](\"/layout/icon/ticket/location.svg\"\n){kind=icon}
7950 Legacy Dr, Plano, TX 75024, US\n ![\"\"](\"/layout/map.png\")
\n