nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-02-18 18:02:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add CatalogRedeemVoucherView

Browse Source
This commit is contained in:
Bill 2021-08-25 23:33:11 -04:00
parent f55664c157
commit 48dfdb6ce1
3 changed files with 61 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/catalog/views/page/layout/frontpage4/CatalogLayoutFrontpage4View.tsx
View File

@ -1,6 +1,8 @@
import { FrontPageItem } from '@nitrots/nitro-renderer';
import { FC, useCallback, useMemo } from 'react';
import { CreateLinkEvent, GetConfiguration } from '../../../../../../api';
import { GetCatalogPageText } from '../../../../common/CatalogUtilities';
import { CatalogRedeemVoucherView } from '../../redeem-voucher/CatalogRedeemVoucherView';
import { CatalogLayoutFrontpage4ViewProps } from './CatalogLayoutFrontpage4View.types';
export const CatalogLayoutFrontpage4View: FC<CatalogLayoutFrontpage4ViewProps> = props =>
@ -9,6 +11,7 @@ export const CatalogLayoutFrontpage4View: FC<CatalogLayoutFrontpage4ViewProps> =
const imageLibraryUrl = useMemo(() =>
{
console.log(pageParser);
return GetConfiguration<string>('image.library.url');
}, []);
@ -48,6 +51,7 @@ export const CatalogLayoutFrontpage4View: FC<CatalogLayoutFrontpage4ViewProps> =
<div className="front-page-item h-100" style={ { backgroundImage: `url('${ imageLibraryUrl }${ pageParser.frontPageItems[3].itemPromoImage }')` }} onClick={ event => selectItem(pageParser.frontPageItems[3]) }>
<div className="front-page-item-caption">{ pageParser.frontPageItems[3].itemName }</div>
</div> }
<CatalogRedeemVoucherView text={ GetCatalogPageText(pageParser, 1) } />
</div>
</div>
);

53
src/views/catalog/views/page/redeem-voucher/CatalogRedeemVoucherView.tsx Normal file
View File

@ -0,0 +1,53 @@
import { RedeemVoucherMessageComposer, VoucherRedeemErrorMessageEvent, VoucherRedeemOkMessageEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { CreateMessageHook, SendMessageHook } from '../../../../../hooks';
import { CatalogRedeemVoucherViewProps } from './CatalogRedeemVoucherView.types';
export const CatalogRedeemVoucherView: FC<CatalogRedeemVoucherViewProps> = props =>
{
const { text = null } = props;
const [ voucher, setVoucher ] = useState<string>('');
const [ isWaiting, setIsWaiting ] = useState(false);
const redeemVoucher = useCallback(() =>
{
if(!voucher || !voucher.length || isWaiting) return;
SendMessageHook(new RedeemVoucherMessageComposer(voucher));
setIsWaiting(true);
}, [ voucher, isWaiting ]);
const onVoucherRedeemOkMessageEvent = useCallback((event: VoucherRedeemOkMessageEvent) =>
{
const parser = event.getParser();
console.log(event);
setIsWaiting(false);
}, []);
CreateMessageHook(VoucherRedeemOkMessageEvent, onVoucherRedeemOkMessageEvent);
const onVoucherRedeemErrorMessageEvent = useCallback((event: VoucherRedeemErrorMessageEvent) =>
{
const parser = event.getParser();
console.log(event);
setIsWaiting(false);
}, []);
CreateMessageHook(VoucherRedeemErrorMessageEvent, onVoucherRedeemErrorMessageEvent);
return (
<div className="d-flex mt-1">
<div className="d-flex flex-grow-1 me-1">
<input type="text" className="form-control form-control-sm" placeholder={ text } value={ voucher } onChange={ event => setVoucher(event.target.value) } />
</div>
<div className="d-flex">
<button type="button" className="btn btn-primary btn-sm" onClick={ redeemVoucher } disabled={ isWaiting }>
<i className="fas fa-tag"></i>
</button>
</div>
</div>
)
}

4
src/views/catalog/views/page/redeem-voucher/CatalogRedeemVoucherView.types.ts Normal file
View File

@ -0,0 +1,4 @@
export interface CatalogRedeemVoucherViewProps
{
text: string;
}