Skip to content

Commit ae61bb4

Browse files
KneesalKneesal
committed
Merge branch 'feature/25-00-NC-feat-church-invites' of https://github.com/JesusFilm/core into feature/25-00-NC-feat-church-invites
2 parents c56e9ec + d07fbe3 commit ae61bb4

File tree

20 files changed

+222
-46
lines changed

20 files changed

+222
-46
lines changed

‎apps/journeys-admin/__generated__/BlockActionEmailUpdate.ts‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/journeys-admin/__generated__/BlockActionLinkUpdate.ts‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/journeys-admin/src/components/Editor/Slider/Settings/CanvasDetails/Properties/controls/Action/Action.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { EmailAction } from './EmailAction'
2121
import { LinkAction } from './LinkAction'
2222
import { NavigateToBlockAction } from './NavigateToBlockAction'
2323
import { ActionValue, actions } from './utils/actions'
24+
import { CustomizationToggle } from './CustomizationToggle'
2425

2526
export function Action(): ReactElement {
2627
const {
@@ -77,6 +78,9 @@ export function Action(): ReactElement {
7778
setAction(event.target.value as ActionValue)
7879
}
7980

81+
const isLink = !isSubmitButton && action === 'LinkAction'
82+
const isEmail = !isSubmitButton && action === 'EmailAction'
83+
8084
return (
8185
<>
8286
<Stack sx={{ p: 4, pt: 0 }} data-testid="Action">
@@ -102,9 +106,10 @@ export function Action(): ReactElement {
102106
})}
103107
</Select>
104108
</FormControl>
105-
{!isSubmitButton && action === 'LinkAction' && <LinkAction />}
106-
{!isSubmitButton && action === 'EmailAction' && <EmailAction />}
109+
{isLink && <LinkAction />}
110+
{isEmail && <EmailAction />}
107111
{action === 'NavigateToBlockAction' && <NavigateToBlockAction />}
112+
{(isLink || isEmail) && <CustomizationToggle />}
108113
</Stack>
109114
</>
110115
)

‎apps/journeys-admin/src/components/Editor/Slider/Settings/CanvasDetails/Properties/controls/Action/CustomizationToggle/CustomizationToggle.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { ReactElement } from 'react'
2+
import Typography from '@mui/material/Typography'
3+
import Stack from '@mui/material/Stack'
4+
import Switch from '@mui/material/Switch'
5+
import { useTranslation } from 'next-i18next'
6+
import { useEditor } from '@core/journeys/ui/EditorProvider'
7+
import { isActionBlock } from '@core/journeys/ui/isActionBlock'
8+
import { useActionCommand } from '../../../../../../../utils/useActionCommand'
9+
10+
export function CustomizationToggle(): ReactElement {
11+
const { t } = useTranslation('apps-journeys-admin')
12+
const { addAction } = useActionCommand()
13+
const {
14+
state: { selectedBlock: stateSelectedBlock, selectedStep }
15+
} = useEditor()
16+
const actionBlock = isActionBlock(stateSelectedBlock)
17+
? stateSelectedBlock
18+
: undefined
19+
let customizable = false
20+
if (actionBlock?.action?.__typename === 'LinkAction') {
21+
customizable = actionBlock?.action?.customizable ?? false
22+
}
23+
if (actionBlock?.action?.__typename === 'EmailAction') {
24+
customizable = actionBlock?.action?.customizable ?? false
25+
}
26+
27+
function handleChange(event: React.ChangeEvent<HTMLInputElement>): void {
28+
if (actionBlock == null || selectedStep == null) return
29+
30+
const newCustomizable = event.target.checked
31+
const { id, __typename: blockTypename, action } = actionBlock
32+
33+
if (action?.__typename === 'LinkAction') {
34+
addAction({
35+
blockId: id,
36+
blockTypename,
37+
action: {
38+
__typename: 'LinkAction',
39+
parentBlockId: id,
40+
gtmEventName: '',
41+
url: action.url,
42+
customizable: newCustomizable,
43+
parentStepId: selectedStep.id
44+
},
45+
undoAction: action,
46+
editorFocus: {
47+
selectedStep,
48+
selectedBlock: actionBlock
49+
}
50+
})
51+
return
52+
}
53+
54+
if (action?.__typename === 'EmailAction') {
55+
addAction({
56+
blockId: id,
57+
blockTypename,
58+
action: {
59+
__typename: 'EmailAction',
60+
parentBlockId: id,
61+
gtmEventName: '',
62+
email: action.email,
63+
customizable: newCustomizable,
64+
parentStepId: selectedStep.id
65+
},
66+
undoAction: action,
67+
editorFocus: {
68+
selectedStep,
69+
selectedBlock: actionBlock
70+
}
71+
})
72+
return
73+
}
74+
}
75+
76+
return (
77+
<>
78+
{actionBlock != null &&
79+
(actionBlock.action?.__typename === 'LinkAction' ||
80+
actionBlock.action?.__typename === 'EmailAction') && (
81+
<Stack
82+
direction="row"
83+
alignItems="center"
84+
justifyContent="space-between"
85+
width="100%"
86+
sx={{
87+
mt: 2
88+
}}
89+
>
90+
<Typography variant="body1">{t('Customize')}</Typography>
91+
<Switch
92+
checked={customizable}
93+
onChange={handleChange}
94+
inputProps={{ 'aria-label': t('Toggle customizable') }}
95+
/>
96+
</Stack>
97+
)}
98+
</>
99+
)
100+
}

