API tools faq
paste
baby_in_magento

Untitled

baby_in_magento
Nov 15th, 2023
85
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.21 KB | None | 0 0
raw download clone embed print report
  1. import React, { useEffect, useState } from 'react';
  2. import Diamond from './images/diamond.png';
  3. import Script from './images/script.png';
  4. import Calendar from './images/calendar.png';
  5. import Takeoutbag from './images/takeout-bag.png';
  6. import Glowimg from './images/glowimage.png';
  7. import Glowimg1 from './images/glowimg3.png';
  8. import Glowimg2 from './images/glowimage2.png';
  9. import { BrowserPersistence } from '@magento/peregrine/lib/util';
  10. import { storeListBasedOnPincode } from '../../../../reducers/CustomReducer';
  11. import { useDispatch, useSelector } from 'react-redux';
  12. import { useQuery, gql } from '@apollo/client';
  13. import { useWindowSize } from '@magento/peregrine';
  14. import { Link, useHistory } from 'react-router-dom';
  15. import try_at_store from './images/try_our_store_mob.jpg';
  16. const storage = new BrowserPersistence();
  17. import apiClient from '../../../../api';
  18. const GET_PRODUCT_AVAILABLE_STORE = gql`
  19. query getProducts($key: String!, $sku: String!) {
  20. products(
  21. filter: { is_outlet_available: { in: [$key] }, sku: { in: [$sku] } }
  22. ) {
  23. items {
  24. sku
  25. uid
  26. name
  27. }
  28. }
  29. }
  30. `;
  31.  
  32. const TryAtHome = ({ sku, pincode, handlePincode }) => {
  33. const items = storage.getItem('try_at_store') || [];
  34.  
  35. const [isAdded, setIsAdded] = useState(items?.includes(sku) || false);
  36. const dispatch = useDispatch();
  37. const [isGetStores, setIsGetStores] = useState(false);
  38.  
  39. const history = useHistory();
  40. const { storesList, storeUserInfo } = useSelector(state => state.custom);
  41.  
  42. const windowSize = useWindowSize();
  43. const isMobile = windowSize.innerWidth <= 640;
  44.  
  45. const handleAdd = () => {
  46. storage.setItem('try_at_home', items.concat([sku]), null);
  47. setIsAdded(storage.getItem('try_at_home').includes(sku));
  48.  
  49. history.push('/try-at-home/cart');
  50. };
  51.  
  52. useEffect(() => {
  53. if (pincode) {
  54. dispatch(storeListBasedOnPincode(pincode));
  55. }
  56. }, [pincode]);
  57.  
  58. const [banners, setBanners] = useState([]);
  59. useEffect(() => {
  60. getBanners();
  61. }, []);
  62.  
  63. const getBanners = async () => {
  64. try {
  65. const response = await apiClient.get(apiClient.Urls.getSlider, {
  66. identifier: 'try_at_store_pdp'
  67. });
  68. if (response.success) {
  69. setBanners(response.data[0]);
  70. }
  71. } catch (error) {
  72. console.log('error', error);
  73. }
  74. };
  75. var ids = '';
  76.  
  77. storesList &&
  78. storesList.forEach(i => {
  79. ids =
  80. ids && ids.length > 0
  81. ? i.outlet_filter_id + ',' + ids
  82. : i.outlet_filter_id;
  83. });
  84. const { error, loading, data, refetch } = useQuery(
  85. GET_PRODUCT_AVAILABLE_STORE,
  86. {
  87. fetchPolicy: 'cache-and-network',
  88. nextFetchPolicy: 'cache-first',
  89. skip: !ids,
  90. variables: {
  91. key: ids,
  92. sku: sku
  93. }
  94. }
  95. );
  96.  
  97. const [available, setAvailable] = useState(
  98. data?.products?.items?.length > 0 ? true : false
  99. );
  100. const handleCheck = () => {
  101. dispatch(storeListBasedOnPincode(pincode));
  102.  
  103. storesList &&
  104. storesList.forEach(i => {
  105. ids = i.outlet_filter_id + ',' + ids;
  106. });
  107.  
  108. refetch();
  109.  
  110. if (data?.products?.items?.length > 0) {
  111. setAvailable(true);
  112. } else {
  113. setAvailable(false);
  114. }
  115. };
  116.  
  117. if (isMobile) {
  118. return (
  119. <div class="rounded-lg m-[1rem] flex flex-col items-center bg-[#9D8D7A] p-[1rem] mt-[4rem]">
  120. <div class="flex flex-col m-2 px-8 py-2 items-center text-center">
  121. <h1 class="text-2xl text-[#FFF] font-ivyModeRegular"
  122. dangerouslySetInnerHTML={{
  123. __html: banners && banners.slide_title
  124. }} />
  125. {/* <p class="text-sm text-[#FFF] font-lato">
  126. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
  127. sed diam nonumy eirmod Lorem ipsum dolor sit amet
  128. </p> */}
  129. </div>
  130. <div class="flex items-center flex-col pb-4">
  131. <img src={banners.slide_image_mobile} alt="Glowimg1" className="w-[85%]" />
  132. <div className="mb-[15px]">
  133. <div className="flex flex-col mt-4"
  134. dangerouslySetInnerHTML={{
  135. __html: banners && banners.slide_text
  136. }}
  137. />
  138. {/* <div class=" flex flex-col mt-4 items-center">
  139. <h1 class=" text-2xl text-3xl text-[#FFFFFF] font-ivyModeRegular">
  140. Try At Store
  141. </h1>
  142. <p class=" text-sm text-sm mt-2 text-[#FFFFFF] font-lato">
  143. Experience our jewellery before you buy it. Try
  144. it at the nearest store.
  145. </p>
  146. </div> */}
  147.  
  148. {/* <div class=" flex flex-row flex flex-row items-center mt-4">
  149. <img src={Diamond} alt="Diamond" className='w-1/4' />
  150. <div class=" flex flex-col">
  151. <h1 class=" text-sm text-base text-[#FFFFFF]">Try This Jewellery At Your Home.</h1>
  152. <p class=" text-sm mt-2 text-[#FFFFFF] font-lato">
  153. Lorem ipsum dolor sit amet, consetetur
  154. </p>
  155. </div>
  156. </div> */}
  157.  
  158. {/* <div class=" flex flex-row flex flex-row items-center mt-4">
  159. <img src={Script} alt="Diamond" className='w-1/4' />
  160. <div class=" flex flex-col">
  161. <h1 class=" text-sm text-base text-[#FFFFFF]">Visit a store to put on your glow{' '}</h1>
  162. <p class=" text-sm mt-2 text-[#FFFFFF] font-lato">
  163. Lorem ipsum dolor sit amet, consetetur
  164. </p>
  165. </div>
  166. </div> */}
  167.  
  168. <div class="mt-[15px] flex flex-col items-center justify-center">
  169. <div className="bg-[#fff] pr-2 rounded mt-[20px] w-full">
  170. <input
  171. autoComplete="pincode"
  172. field="pincode"
  173. id="pincode"
  174. className="h-[40px] px-[10px] text-[16px] rounded h-[50px] w-[100%]"
  175. value={pincode}
  176. placeholder="Enter Pin Code"
  177. onChange={e => {
  178. handlePincode(e.target.value);
  179. storage.setItem(
  180. 'pin_code',
  181. e.target.value,
  182. null
  183. );
  184. }}
  185. />
  186. </div>
  187. <div onClick={() => {
  188. dispatch(storeListBasedOnPincode(pincode));
  189. setIsGetStores(true);
  190. }} class="mt-[15px] w-full cursor-pointer flex items-center justify-center py-[12px] text-[#FFFFFF] border-[1px] border-[#fff] rounded tracking-[2.4px]">
  191. FIND STORE
  192. </div>
  193. {
  194. isGetStores && storesList && storesList.length == 0 ?
  195. <div className='mt-2'><span className='text-[16px]'>Try at store is not available near you.</span></div> : null
  196. }
  197. </div>
  198. {storesList && storesList.length > 0 ? (
  199. <div className="w-[100%] flex flex-row p-[20px] rounded justify-center items-center gap flex-wrap">
  200. {storesList.map((store, index) => {
  201. return (
  202. <OutletItem
  203. key={index}
  204. store={store}
  205. sku={sku}
  206. isMobile={true}
  207. isGetStores={isGetStores}
  208. isAdded={isAdded}
  209. setIsAdded={setIsAdded}
  210. />
  211. );
  212. })}
  213. </div>
  214. ) : null}
  215. </div>
  216. </div>
  217. <div class="flex items-center flex-col mt-12 pb-4">
  218. <div className='relative flex justify-center items-center'>
  219. <img src={Glowimg} alt="Diamond" className='w-[80%]' />
  220. </div>
  221. <div className='mt-[15px]'>
  222. <div class=" flex flex-col mt-4 flex flex-col mt-4">
  223. <h1 class="text-2xl text-[#FFFFFF] font-ivyModeRegular">Try It On At Home</h1>
  224. <p class=" text-sm text-sm mt-2 text-[#FFFFFF] font-lato"><br /> </p>
  225. </div>
  226.  
  227. <div class=" flex flex-row flex flex-row items-center mt-4">
  228. <img src={Diamond} alt="Diamond" className='w-1/4' />
  229. <div class=" flex flex-col ml-2">
  230. <h1 class=" text-sm text-base text-[#FFFFFF]">Choose your favorite design.</h1>
  231. <p class=" text-sm mt-2 text-[#FFFFFF] font-lato">Add minimum 1 Design.</p>
  232. </div>
  233. </div>
  234.  
  235. <div class=" flex flex-row flex flex-row items-center mt-4">
  236. <img src={Calendar} alt="Diamond" className='w-1/4' />
  237. <div class=" flex flex-col ml-2">
  238. <h1 class=" text-sm text-base text-[#FFFFFF]">Book an appointment.</h1>
  239. <p class=" text-sm mt-2 text-[#FFFFFF] font-lato">Its Free, Select a date and time.</p>
  240. </div>
  241. </div>
  242. <div class=" flex flex-row flex flex-row items-center mt-4">
  243. <img src={Script} alt="Diamond" className='w-1/4' />
  244. <div class=" flex flex-col ml-2">
  245. <h1 class=" text-sm text-base text-[#FFFFFF]">Try the design.</h1>
  246. <p class=" text-sm mt-2 text-[#FFFFFF] font-lato">Our executive will bring the selected design to your home.</p>
  247. </div>
  248. </div>
  249. <div class=" flex flex-row flex flex-row items-center mt-4">
  250. <img src={Takeoutbag} alt="Diamond" className='w-1/4' />
  251. <div class=" flex flex-col ml-2">
  252. <h1 class=" text-sm text-base text-[#FFFFFF]">Buy the jewellery if you like.</h1>
  253. <p class=" text-sm mt-2 text-[#FFFFFF] font-lato">Buy on the spot! And if you don't like it, there's no obligation to buy.</p>
  254. </div>
  255. </div>
  256. <div className="bg-[#fff] pr-2 rounded mt-[20px] w-full flex">
  257. <input
  258. autoComplete="pincode"
  259. field="pincode"
  260. id="pincode"
  261. className="h-[40px] px-[10px] text-[16px] rounded h-[50px] w-[100%]"
  262. value={pincode}
  263. placeholder="Enter Pin Code"
  264. onChange={e => {
  265. handlePincode(e.target.value);
  266. storage.setItem('pin_code', e.target.value, null);
  267. }}
  268. />
  269. <button
  270. className="uppercase text-[#c7a46f]"
  271. onClick={() => {
  272. handleCheck();
  273. }}
  274. >
  275. check
  276. </button>
  277. </div>
  278. {available ? (
  279. isAdded ? (
  280. <Link
  281. to={'/try-at-home/cart'}
  282. class="cursor-pointer mt-[15px] flex items-center justify-center py-[12px] text-[#FFFFFF] border-[1px] border-[#fff] rounded w-96 tracking-[2.4px]"
  283. >
  284. TRY AT HOME
  285. </Link>
  286. ) : (
  287. <div
  288. onClick={() =>
  289. available
  290. ? handleAdd()
  291. : alert(
  292. 'This product is not available for try at home.'
  293. )
  294. }
  295. disabled={!available}
  296. class="cursor-pointer mt-[15px] flex items-center justify-center py-[12px] text-[#FFFFFF] border-[1px] border-[#fff] rounded w-96 tracking-[2.4px]"
  297. >
  298. TRY AT HOME
  299. </div>
  300. )
  301. ) : storesList && storesList.length == 0 ? (
  302. <div className="mt-[10px]">
  303. <span className="text-[#e9c58f]">
  304. This product is not available for try at home.
  305. </span>
  306. </div>
  307. ) : null}
  308.  
  309. </div>
  310.  
  311.  
  312. </div>
  313. </div>
  314. );
  315. }
  316.  
  317. return (
  318. <div class="flex justify-center bg-[#9D8D7A] rounded-lg mt-4">
  319. <div class="rounded mt-4 flex flex-col items-center bg-[#9D8D7A]">
  320.  
  321. <div class="flex flex-col mt-12 pb-8 items-center text-center">
  322. <h1 class="text-3xl text-[#FFF] font-ivyModeRegular"
  323. dangerouslySetInnerHTML={{
  324. __html: banners && banners.slide_title
  325. }} />
  326.  
  327. {/* <p class="text-sm text-[#FFF] font-lato">
  328. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
  329. sed diam nonumy eirmod Lorem ipsum dolor sit amet
  330. </p> */}
  331. </div>
  332. <div class="flex items-center py-[40px]">
  333. <img src={banners && banners.slide_image} alt="Glowimg1" class="h-96 mr-16" />
  334. <div class="mr-0">
  335. <div className="flex flex-col mt-4"
  336. dangerouslySetInnerHTML={{
  337. __html: banners && banners.slide_text
  338. }}
  339. />
  340. {/* <div class="flex flex-col mt-2">
  341. <h1 class="text-2xl text-[#FFFFFF] font-ivyModeRegular">
  342. Try At Store
  343. </h1>
  344. <p class="text-sm text-[#FFFFFF] font-lato">
  345. Experience our jewellery before you buy it. Try
  346. it at the nearest store.
  347. </p>
  348. </div> */}
  349.  
  350. {/* <div class="flex flex-row items-center">
  351. <img src={Diamond} alt="Diamond" class="w-14 h-14 mt-3 p-2" />
  352. <div class=" mt-6 flex flex-col mt-6">
  353. <h1 class=" text-sm text-base text-[#FFFFFF]">
  354. Try This Jewellery At Nearby Store.
  355. </h1>
  356. <p class=" text-sm text-xs mt-2 text-[#FFFFFF] font-lato">
  357. Lorem ipsum dolor sit amet, consetetur
  358. </p>
  359. </div>
  360. </div> */}
  361.  
  362. {/* <div class="flex flex-row flex flex-row items-center">
  363. <img src={Script} alt="Diamond" class=" w-14 h-14 mt-3 p-2 w-14 h-14 mt-3 p-2" />
  364. <div class="flex flex-col mt-6">
  365. <h1 class=" text-sm text-base text-[#FFFFFF]">
  366. Visit a store to put on your glow
  367. </h1>
  368. <p class=" text-sm text-xs mt-2 text-[#FFFFFF] font-lato">
  369. Lorem ipsum dolor sit amet, consetetur
  370. </p>
  371. </div>
  372. </div> */}
  373. <div className="bg-[#fff] pr-2 rounded mt-[20px]">
  374. <input
  375. autoComplete="pincode"
  376. field="pincode"
  377. id="pincode"
  378. className="h-[40px] px-[10px] text-[16px] rounded h-[50px] w-[100%]"
  379. value={pincode}
  380. placeholder="Enter Pin Code"
  381. onChange={e => {
  382. handlePincode(e.target.value);
  383. storage.setItem(
  384. 'pin_code',
  385. e.target.value,
  386. null
  387. );
  388. }}
  389. />
  390. </div>
  391. <div onClick={() => {
  392. dispatch(storeListBasedOnPincode(pincode));
  393. setIsGetStores(true)
  394. }} class="mt-[15px] cursor-pointer flex items-center justify-center py-[12px] text-[#FFFFFF] border-[1px] border-[#fff] rounded tracking-[2.4px]">
  395. FIND STORE
  396. </div>
  397. {
  398. isGetStores && storesList && storesList.length == 0 ?
  399. <div className='mt-2'>
  400. <span className='text-[16px]'>Try at store is not available near you.</span></div>
  401. : null
  402. }
  403.  
  404. </div>
  405. </div>
  406. {storesList && storesList.length > 0 ? (
  407. <div className="w-[100%] flex flex-row p-[20px] rounded justify-center items-center gap flex-wrap">
  408. {storesList.map((store, index) => {
  409. return (
  410. <OutletItem
  411. key={index}
  412. store={store}
  413. sku={sku}
  414. isMobile={false}
  415. isGetStores={isGetStores}
  416. isAdded={isAdded}
  417. setIsAdded={setIsAdded}
  418. />
  419. );
  420. })}
  421. </div>
  422. ) : null}
  423.  
  424. <div class="flex items-center py-[40px]">
  425. <div class="mr-0">
  426. <div class="flex flex-col mt-2">
  427. <h1 class="text-2xl text-[#FFFFFF] font-ivyModeRegular">
  428. Try It On At Home
  429. </h1>
  430. <p class="text-sm text-[#FFFFFF] font-lato">
  431.  
  432. <br />
  433. </p>
  434. </div>
  435.  
  436. <div class="flex flex-row items-center">
  437. <img
  438. src={Diamond}
  439. alt="Diamond"
  440. class="w-14 h-14 mt-3 p-2"
  441. />
  442. <div class=" mt-6 flex flex-col mt-6">
  443. <h1 class=" text-sm text-base text-[#FFFFFF]">
  444. Choose your favorite design.
  445. </h1>
  446. <p class=" text-sm text-xs mt-2 text-[#FFFFFF] font-lato">
  447. Add minimum 1 Design
  448. </p>
  449. </div>
  450. </div>
  451.  
  452. <div class="flex flex-row flex flex-row items-center">
  453. <img
  454. src={Calendar}
  455. alt="Diamond"
  456. class=" w-14 h-14 mt-3 p-2 w-14 h-14 mt-3 p-2"
  457. />
  458. <div class="flex flex-col mt-6">
  459. <h1 class=" text-sm text-base text-[#FFFFFF]">
  460. Book an appointment.
  461. </h1>
  462. <p class=" text-sm text-xs mt-2 text-[#FFFFFF] font-lato">
  463. Its Free, Select a date and time
  464. </p>
  465. </div>
  466. </div>
  467. <div class="flex flex-row flex flex-row items-center">
  468. <img
  469. src={Script}
  470. alt="Diamond"
  471. class=" w-14 h-14 mt-3 p-2 w-14 h-14 mt-3 p-2"
  472. />
  473. <div class="flex flex-col mt-6">
  474. <h1 class=" text-sm text-base text-[#FFFFFF]">
  475. Try the design.
  476. </h1>
  477. <p class=" text-sm text-xs mt-2 text-[#FFFFFF] font-lato">
  478. Our executive will bring the selected design to your home
  479. </p>
  480. </div>
  481. </div>
  482. <div class="flex flex-row flex flex-row items-center">
  483. <img
  484. src={Takeoutbag}
  485. alt="Diamond"
  486. class=" w-14 h-14 mt-3 p-2 w-14 h-14 mt-3 p-2"
  487. />
  488. <div class="flex flex-col mt-6">
  489. <h1 class=" text-sm text-base text-[#FFFFFF]">
  490. Buy the jewellery if you like.
  491. </h1>
  492. <p class=" text-sm text-xs mt-2 text-[#FFFFFF] font-lato">
  493. Buy on the spot! And if you don't like it, there's no obligation to buy.
  494. </p>
  495. </div>
  496. </div>
  497. <HomeSection
  498. sku={sku}
  499. pincode={pincode}
  500. handlePincode={handlePincode}
  501. storeListBasedOnPincode={
  502. storeListBasedOnPincode
  503. }
  504. storesList={storesList}
  505. handleCheck={handleCheck}
  506. error={error}
  507. loading={loading}
  508. data={data}
  509. refetch={refetch}
  510. available={available}
  511. handleAdd={handleAdd}
  512. />
  513. </div>
  514. <img src={Glowimg1} alt="Glowimg1" class="h-96 ml-16" />
  515. </div>
  516.  
  517. {/* <div class="flex items-center py-[40px]">
  518. <img src={Glowimg2} alt="Glowimg1" class="h-96 mr-16" />
  519. <div class="mr-0">
  520. <div class="flex flex-col mt-2">
  521. <h1 class="text-2xl text-[#FFFFFF] font-ivyModeRegular">Want A Closer Look?</h1>
  522. <p class="text-sm text-[#FFFFFF] font-lato">Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br /> sed diam nonumy eirmod Lorem ipsum dolor sit amet</p>
  523. </div>
  524.  
  525. <div class="flex flex-row items-center">
  526. <img src={Script} alt="Diamond" class="w-14 h-14 mt-3 p-2" />
  527. <div class=" mt-6 flex flex-col mt-6">
  528. <h1 class=" text-sm text-base text-[#FFFFFF]">Live Video Call With Our Designer</h1>
  529. <p class=" text-sm text-xs mt-2 text-[#FFFFFF] font-lato">Lorem ipsum dolor sit amet, consetetur</p>
  530. </div>
  531. </div>
  532.  
  533. <div class="flex flex-row flex flex-row items-center">
  534. <img src={Script} alt="Diamond" class=" w-14 h-14 mt-3 p-2 w-14 h-14 mt-3 p-2" />
  535. <div class="flex flex-col mt-6">
  536. <h1 class=" text-sm text-base text-[#FFFFFF]">Lorem Ipsum Dolor Sit Amet</h1>
  537. <p class=" text-sm text-xs mt-2 text-[#FFFFFF] font-lato">Lorem ipsum dolor sit amet, consetetur</p>
  538. </div>
  539. </div>
  540.  
  541. <div class="pointer mt-[15px] flex items-center justify-center py-[12px] text-[#FFFFFF] border-[1px] border-[#fff] rounded w-96 tracking-[2.4px]">
  542. SCHEDULE A VIDEO CALL
  543. </div>
  544. </div>
  545.  
  546. </div> */}
  547. </div>
  548. </div>
  549. );
  550. };
  551.  
  552. const OutletItem = ({ store, sku, isMobile, isGetStores, isAdded, setIsAdded }) => {
  553. const { error, loading, data } = useQuery(GET_PRODUCT_AVAILABLE_STORE, {
  554. fetchPolicy: 'cache-and-network',
  555. nextFetchPolicy: 'cache-first',
  556. skip: !sku,
  557. variables: {
  558. key: '277',
  559. sku: sku
  560. }
  561. });
  562.  
  563. const items = storage.getItem('try_at_store') || [];
  564.  
  565. const available = data?.products?.items?.length > 0 ? true : false;
  566.  
  567. const handleAdd = () => {
  568. storage.setItem('try_at_store', items.concat([sku]), null);
  569. storage.setItem('selected_store', store, null);
  570. setIsAdded(storage.getItem('try_at_store').includes(sku));
  571. };
  572.  
  573. const mainClass = isMobile
  574. ? 'flex flex-col bg-[#F1F5EB] border-[1px] border-[#D7E0C9] rounded-[10px]'
  575. : 'flex flex-col bg-[#F1F5EB] border-[1px] border-[#D7E0C9] w-[30%] rounded-[10px]';
  576.  
  577. return (<>
  578. {isGetStores &&
  579. <div className={mainClass}>
  580. <div className="px-[20px] py-[15px]">
  581. <h1 className="text-[20px] font-semibold text-[#774E4F] font-ivyModeRegular capitalize">
  582. {store.name}
  583. </h1>
  584. <p className="text-[12px] text-[#3B444D]">
  585. {store.street_2},{store.street_1}, {store?.city},
  586. {store?.state}, {store?.pin} .
  587. </p>
  588. </div>
  589. <div className="px-[20px] py-[15px] h-[50px]">
  590. {available ? (
  591. <span className="uppercase tracking-[2.1px] text-[#509707]">
  592. Available
  593. </span>
  594. ) : (
  595. <span className="uppercase tracking-[2.1px] text-[#dd2525]">
  596. unavailable
  597. </span>
  598. )}
  599. </div>
  600. <div className="px-[20px] py-[15px]">
  601. <p className="text-[12px] text-[#3B444D]">
  602. Timings : {store?.timing}
  603. </p>
  604. <p className="text-[12px] text-[#3B444D] mb-[10px]">
  605. Contact :{' '}
  606. <a
  607. href={`tel:${store.phone_number}`}
  608. className="text-[12px] text-[#3B444D] mb-[10px]"
  609. >
  610. {store.phone_number}
  611. </a>
  612. </p>
  613. {isAdded ? (
  614. <Link to={'/try-at-store/cart'}>
  615. <button
  616. className={
  617. available
  618. ? `bg-[#181A1D] rounded py-[10px] w-[100%]`
  619. : `bg-[#ddd] rounded py-[10px] w-[100%]`
  620. }
  621. >
  622. <span className="text-[#fff] uppercase tracking-[2.1px]">
  623. go to cart
  624. </span>
  625. </button>
  626. </Link>
  627. ) : (
  628. <button
  629. disabled={!available}
  630. onClick={() =>
  631. isAdded
  632. ? alert('Alredy added to try at store cart!')
  633. : handleAdd()
  634. }
  635. className={
  636. available
  637. ? `bg-[#181A1D] rounded py-[10px] w-[100%]`
  638. : `bg-[#ddd] rounded py-[10px] w-[100%]`
  639. }
  640. >
  641. <span className="text-[#fff] uppercase tracking-[2.1px]">
  642. Try at store
  643. </span>
  644. </button>
  645. )}
  646. </div>
  647. </div>
  648. }
  649. </>);
  650. };
  651.  
  652. const HomeSection = ({
  653. sku,
  654. pincode,
  655. handlePincode,
  656. storesList,
  657. storeListBasedOnPincode,
  658. handleCheck,
  659. error,
  660. loading,
  661. data,
  662. refetch,
  663. available,
  664. isAdded,
  665. handleAdd
  666. }) => {
  667. const dispatch = useDispatch();
  668.  
  669. console.log('available',available)
  670. console.log('isAdded',isAdded)
  671. return (
  672. <div>
  673. <div className="bg-[#fff] pr-2 rounded mt-[20px] flex flex-row">
  674. <input
  675. autoComplete="pincode"
  676. field="pincode"
  677. id="pincode"
  678. className="h-[40px] px-[10px] text-[16px] rounded h-[50px] w-[100%]"
  679. value={pincode}
  680. placeholder="Enter Pin Code"
  681. onChange={e => {
  682. handlePincode(e.target.value);
  683. storage.setItem('pin_code', e.target.value, null);
  684. }}
  685. />
  686. <button
  687. className="uppercase text-[#c7a46f]"
  688. onClick={() => {
  689. handleCheck();
  690. }}
  691. >
  692. check
  693. </button>
  694. </div>
  695.  
  696.  
  697.  
  698. {
  699. available ? (
  700. isAdded ? (
  701. <Link
  702. to={'/try-at-home/cart'}
  703. class="cursor-pointer mt-[15px] flex items-center justify-center py-[12px] text-[#FFFFFF] border-[1px] border-[#fff] rounded w-96 tracking-[2.4px]"
  704. >
  705. TRY AT HOME
  706. </Link>
  707. ) : (
  708. <div
  709. onClick={() =>
  710. available
  711. ? handleAdd()
  712. : alert(
  713. 'This product is not available for try at home.'
  714. )
  715. }
  716. disabled={!available}
  717. class="cursor-pointer mt-[15px] flex items-center justify-center py-[12px] text-[#FFFFFF] border-[1px] border-[#fff] rounded w-96 tracking-[2.4px]"
  718. >
  719. TRY AT HOME
  720. </div>
  721. )
  722. ) : storesList && storesList.length == 0 ? (
  723. <div className="mt-[10px]">
  724. <span className="text-[#e9c58f]">
  725. This product is not available for try at home.
  726. </span>
  727. </div>
  728. ) : null}
  729. </div>
  730. );
  731. };
  732.  
  733. export default TryAtHome;
  734.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!