From 058f8e6dcc82785e3dda7ac08951a63f8faa360c Mon Sep 17 00:00:00 2001 From: Bill Date: Sat, 22 May 2021 13:27:39 -0400 Subject: [PATCH] Pet catalog updates --- src/assets/images/catalog/paint-icon.png | Bin 0 -> 262 bytes src/assets/styles/bootstrap/_variables.scss | 2 +- src/events/catalog/CatalogEvent.ts | 1 + src/events/catalog/CatalogNameResultEvent.ts | 25 +++ src/events/catalog/index.ts | 1 + src/views/catalog/CatalogMessageHandler.tsx | 25 ++- src/views/catalog/reducers/CatalogReducer.tsx | 30 +++- src/views/catalog/utils/CatalogPetPalette.ts | 9 ++ src/views/catalog/utils/CatalogUtilities.ts | 65 +++++++- .../views/page/layout/CatalogLayout.scss | 1 + .../views/page/layout/GetCatalogLayout.tsx | 3 +- .../layout/pets/CatalogLayoutPetView.scss | 10 ++ .../page/layout/pets/CatalogLayoutPetView.tsx | 150 ++++++++++++++++++ .../layout/pets/CatalogLayoutPetView.types.ts | 6 + .../CatalogPetNameApprovalView.scss | 0 .../CatalogPetNameApprovalView.tsx | 12 ++ .../CatalogPetNameApprovalView.types.ts | 7 + .../purchase/CatalogLayoutPetPurchaseView.tsx | 44 +++++ .../CatalogLayoutPetPurchaseView.types.ts | 8 + .../page/offer/CatalogPageOfferView.scss | 4 +- .../views/search/CatalogSearchView.tsx | 2 +- src/views/pet-image/PetImageView.tsx | 2 +- 22 files changed, 396 insertions(+), 11 deletions(-) create mode 100644 src/assets/images/catalog/paint-icon.png create mode 100644 src/events/catalog/CatalogNameResultEvent.ts create mode 100644 src/views/catalog/utils/CatalogPetPalette.ts create mode 100644 src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.scss create mode 100644 src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx create mode 100644 src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.types.ts create mode 100644 src/views/catalog/views/page/layout/pets/name-approval/CatalogPetNameApprovalView.scss create mode 100644 src/views/catalog/views/page/layout/pets/name-approval/CatalogPetNameApprovalView.tsx create mode 100644 src/views/catalog/views/page/layout/pets/name-approval/CatalogPetNameApprovalView.types.ts create mode 100644 src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.tsx create mode 100644 src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.types.ts diff --git a/src/assets/images/catalog/paint-icon.png b/src/assets/images/catalog/paint-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..f2bf7ea3fa77aba9f4b0c65a5e893e5babcea7c6 GIT binary patch literal 262 zcmeAS@N?(olHy`uVBq!ia0vp^GC(ZN!3-oLuF1;*DaPU;cPEB*=VV?2IV|apzK#qG z8~eHcB(eheYymzYu3o`0K<3voQ;z^Crjj7P;QtIyw;Ol?d7K3vk;M!Qe1}1p@p%4< z6rfv!p-89uzQ^T;=jmA2w@d|Z9p9dtIVsLtJAlk@Ft zSnQh}DblQ72NozK9}})PW7urCTrBp}g|0n&xm4O;U%PUMe`j{_Psg6!zozza+J1I; z5i%)PZ^GSc0-JO~^*0weyUx61wJ4$2ifPAp=J(l*`+r`2{ut;C22WQ%mvv4FO#t`p BUg7`% literal 0 HcmV?d00001 diff --git a/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss index f7f654d0..9649b47c 100644 --- a/src/assets/styles/bootstrap/_variables.scss +++ b/src/assets/styles/bootstrap/_variables.scss @@ -603,7 +603,7 @@ $input-btn-font-family: null !default; $input-btn-font-size: $font-size-base !default; $input-btn-line-height: $line-height-base !default; -$input-btn-focus-width: .25rem !default; +$input-btn-focus-width: 0 !default; $input-btn-focus-color-opacity: .25 !default; $input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default; $input-btn-focus-blur: 0 !default; diff --git a/src/events/catalog/CatalogEvent.ts b/src/events/catalog/CatalogEvent.ts index 0020a066..1ef36a23 100644 --- a/src/events/catalog/CatalogEvent.ts +++ b/src/events/catalog/CatalogEvent.ts @@ -8,4 +8,5 @@ export class CatalogEvent extends NitroEvent public static PURCHASE_SUCCESS: string = 'CE_PURCHASE_SUCCESS'; public static PURCHASE_FAILED: string = 'CE_PURCHASE_FAILED'; public static SOLD_OUT: string = 'CE_SOLD_OUT'; + public static APPROVE_NAME_RESULT: string = 'CE_APPROVE_NAME_RESULT'; } diff --git a/src/events/catalog/CatalogNameResultEvent.ts b/src/events/catalog/CatalogNameResultEvent.ts new file mode 100644 index 00000000..9098f5f4 --- /dev/null +++ b/src/events/catalog/CatalogNameResultEvent.ts @@ -0,0 +1,25 @@ +import { CatalogEvent } from './CatalogEvent'; + +export class CatalogNameResultEvent extends CatalogEvent +{ + private _result: number; + private _validationInfo: string; + + constructor(result: number, validationInfo: string) + { + super(CatalogEvent.APPROVE_NAME_RESULT); + + this._result = result; + this._validationInfo = validationInfo; + } + + public get result(): number + { + return this._result; + } + + public get validationInfo(): string + { + return this._validationInfo; + } +} diff --git a/src/events/catalog/index.ts b/src/events/catalog/index.ts index 60dd21d0..5986db42 100644 --- a/src/events/catalog/index.ts +++ b/src/events/catalog/index.ts @@ -1,4 +1,5 @@ export * from './CatalogEvent'; +export * from './CatalogNameResultEvent'; export * from './CatalogPurchasedEvent'; export * from './CatalogPurchaseFailureEvent'; export * from './CatalogPurchaseSoldOutEvent'; diff --git a/src/views/catalog/CatalogMessageHandler.tsx b/src/views/catalog/CatalogMessageHandler.tsx index 74b3f320..bc0e42ba 100644 --- a/src/views/catalog/CatalogMessageHandler.tsx +++ b/src/views/catalog/CatalogMessageHandler.tsx @@ -1,6 +1,6 @@ -import { CatalogPageEvent, CatalogPagesEvent, CatalogPurchaseEvent, CatalogPurchaseFailedEvent, CatalogPurchaseUnavailableEvent, CatalogSearchEvent, CatalogSoldOutEvent } from 'nitro-renderer'; +import { CatalogApproveNameResultEvent, CatalogPageEvent, CatalogPagesEvent, CatalogPurchaseEvent, CatalogPurchaseFailedEvent, CatalogPurchaseUnavailableEvent, CatalogSearchEvent, CatalogSoldOutEvent, SellablePetPalettesEvent } from 'nitro-renderer'; import { FC, useCallback } from 'react'; -import { CatalogPurchaseFailureEvent } from '../../events'; +import { CatalogNameResultEvent, CatalogPurchaseFailureEvent } from '../../events'; import { CatalogPurchasedEvent } from '../../events/catalog/CatalogPurchasedEvent'; import { CatalogPurchaseSoldOutEvent } from '../../events/catalog/CatalogPurchaseSoldOutEvent'; import { dispatchUiEvent } from '../../hooks/events/ui/ui-event'; @@ -8,6 +8,7 @@ import { CreateMessageHook } from '../../hooks/messages/message-event'; import { CatalogMessageHandlerProps } from './CatalogMessageHandler.types'; import { useCatalogContext } from './context/CatalogContext'; import { CatalogActions } from './reducers/CatalogReducer'; +import { CatalogPetPalette } from './utils/CatalogPetPalette'; export const CatalogMessageHandler: FC = props => { @@ -75,6 +76,24 @@ export const CatalogMessageHandler: FC = props => }); }, [ dispatchCatalogState ]); + const onSellablePetPalettesEvent = useCallback((event: SellablePetPalettesEvent) => + { + const parser = event.getParser(); + const petPalette = new CatalogPetPalette(parser.productCode, parser.palettes.slice()); + + dispatchCatalogState({ + type: CatalogActions.SET_PET_PALETTE, + payload: { petPalette } + }); + }, [ dispatchCatalogState ]); + + const onCatalogApproveNameResultEvent = useCallback((event: CatalogApproveNameResultEvent) => + { + const parser = event.getParser(); + + dispatchUiEvent(new CatalogNameResultEvent(parser.result, parser.validationInfo)); + }, []); + CreateMessageHook(CatalogPagesEvent, onCatalogPagesEvent); CreateMessageHook(CatalogPageEvent, onCatalogPageEvent); CreateMessageHook(CatalogPurchaseEvent, onCatalogPurchaseEvent); @@ -82,6 +101,8 @@ export const CatalogMessageHandler: FC = props => CreateMessageHook(CatalogPurchaseUnavailableEvent, onCatalogPurchaseUnavailableEvent); CreateMessageHook(CatalogSoldOutEvent, onCatalogSoldOutEvent); CreateMessageHook(CatalogSearchEvent, onCatalogSearchEvent); + CreateMessageHook(SellablePetPalettesEvent, onSellablePetPalettesEvent); + CreateMessageHook(CatalogApproveNameResultEvent, onCatalogApproveNameResultEvent); return null; } diff --git a/src/views/catalog/reducers/CatalogReducer.tsx b/src/views/catalog/reducers/CatalogReducer.tsx index b0483bde..0c178942 100644 --- a/src/views/catalog/reducers/CatalogReducer.tsx +++ b/src/views/catalog/reducers/CatalogReducer.tsx @@ -1,5 +1,6 @@ import { CatalogPageOfferData, ICatalogPageData, ICatalogPageParser } from 'nitro-renderer'; import { Reducer } from 'react'; +import { CatalogPetPalette } from '../utils/CatalogPetPalette'; import { ICatalogOffers, ICatalogSearchResult, SetOffersToNodes } from '../utils/CatalogUtilities'; export interface ICatalogState @@ -10,6 +11,7 @@ export interface ICatalogState pageParser: ICatalogPageParser; activeOffer: CatalogPageOfferData; searchResult: ICatalogSearchResult; + petPalettes: CatalogPetPalette[]; } export interface ICatalogAction @@ -22,6 +24,7 @@ export interface ICatalogAction pageParser?: ICatalogPageParser; activeOffer?: CatalogPageOfferData; searchResult?: ICatalogSearchResult; + petPalette?: CatalogPetPalette; } } @@ -32,6 +35,7 @@ export class CatalogActions public static SET_CATALOG_PAGE_PARSER: string = 'CA_SET_CATALOG_PAGE'; public static SET_CATALOG_ACTIVE_OFFER: string = 'CA_SET_ACTIVE_OFFER'; public static SET_SEARCH_RESULT: string = 'CA_SET_SEARCH_RESULT'; + public static SET_PET_PALETTE: string = 'CA_SET_PET_PALETTE'; } export const initialCatalog: ICatalogState = { @@ -40,7 +44,8 @@ export const initialCatalog: ICatalogState = { currentTab: null, pageParser: null, activeOffer: null, - searchResult: null + searchResult: null, + petPalettes: [] } export const CatalogReducer: Reducer = (state, action) => @@ -64,7 +69,7 @@ export const CatalogReducer: Reducer = (state, ac return { ...state, currentTab, searchResult }; } case CatalogActions.SET_CATALOG_PAGE_PARSER: { - const pageParser = action.payload.pageParser; + let pageParser = Object.create(action.payload.pageParser); let activeOffer = null; if(pageParser.layoutCode === 'single_bundle') @@ -91,6 +96,27 @@ export const CatalogReducer: Reducer = (state, ac return { ...state, searchResult }; } + case CatalogActions.SET_PET_PALETTE: { + const petPalette = (action.payload.petPalette || null); + + let petPalettes = [ ...state.petPalettes ]; + + for(let i = 0; i < petPalettes.length; i++) + { + const palette = petPalettes[i]; + + if(palette.breed === petPalette.breed) + { + petPalettes.splice(i, 1); + + break; + } + } + + petPalettes.push(petPalette); + + return { ...state, petPalettes }; + } default: return state; } diff --git a/src/views/catalog/utils/CatalogPetPalette.ts b/src/views/catalog/utils/CatalogPetPalette.ts new file mode 100644 index 00000000..23abc739 --- /dev/null +++ b/src/views/catalog/utils/CatalogPetPalette.ts @@ -0,0 +1,9 @@ +import { SellablePetPaletteData } from 'nitro-renderer'; + +export class CatalogPetPalette +{ + constructor( + public breed: string, + public palettes: SellablePetPaletteData[] + ) {} +} diff --git a/src/views/catalog/utils/CatalogUtilities.ts b/src/views/catalog/utils/CatalogUtilities.ts index 7af9ab25..7324716c 100644 --- a/src/views/catalog/utils/CatalogUtilities.ts +++ b/src/views/catalog/utils/CatalogUtilities.ts @@ -1,4 +1,5 @@ -import { CatalogPageOfferData, ICatalogPageData, ICatalogPageParser, IFurnitureData } from 'nitro-renderer'; +import { CatalogPageOfferData, ICatalogPageData, ICatalogPageParser, IFurnitureData, SellablePetPaletteData } from 'nitro-renderer'; +import { GetRoomEngine } from '../../../api'; import { GetProductDataForLocalization } from '../../../api/nitro/session/GetProductDataForLocalization'; import { GetConfiguration } from '../../../utils/GetConfiguration'; @@ -88,3 +89,65 @@ export function GetCatalogPageText(page: ICatalogPageParser, index: number = 0): return (message || ''); } + +export function GetPetIndexFromLocalization(localization: string) +{ + if(!localization.length) return 0; + + let index = (localization.length - 1); + + while(index >= 0) + { + if(isNaN(parseInt(localization.charAt(index)))) break; + + index--; + } + + if(index > 0) return parseInt(localization.substring(index + 1)); + + return -1; +} + +export function GetPetAvailableColors(petIndex: number, palettes: SellablePetPaletteData[]): number[][] +{ + switch(petIndex) + { + case 0: + return [[16743226], [16750435], [16764339], [0xF59500], [16498012], [16704690], [0xEDD400], [16115545], [16513201], [8694111], [11585939], [14413767], [6664599], [9553845], [12971486], [8358322], [10002885], [13292268], [10780600], [12623573], [14403561], [12418717], [14327229], [15517403], [14515069], [15764368], [16366271], [0xABABAB], [0xD4D4D4], [0xFFFFFF], [14256481], [14656129], [15848130], [14005087], [14337152], [15918540], [15118118], [15531929], [9764857], [11258085]]; + case 1: + return [[16743226], [16750435], [16764339], [0xF59500], [16498012], [16704690], [0xEDD400], [16115545], [16513201], [8694111], [11585939], [14413767], [6664599], [9553845], [12971486], [8358322], [10002885], [13292268], [10780600], [12623573], [14403561], [12418717], [14327229], [15517403], [14515069], [15764368], [16366271], [0xABABAB], [0xD4D4D4], [0xFFFFFF], [14256481], [14656129], [15848130], [14005087], [14337152], [15918540], [15118118], [15531929], [9764857], [11258085]]; + case 2: + return [[16579283], [15378351], [8830016], [15257125], [9340985], [8949607], [6198292], [8703620], [9889626], [8972045], [12161285], [13162269], [8620113], [12616503], [8628101], [0xD2FF00], [9764857]]; + case 3: + return [[0xFFFFFF], [0xEEEEEE], [0xDDDDDD]]; + case 4: + return [[0xFFFFFF], [16053490], [15464440], [16248792], [15396319], [15007487]]; + case 5: + return [[0xFFFFFF], [0xEEEEEE], [0xDDDDDD]]; + case 6: + return [[0xFFFFFF], [0xEEEEEE], [0xDDDDDD], [16767177], [16770205], [16751331]]; + case 7: + return [[0xCCCCCC], [0xAEAEAE], [16751331], [10149119], [16763290], [16743786]]; + default: { + const colors: number[][] = []; + + for(const palette of palettes) + { + const petColorResult = GetRoomEngine().getPetColorResult(petIndex, palette.paletteId); + + if(!petColorResult) continue; + + if(petColorResult._Str_5845 === petColorResult._Str_6659) + { + colors.push([ petColorResult._Str_5845 ]); + } + else + { + colors.push([ petColorResult._Str_5845, petColorResult._Str_6659 ]); + } + } + + return colors; + } + } +} diff --git a/src/views/catalog/views/page/layout/CatalogLayout.scss b/src/views/catalog/views/page/layout/CatalogLayout.scss index d90e1aa2..88936819 100644 --- a/src/views/catalog/views/page/layout/CatalogLayout.scss +++ b/src/views/catalog/views/page/layout/CatalogLayout.scss @@ -1,4 +1,5 @@ @import './default/CatalogLayoutDefaultView'; +@import './pets/CatalogLayoutPetView'; @import './single-bundle/CatalogLayoutSingleBundleView'; @import './spaces-new/CatalogLayoutSpacesView'; @import './trophies/CatalogLayoutTrophiesView'; diff --git a/src/views/catalog/views/page/layout/GetCatalogLayout.tsx b/src/views/catalog/views/page/layout/GetCatalogLayout.tsx index d13a396d..934a5206 100644 --- a/src/views/catalog/views/page/layout/GetCatalogLayout.tsx +++ b/src/views/catalog/views/page/layout/GetCatalogLayout.tsx @@ -1,5 +1,6 @@ import { ICatalogPageParser, RoomPreviewer } from 'nitro-renderer'; import { CatalogLayoutDefaultView } from './default/CatalogLayoutDefaultView'; +import { CatalogLayoutPetView } from './pets/CatalogLayoutPetView'; import { CatalogLayoutSingleBundleView } from './single-bundle/CatalogLayoutSingleBundleView'; import { CatalogLayoutSpacesView } from './spaces-new/CatalogLayoutSpacesView'; import { CatalogLayoutTrophiesView } from './trophies/CatalogLayoutTrophiesView'; @@ -13,7 +14,7 @@ export function GetCatalogLayout(pageParser: ICatalogPageParser, roomPreviewer: case 'frontpage4': return null; case 'pets': - return null; + return ; case 'pets2': return null; case 'pets3': diff --git a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.scss b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.scss new file mode 100644 index 00000000..268769fb --- /dev/null +++ b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.scss @@ -0,0 +1,10 @@ +.nitro-catalog-layout-pets { + + .color-button { + position: absolute; + left: 5px; + bottom: 5px; + } + + @import './name-approval/CatalogPetNameApprovalView'; +} diff --git a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx new file mode 100644 index 00000000..5d2c0c51 --- /dev/null +++ b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx @@ -0,0 +1,150 @@ +import { CatalogRequestPetBreedsComposer, ColorConverter, SellablePetPaletteData } from 'nitro-renderer'; +import { FC, useEffect, useMemo, useState } from 'react'; +import { GetProductDataForLocalization } from '../../../../../../api/nitro/session/GetProductDataForLocalization'; +import { SendMessageHook } from '../../../../../../hooks/messages/message-event'; +import { LocalizeText } from '../../../../../../utils/LocalizeText'; +import { PetImageView } from '../../../../../pet-image/PetImageView'; +import { RoomPreviewerView } from '../../../../../room-previewer/RoomPreviewerView'; +import { useCatalogContext } from '../../../../context/CatalogContext'; +import { CatalogActions } from '../../../../reducers/CatalogReducer'; +import { GetPetAvailableColors, GetPetIndexFromLocalization } from '../../../../utils/CatalogUtilities'; +import { CatalogLayoutPetViewProps } from './CatalogLayoutPetView.types'; +import { CatalogLayoutPetPurchaseView } from './purchase/CatalogLayoutPetPurchaseView'; + +export const CatalogLayoutPetView: FC = props => +{ + const { roomPreviewer = null, pageParser = null } = props; + const { catalogState = null, dispatchCatalogState = null } = useCatalogContext(); + const { activeOffer = null, petPalettes = [] } = catalogState; + const [ petIndex, setPetIndex ] = useState(-1); + const [ sellablePalettes, setSellablePalettes ] = useState([]); + const [ selectedPaletteIndex, setSelectedPaletteIndex ] = useState(-1); + const [ sellableColors, setSellableColors ] = useState([]); + const [ selectedColorIndex, setSelectedColorIndex ] = useState(-1); + const [ colorsShowing, setColorsShowing ] = useState(false); + + useEffect(() => + { + if(!pageParser || !pageParser.offers.length) return; + + const offer = pageParser.offers[0]; + + dispatchCatalogState({ + type: CatalogActions.SET_CATALOG_ACTIVE_OFFER, + payload: { + activeOffer: offer + } + }); + + setPetIndex(GetPetIndexFromLocalization(offer.localizationId)); + setColorsShowing(false); + }, [ pageParser, dispatchCatalogState ]); + + useEffect(() => + { + if(!activeOffer) return; + + const productData = GetProductDataForLocalization(activeOffer.localizationId); + + if(!productData) return; + + for(const paletteData of petPalettes) + { + if(paletteData.breed !== productData.type) continue; + + const palettes: SellablePetPaletteData[] = []; + + for(const palette of paletteData.palettes) + { + if(!palette.sellable) continue; + + palettes.push(palette); + } + + setSelectedPaletteIndex((palettes.length ? 0 : -1)); + setSellablePalettes(palettes); + + return; + } + + setSelectedPaletteIndex(-1); + setSellablePalettes([]); + + SendMessageHook(new CatalogRequestPetBreedsComposer(productData.type)); + }, [ activeOffer, petPalettes ]); + + useEffect(() => + { + if(petIndex === -1) return; + + const colors = GetPetAvailableColors(petIndex, sellablePalettes); + + setSelectedColorIndex((colors.length ? 0 : -1)); + setSellableColors(colors); + }, [ petIndex, sellablePalettes ]); + + const getColor = useMemo(() => + { + if(!sellableColors.length || (selectedColorIndex === -1)) return 0xFFFFFF; + + return sellableColors[selectedColorIndex][0]; + }, [ sellableColors, selectedColorIndex ]); + + useEffect(() => + { + if(!roomPreviewer) return; + + roomPreviewer && roomPreviewer.reset(false); + + if((petIndex === -1) || !sellablePalettes.length || (selectedPaletteIndex === -1)) return; + + let petFigureString = `${ petIndex } ${ sellablePalettes[selectedPaletteIndex].paletteId }`; + + if(petIndex <= 7) petFigureString += ` ${ getColor.toString(16) }`; + + roomPreviewer.addPetIntoRoom(petFigureString); + }, [ roomPreviewer, petIndex, sellablePalettes, selectedPaletteIndex, getColor ]); + + const petBreedName = useMemo(() => + { + if((petIndex === -1) || !sellablePalettes.length || (selectedPaletteIndex === -1)) return ''; + + return LocalizeText(`pet.breed.${ petIndex }.${ sellablePalettes[selectedPaletteIndex].breedId }`); + }, [ petIndex, sellablePalettes, selectedPaletteIndex ]); + + if(!activeOffer) return null; + + return ( +
+
+
+ { colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) => + { + return
+
setSelectedColorIndex(index) }> +
+
; + })} + { !colorsShowing && (sellablePalettes.length > 0) && sellablePalettes.map((palette, index) => + { + return
+
setSelectedPaletteIndex(index) }> + +
+
; + }) } +
+
+
+ + { (petIndex > -1 && petIndex <= 7) && + } + +
{ petBreedName }
+ +
+
+ ); +} diff --git a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.types.ts b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.types.ts new file mode 100644 index 00000000..8a967b49 --- /dev/null +++ b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.types.ts @@ -0,0 +1,6 @@ +import { CatalogLayoutProps } from '../CatalogLayout.types'; + +export interface CatalogLayoutPetViewProps extends CatalogLayoutProps +{ + +} diff --git a/src/views/catalog/views/page/layout/pets/name-approval/CatalogPetNameApprovalView.scss b/src/views/catalog/views/page/layout/pets/name-approval/CatalogPetNameApprovalView.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/views/catalog/views/page/layout/pets/name-approval/CatalogPetNameApprovalView.tsx b/src/views/catalog/views/page/layout/pets/name-approval/CatalogPetNameApprovalView.tsx new file mode 100644 index 00000000..bc2cda44 --- /dev/null +++ b/src/views/catalog/views/page/layout/pets/name-approval/CatalogPetNameApprovalView.tsx @@ -0,0 +1,12 @@ +import { FC } from 'react'; +import { LocalizeText } from '../../../../../../../utils/LocalizeText'; +import { CatalogPetNameApprovalViewProps } from './CatalogPetNameApprovalView.types'; + +export const CatalogPetNameApprovalView: FC = props => +{ + const { petNameValue = null, setPetNameValue = null } = props; + + return ( + setPetNameValue(event.target.value) } /> + ); +} diff --git a/src/views/catalog/views/page/layout/pets/name-approval/CatalogPetNameApprovalView.types.ts b/src/views/catalog/views/page/layout/pets/name-approval/CatalogPetNameApprovalView.types.ts new file mode 100644 index 00000000..b946d758 --- /dev/null +++ b/src/views/catalog/views/page/layout/pets/name-approval/CatalogPetNameApprovalView.types.ts @@ -0,0 +1,7 @@ +import { Dispatch, SetStateAction } from 'react'; + +export interface CatalogPetNameApprovalViewProps +{ + petNameValue: string; + setPetNameValue: Dispatch>; +} diff --git a/src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.tsx b/src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.tsx new file mode 100644 index 00000000..b455a61c --- /dev/null +++ b/src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.tsx @@ -0,0 +1,44 @@ +import { FC, useState } from 'react'; +import { CurrencyIcon } from '../../../../../../../utils/currency-icon/CurrencyIcon'; +import { LocalizeText } from '../../../../../../../utils/LocalizeText'; +import { CatalogPurchaseButtonView } from '../../../purchase/purchase-button/CatalogPurchaseButtonView'; +import { CatalogPetNameApprovalView } from '../name-approval/CatalogPetNameApprovalView'; +import { CatalogLayoutPetPurchaseViewProps } from './CatalogLayoutPetPurchaseView.types'; + +export const CatalogLayoutPetPurchaseView: FC = props => +{ + const { offer = null, pageId = -1, extra = '' } = props; + const [ petNameValue, setPetNameValue ] = useState(''); + + const extraData = ((extra && extra.length) ? extra : (offer?.products[0]?.extraParam || null)); + + return ( + <> +
+ +
+
+
+
+ { LocalizeText('catalog.bundlewidget.price') } +
+
+ { (offer.priceCredits > 0) && +
+ { offer.priceCredits } + +
} + { (offer.priceActivityPoints > 0) && +
+ { offer.priceActivityPoints } + +
} +
+
+
+ +
+
+ + ); +} diff --git a/src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.types.ts b/src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.types.ts new file mode 100644 index 00000000..748bd017 --- /dev/null +++ b/src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.types.ts @@ -0,0 +1,8 @@ +import { CatalogPageOfferData } from 'nitro-renderer'; + +export interface CatalogLayoutPetPurchaseViewProps +{ + offer: CatalogPageOfferData; + pageId: number; + extra?: string; +} diff --git a/src/views/catalog/views/page/offer/CatalogPageOfferView.scss b/src/views/catalog/views/page/offer/CatalogPageOfferView.scss index 72c757c7..7008f0e2 100644 --- a/src/views/catalog/views/page/offer/CatalogPageOfferView.scss +++ b/src/views/catalog/views/page/offer/CatalogPageOfferView.scss @@ -6,14 +6,14 @@ width: 100%; height: 100%; border-color: $grid-border-color !important; - background-color: $grid-bg-color !important; + background-color: $grid-bg-color; background-position: center; background-repeat: no-repeat; overflow: hidden; &.active { border-color: $grid-active-border-color !important; - background-color: $grid-active-bg-color !important; + background-color: $grid-active-bg-color; } .badge { diff --git a/src/views/catalog/views/search/CatalogSearchView.tsx b/src/views/catalog/views/search/CatalogSearchView.tsx index 67ae21a1..bcd44a40 100644 --- a/src/views/catalog/views/search/CatalogSearchView.tsx +++ b/src/views/catalog/views/search/CatalogSearchView.tsx @@ -113,7 +113,7 @@ export const CatalogSearchView: FC = props => return (
- setSearchValue(event.target.value) } /> + setSearchValue(event.target.value) } />