‎apps/journeys-admin/src/components/Editor/Slider/Settings/CanvasDetails/Properties/controls/Action/CustomizationToggle/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { CustomizationToggle } from './CustomizationToggle'

‎apps/journeys-admin/src/components/Editor/Slider/Settings/CanvasDetails/Properties/controls/Action/EmailAction/EmailAction.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export function EmailAction(): ReactElement {
3434
})
3535

3636
function handleSubmit(email: string): void {
37-
if (selectedBlock == null) return
37+
if (selectedBlock == null || selectedStep == null) return
3838

3939
const { id, action, __typename: blockTypename } = selectedBlock
4040
addAction({
@@ -45,8 +45,8 @@ export function EmailAction(): ReactElement {
4545
parentBlockId: id,
4646
gtmEventName: '',
4747
email,
48-
customizable: false,
49-
parentStepId: null
48+
customizable: emailAction?.customizable ?? false,
49+
parentStepId: selectedStep.id
5050
},
5151
undoAction: action,
5252
editorFocus: {

‎apps/journeys-admin/src/components/Editor/Slider/Settings/CanvasDetails/Properties/controls/Action/LinkAction/LinkAction.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export function LinkAction(): ReactElement {
4848
})
4949

5050
function handleSubmit(src: string): void {
51-
if (selectedBlock == null) return
51+
if (selectedBlock == null || selectedStep == null) return
5252

5353
// checks if url has a protocol
5454
const url = /^\w+:\/\//.test(src) ? src : `https://${src}`
@@ -61,8 +61,8 @@ export function LinkAction(): ReactElement {
6161
parentBlockId: id,
6262
gtmEventName: '',
6363
url,
64-
customizable: false,
65-
parentStepId: null
64+
customizable: linkAction?.customizable ?? false,
65+
parentStepId: selectedStep.id
6666
},
6767
undoAction: action,
6868
editorFocus: {

‎apps/journeys-admin/src/components/Editor/utils/useActionCommand/useActionCommand.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,20 @@ export function useActionCommand(): {
7373
})
7474
switch (action?.__typename) {
7575
case 'LinkAction':
76-
void actionLinkUpdate(block, action.url)
76+
void actionLinkUpdate(
77+
block,
78+
action.url,
79+
action.customizable,
80+
action.parentStepId
81+
)
7782
break
7883
case 'EmailAction':
79-
void actionEmailUpdate(block, action.email)
84+
void actionEmailUpdate(
85+
block,
86+
action.email,
87+
action.customizable,
88+
action.parentStepId
89+
)
8090
break
8191
case 'NavigateToBlockAction':
8292
void actionNavigateToBlockUpdate(block, action.blockId)

‎apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export function MultiStepForm(): ReactElement {
7272
totalSteps={screens.length}
7373
/>
7474

75-
<Box sx={{ alignSelf: 'center' }}>
75+
<Box sx={{ alignSelf: 'center', width: '100%' }}>
7676
{renderScreen(activeScreen, handleNext)}
7777
</Box>
7878

‎apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/CardsPreview/CardsPreview.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ const CONTAINER_HEIGHT = Math.round(FRAME_HEIGHT * IFRAME_SCALE)
5353

5454
// Spacing and offsets
5555
const CARD_MARGIN_RIGHT = 7
56+
const EDGE_FADE_PX = 16
5657

5758
function CardsPreviewItem({ step }: CardsPreviewItemProps): ReactElement {
5859
const { journey } = useJourney()
@@ -159,12 +160,16 @@ export function CardsPreview({ steps }: CardsPreviewProps): ReactElement {
159160
watchOverflow
160161
slidesPerView="auto"
161162
spaceBetween={12}
163+
slidesOffsetBefore={EDGE_FADE_PX}
162164
observer
163165
observeParents
164166
sx={{
165-
overflow: 'visible',
167+
overflow: 'hidden',
166168
zIndex: 2,
167-
height: CONTAINER_HEIGHT
169+
height: CONTAINER_HEIGHT + 15,
170+
width: '100%',
171+
maskImage: `linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) ${EDGE_FADE_PX}px, rgba(0,0,0,1) calc(100% - ${EDGE_FADE_PX}px), rgba(0,0,0,0) 100%)`,
172+
WebkitMaskImage: `linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) ${EDGE_FADE_PX}px, rgba(0,0,0,1) calc(100% - ${EDGE_FADE_PX}px), rgba(0,0,0,0) 100%)`
168173
}}
169174
>
170175
{slidesToRender.map((step) => (
@@ -228,8 +233,8 @@ export function CardsPreview({ steps }: CardsPreviewProps): ReactElement {
228233
<Box
229234
sx={{
230235
position: 'absolute',
231-
bottom: { xs: -10, sm: -10 },
232-
left: 30,
236+
left: 21,
237+
top: 11,
233238
zIndex: -2,
234239
minWidth: CONTAINER_WIDTH,
235240
mr: CARD_MARGIN_RIGHT,

0 commit comments

Comments
 (0)