on master help sign in
Handle incomplete initial code
443a400Will Galebach
src/views/Activate/ActivateCode.tsx+8−3
@@ -1,4 +1,4 @@
1−import { useCallback } from 'react';
1+import { useCallback, useMemo } from 'react';
2
2
3import View from 'components/View';
3import View from 'components/View';
4import ActivateView from './ActivateView';
4import ActivateView from './ActivateView';
@@ -30,14 +30,19 @@ export default function ActivateCode() {
30 // Fade in on load
30 // Fade in on load
31 useFadeIn();
31 useFadeIn();
32
32
33+ const hasInitialValues = useMemo(() => impliedTicket && impliedPatp, [
34+ impliedTicket,
35+ impliedPatp,
36+ ]);
37+
33 return (
38 return (
34 <View inset>
39 <View inset>
35 <ActivateView
40 <ActivateView
36− hideBack={Boolean(impliedTicket)}
41+ hideBack={hasInitialValues}
37 header={<ActivateHeader content={'Planet Code'} />}
42 header={<ActivateHeader content={'Planet Code'} />}
38 footer={<ActivateCodeForm afterSubmit={goToMasterKey} />}>
43 footer={<ActivateCodeForm afterSubmit={goToMasterKey} />}>
39 <Box className="flex-col align-center justify-center w-full h-full">
44 <Box className="flex-col align-center justify-center w-full h-full">
40− {!impliedTicket && (
45+ {!hasInitialValues && (
41 <Box className="mb2 sans gray5" fontSize={14}>
46 <Box className="mb2 sans gray5" fontSize={14}>
42 Enter your planet code below
47 Enter your planet code below
43 </Box>
48 </Box>
src/views/Activate/ActivateCodeForm.tsx+13−5
@@ -80,6 +80,11 @@ const ActivateCodeForm = ({ afterSubmit }: ActivateCodeFormProps) => {
80 [validateForm]
80 [validateForm]
81 );
81 );
82
82
83+ const hasInitialValues = useMemo(() => impliedTicket && impliedPatp, [
84+ impliedTicket,
85+ impliedPatp,
86+ ]);
87+
83 const getTicketAndPoint = useCallback(
88 const getTicketAndPoint = useCallback(
84 (invite: string) => {
89 (invite: string) => {
85 const segments = invite.split('-');
90 const segments = invite.split('-');
@@ -174,12 +179,15 @@ const ActivateCodeForm = ({ afterSubmit }: ActivateCodeFormProps) => {
174 );
179 );
175
180
176 const initialValues = useMemo(
181 const initialValues = useMemo(
182+ () => ({
183+ ticket: hasInitialValues
184+ ? `${impliedTicket}-${impliedPatp?.slice(1)}`
185+ : '',
177− () => ({ ticket: impliedTicket || '', showTicket: true }),
186+ showTicket: true,
187+ }),
178− [impliedTicket]
188+ [impliedTicket, impliedPatp, hasInitialValues]
179 );
189 );
180
190
181− const hasInitialValues = impliedTicket && impliedPatp;
182−
183 return (
191 return (
184 <Box
192 <Box
185 className="w-full h-full flex-col"
193 className="w-full h-full flex-col"
@@ -192,7 +200,7 @@ const ActivateCodeForm = ({ afterSubmit }: ActivateCodeFormProps) => {
192 initialValues={initialValues}>
200 initialValues={initialValues}>
193 {({ valid, validating, values, submitting, handleSubmit }) => (
201 {({ valid, validating, values, submitting, handleSubmit }) => (
194 <>
202 <>
195− {!impliedTicket && (
203+ {!hasInitialValues && (
196 <Grid.Item
204 <Grid.Item
197 full
205 full
198 className="mb2"
206 className="mb2"