API tools faq
paste
Advertisement
baby_in_magento

gfgrfgfrgfr

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