Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: update steps 2 and 3 to new comp
- Loading branch information
1 parent
815c0dc
commit f500325
Showing
4 changed files
with
80 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
47 changes: 47 additions & 0 deletions
47
...b/_patterns/02-components/micro-journeys/billing-micro-journey-fragments/_step-three.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
<bolt-interactive-step | ||
step="3" | ||
slot="steps" | ||
> | ||
<span slot="title">Smart offers</span> | ||
|
||
<bolt-animate slot="top" in="fade-in-slide-up" in-order="1" out="fade-out-slide-down" out-order="2"> | ||
<bolt-two-character-layout> | ||
<bolt-animate slot="character--left" in-order="1" in="fade-in-slide-up" out="fade-out" out-order="10"> | ||
<bolt-character size="medium" character-url="https://github.com/basaltinc/temp-pega-dummy-assets/raw/master/u-comm-plus.png"> | ||
<bolt-animate in="fade-in-slide-up" in-order="2" out="fade-out" slot="top" out-order="5"> | ||
<bolt-status-dialogue-bar> | ||
<bolt-text slot="text" align="start" font-size="xsmall"> | ||
Customer is 79% likely to call<br>about their bill. | ||
</bolt-text> | ||
</bolt-status-dialogue-bar> | ||
</bolt-animate> | ||
<span slot="left"></span> | ||
<span slot="bottom"><bolt-text font-size="xsmall">Company</bolt-text></span> | ||
</bolt-character> | ||
</bolt-animate> | ||
<bolt-animate slot="connection" in="fade-in-slide-up" in-order="5" out="fade-out" out-order="1"> | ||
<bolt-connection></bolt-connection> | ||
</bolt-animate> | ||
<bolt-animate slot="character--right" in="fade-in-slide-up" in-order="10" out="fade-out" out-order="10"> | ||
<bolt-character size="medium"> | ||
<bolt-animate in="fade-in-slide-up" in-order="15" out="fade-out" slot="top" out-order="5"> | ||
<bolt-status-dialogue-bar icon-name="email"> | ||
<bolt-text slot="text" align="start" font-size="xsmall"> | ||
Offer to waive late fee. | ||
</bolt-text> | ||
</bolt-status-dialogue-bar> | ||
</bolt-animate> | ||
<span slot="right" idle="none"></span> | ||
<span slot="bottom" idle="none"><bolt-text font-size="xsmall">Customer</bolt-text></span> | ||
</bolt-character> | ||
</bolt-animate> | ||
</bolt-two-character-layout> | ||
</bolt-animate> | ||
|
||
<bolt-animate slot="bottom" in="fade-in-slide-up" in-order="2" out-order="1" out="fade-out-slide-down"> | ||
<bolt-text> | ||
Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. | ||
</bolt-text> | ||
</bolt-animate> | ||
</bolt-interactive-step> | ||
|
29 changes: 29 additions & 0 deletions
29
...lab/_patterns/02-components/micro-journeys/billing-micro-journey-fragments/_step-two.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
<bolt-interactive-step | ||
step="2" | ||
slot="steps" | ||
> | ||
<span slot="title">Customer-facing insights</span> | ||
|
||
<bolt-animate slot="top" in="fade-in-slide-up" in-order="1" out="fade-out-slide-down" out-order="2"> | ||
<bolt-one-character-layout> | ||
<bolt-character size="medium" character-url="https://github.com/basaltinc/temp-pega-dummy-assets/raw/master/u-comm-plus.png" class=""> | ||
<bolt-animate in="fade-in-slide-up" in-order="15" out="fade-out" slot="top" out-order="5"> | ||
<bolt-status-dialogue-bar icon-name="mobility" dialogue-arrow-direction="down"> | ||
<bolt-text slot="text" align="start" font-size="xsmall"> | ||
Why is my bill so high? Let me check. | ||
</bolt-text> | ||
</bolt-status-dialogue-bar> | ||
</bolt-animate> | ||
<span slot="left"></span> | ||
<span slot="right"></span> | ||
<span slot="bottom"><bolt-text font-size="xsmall">Customer billing view</bolt-text></span> | ||
</bolt-character> | ||
</bolt-one-character-layout> | ||
</bolt-animate> | ||
|
||
<bolt-animate slot="bottom" in="fade-in-slide-up" in-order="2" out-order="1" out="fade-out-slide-down"> | ||
<bolt-text> | ||
If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view. | ||
</bolt-text> | ||
</bolt-animate> | ||
</bolt-interactive-step> |