rama/halobestie-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 5.x payment catalog + customer-app splash/register polish

Browse Source 
Payment catalog (Phase 5.x — see requirement/phase5-payment-catalog-plan.md):
- New tables payment_method_groups + payment_methods with seed (3 groups,
  10 methods; GoPay seeded inactive pending Xendit channel confirmation).
- payment-catalog.service.js with two-layer cache (60s in-process + 1h
  Valkey) and config:invalidate pub/sub fanout. Mutator API + casing-
  tolerant findActiveMethodByCode for downstream validation.
- App-facing GET /api/client/payment-methods returns pre-grouped JSON,
  active-only, empty groups dropped server-side.
- POST /api/client/payment-requests now validates `method` against the
  catalog (INVALID_PAYMENT_METHOD 422) and stamps
  product_metadata.preferred_payment_code (upper-cased).
- Control-center /internal/payment-{groups,methods}{,/:id,/reorder}
  endpoints (full CRUD + idempotent reorder). New Payment Catalog page
  wired into the CC nav.
- Customer app renders the catalog as collapsible groups (first expanded)
  via paymentCatalogProvider; QRIS-only hardcoded fallback on 5xx so
  checkout never hard-fails. Replaces the hardcoded _PayMethod enum.
- 10 brand SVGs (~63KB) bundled in client_app/assets/payment_icons/ from
  github.com/hafidznoor/idn-finlogos. Xendit's per-channel media-asset
  pages were planned but found decommissioned during implementation —
  switched to idn-finlogos with the standard "channels-we-accept"
  trademark posture. See assets/payment_icons/README.md for the workflow
  to add new methods.
- 16 vitest cases covering the service + cache; full backend suite green
  (162/162).

Customer-app splash + register polish:
- Splash rewritten per figma S1: warm vertical gradient, two ImageFiltered
  radial orbs, 96×96 rounded-square logo tile, "HaloBestie" + "kamu gak
  harus ngerasain ini sendirian." Self-driving navigation via context.go
  after a 2.5s post-frame timer (native Android splash burns ~1-1.5s
  before Flutter paints — 1s timer yielded near-zero visible duration).
  Router early-returns null for isSplash so it never moves us off /splash
  on its own.
- 3-page onboarding carousel removed: user clarified the new splash
  REPLACES that carousel. Dropped /onboarding route, OnboardingScreen,
  onboardingDoneProvider + gating, dead splash_{1,2,3}.png + the
  splash_chat_hebat.png Flutter asset. Phase 4 /onboarding/* subroutes
  untouched; Android-native launch_background drawable left alone.
- Register screen (login-by-phone) polished: circular pink back button +
  72×72 logo badge (same brandLogoBg pink as splash, Transform.scale 1.4
  to fill the tile). Step-dots indicator removed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ramadhan Sjamsani
2026-05-26 23:06:46 +08:00
parent d60c048776
commit 1f6d8e09ae
39 changed files with 2634 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
client_app/assets/images/splash/splash_1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 400 KiB

BIN
client_app/assets/images/splash/splash_2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 389 KiB

BIN
client_app/assets/images/splash/splash_3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 362 KiB

BIN
client_app/assets/images/splash_chat_hebat.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 295 KiB

31
client_app/assets/payment_icons/NOTICE_IDN_FINLOGOS.txt Normal file
View File

@@ -0,0 +1,31 @@
Logo Assets License — Creative Commons Attribution-NonCommercial 4.0 International
(CC BY-NC 4.0)
This license applies to all SVG logo assets in `icons/` and `dist/icons/`.
Copyright (c) 2026 Hafidz Noor Fauzi (collection/curation only).
The underlying logo marks remain the property of their respective trademark
holders. See NOTICE for details on trademark ownership and disclaimers.
You are free to:
- Share — copy and redistribute the material in any medium or format.
- Adapt — remix, transform, and build upon the material.
Under the following terms:
- Attribution — You must give appropriate credit, provide a link to this
license, and indicate if changes were made. You may do so in any
reasonable manner, but not in any way that suggests the licensor
endorses you or your use.
- NonCommercial — You may not use the material for commercial purposes.
No additional restrictions — You may not apply legal terms or technological
measures that legally restrict others from doing anything the license permits.
Full license text:
https://creativecommons.org/licenses/by-nc/4.0/legalcode
Human-readable summary:
https://creativecommons.org/licenses/by-nc/4.0/
THE LOGO ASSETS ARE PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND.

79
client_app/assets/payment_icons/README.md Normal file
View File

@@ -0,0 +1,79 @@
# Payment method icons
Bundled SVGs referenced by the payment catalog (`payment_methods.icon` slug
in the backend). The customer app's `PaymentIcon` widget resolves
`<slug>.svg` from this directory and falls back to `placeholder.svg` when the
file isn't bundled — see `client_app/lib/features/payment/widgets/payment_icon.dart`.
## Naming convention
One SVG per slug, lower-case, hyphens not underscores. Currently bundled
slugs (match the migrate.js seed):
| Slug | Method | Source filename in `idn-finlogos/icons/` |
|---|---|---|
| `qris` | QRIS | `qris.svg` |
| `ovo` | OVO | `ovo-new.svg` |
| `dana` | DANA | `dana.svg` |
| `shopeepay` | ShopeePay | `shopee-pay.svg` |
| `gopay` | GoPay (seeded inactive) | `gopay.svg` |
| `bca` | BCA Virtual Account | `bca.svg` |
| `mandiri` | Mandiri Virtual Account | `mandiri.svg` |
| `bni` | BNI Virtual Account | `bni.svg` |
| `bri` | BRI Virtual Account | `bri.svg` |
| `permata` | Permata Virtual Account | `permata.svg` |
## Sourcing — idn-finlogos
We pull individual SVGs from
[github.com/hafidznoor/idn-finlogos](https://github.com/hafidznoor/idn-finlogos)
rather than installing the Flutter package (`idn_finlogos` on pub.dev). The
package bundles all 572 SVGs as Flutter assets — Flutter doesn't tree-shake
assets, so adding the package ships ~4-6 MB of marks we never use. Manual
copy keeps the APK lean: 10 marks ≈ 80 KB on-disk.
See `NOTICE_IDN_FINLOGOS.txt` for the upstream licensing terms (MIT for build
tooling, CC BY-NC 4.0 for the SVG assets, plus the project's note that
individual brand marks require permission from each brand holder for
commercial use).
## Adding a new method
1. **Catalog row** (control center → Payment Catalog):
- Add a method with `payment_code` set to the Xendit channel code
(uppercase, e.g. `LINKAJA`) and `icon` set to the desired slug
(lowercase, e.g. `linkaja`).
- Method renders immediately with the generic placeholder icon.
2. **Branded SVG** (one-time, requires an app release):
```sh
cd client_app/assets/payment_icons
curl -sS https://raw.githubusercontent.com/hafidznoor/idn-finlogos/main/icons/<source>.svg -o <slug>.svg
```
(Browse the repo's `icons/` directory if the source filename isn't an
exact match — e.g. `ovo-new.svg` for the modern OVO mark.)
3. **Append the slug** to `_kBundledSlugs` in
`client_app/lib/features/payment/widgets/payment_icon.dart` so the widget
stops falling back to the placeholder for that slug.
4. **Cut a release.** Assets ship with the APK; new icons need a binary update.
## Why the explicit `_kBundledSlugs` list?
Flutter's asset system throws if a referenced asset is missing — there's no
"file exists?" check at runtime without round-tripping the AssetManifest.
Keeping the bundled-slugs list in code makes "what we ship" explicit and
keeps the icon widget cheap.
## When to migrate to the pub package
The manual-copy approach beats `idn_finlogos` as long as we bundle fewer
than ~50 icons (where the ~4-6 MB whole-library payload starts looking
reasonable compared to per-file curl-and-commit overhead). If we cross that
threshold, switch:
```yaml
dependencies:
idn_finlogos: ^2.3.0
```
…and delete this directory's per-icon SVGs (keep `placeholder.svg` + the
slug allowlist).

25
client_app/assets/payment_icons/bca.svg Normal file
View File

@@ -0,0 +1,25 @@
<svg width="80" height="26" viewBox="0 0 80 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3802_10653)">
<path d="M11.7878 19.0307C11.7878 18.0314 11.7986 15.3604 11.774 15.0313C11.7955 11.0568 8.90568 8.25311 7.08002 8.47168C5.81674 8.58131 4.75801 9.09642 4.18954 10.5783C3.66266 11.9593 4.13371 13.7963 5.88545 14.2273C7.75857 14.6902 8.85233 15.0754 9.64389 15.6188C10.6138 16.284 11.4056 17.5549 11.4266 19.0323" fill="#0060AF"/>
<path d="M12.5354 25.0722C9.23268 25.0722 5.83838 24.2588 2.44859 22.6499L2.36541 22.609L2.32563 22.5242C0.804445 19.3132 0 15.8011 0 12.365C0 8.9341 0.771444 5.57233 2.29376 2.36564L2.33558 2.28042L2.42034 2.23793C5.55606 0.752457 8.92935 0 12.4496 0C15.7288 0 19.2309 0.83767 22.5757 2.42667L22.6616 2.46487L22.7012 2.55166C24.2515 5.82187 25.0691 9.33304 25.0691 12.7122C25.0691 16.0783 24.2841 19.443 22.7319 22.7111L22.691 22.797L22.6047 22.8368C19.5169 24.2985 16.0346 25.0722 12.5354 25.0722ZM2.76232 22.2096C6.05537 23.7586 9.33959 24.5409 12.5354 24.5409C15.9241 24.5409 19.2942 23.8001 22.2941 22.396C23.7843 19.2291 24.5397 15.9698 24.5397 12.7122C24.5397 9.44153 23.7513 6.03932 22.26 2.86539C19.0139 1.33946 15.6239 0.530268 12.4496 0.530268C9.04146 0.530268 5.77486 1.25311 2.73384 2.67914C1.27414 5.78729 0.531174 9.04417 0.531174 12.365C0.531174 15.6922 1.30329 19.0958 2.76232 22.2096Z" fill="#0060AF"/>
<path d="M11.005 19.0323C11.0111 17.7514 10.2962 16.6187 9.36175 16.01C8.5329 15.4721 7.42015 15.1186 5.62501 14.6633C5.0701 14.5214 4.48966 14.2061 4.30996 13.8042C3.83462 14.2832 3.74827 15.36 3.83191 15.9892C3.9291 16.7175 4.78011 17.9177 6.06147 17.9648C6.84399 17.9962 7.83333 17.7963 8.30777 17.6956C9.12623 17.5188 10.4212 18.0314 10.6273 19.0307" fill="#0060AF"/>
<path d="M12.4496 2.2773C10.277 2.2773 8.40022 3.71011 8.407 6.18944C8.41378 8.27435 10.0905 9.39049 10.6888 10.1877C11.5929 11.389 12.0823 12.811 12.1331 14.9868C12.1727 16.7184 12.1706 18.4283 12.1795 19.0343H12.6591C12.6507 18.4003 12.629 16.5851 12.6539 14.9332C12.6864 12.7568 13.1934 11.389 14.098 10.1877C14.7015 9.39049 16.3768 8.27435 16.3805 6.18944C16.3886 3.71011 14.513 2.2773 12.3422 2.2773" fill="#0060AF"/>
<path d="M13.0012 19.0307C13.0012 18.0314 12.9899 15.3604 13.0141 15.0313C12.9928 11.0568 15.8808 8.25311 17.708 8.47168C18.9713 8.58131 20.0289 9.09642 20.599 10.5783C21.1254 11.9593 20.6516 13.7963 18.9019 14.2273C17.0279 14.6902 15.9355 15.0754 15.1419 15.6188C14.1731 16.284 13.4367 17.5549 13.4141 19.0323" fill="#0060AF"/>
<path d="M13.7833 19.0323C13.7765 17.7514 14.4912 16.6187 15.4229 16.01C16.2551 15.4721 17.3692 15.1186 19.1628 14.6633C19.7188 14.5214 20.2986 14.2061 20.4751 13.8042C20.9527 14.2832 21.0388 15.36 20.9552 15.9892C20.856 16.7175 20.0072 17.9177 18.7281 17.9648C17.9458 17.9962 16.9513 17.7963 16.4789 17.6956C15.6636 17.5188 14.3651 18.0314 14.158 19.0307" fill="#0060AF"/>
<path d="M14.4536 23.1675L14.1755 21.1389L14.8466 21.0372C15.01 21.0148 15.2089 21.0433 15.2885 21.1457C15.3764 21.2526 15.4033 21.341 15.4203 21.4811C15.4456 21.6545 15.3954 21.855 15.2001 21.9549V21.961C15.4183 21.961 15.55 22.1176 15.5882 22.382C15.5939 22.4379 15.6104 22.5728 15.5939 22.6854C15.5496 22.9532 15.3898 23.0393 15.1201 23.0771L14.4536 23.1675ZM14.8855 22.8043C14.9651 22.7929 15.0458 22.7887 15.1088 22.7485C15.2053 22.6854 15.1965 22.5505 15.1832 22.4503C15.1495 22.2302 15.0921 22.1465 14.8586 22.1811L14.7119 22.2037L14.8048 22.8156L14.8855 22.8043ZM14.7449 21.8669C14.8337 21.8525 14.9542 21.8418 15.0044 21.7575C15.0306 21.7013 15.0643 21.6565 15.0421 21.5313C15.0148 21.3828 14.9655 21.2908 14.777 21.3265L14.6014 21.3548L14.6705 21.8746" fill="#0060AF"/>
<path d="M17.3605 21.9474C17.3657 21.9852 17.3718 22.0272 17.3741 22.0649C17.4284 22.435 17.3605 22.7412 16.9446 22.8255C16.3298 22.944 16.2121 22.562 16.1038 22.0272L16.0462 21.7379C15.9614 21.2261 15.925 20.8387 16.5245 20.7194C16.8624 20.6577 17.0857 20.7922 17.1786 21.1285C17.193 21.1787 17.2111 21.2284 17.2179 21.2788L16.8502 21.3548C16.8077 21.2284 16.7514 21.0026 16.5859 21.0216C16.2889 21.0573 16.387 21.4269 16.4175 21.5812L16.5281 22.1366C16.5613 22.3045 16.6273 22.5728 16.8843 22.5211C17.0929 22.4793 17.0021 22.1542 16.9835 22.0211" fill="#0060AF"/>
<path d="M17.9507 22.5613L17.8235 20.4619L18.3176 20.3112L19.3535 22.1371L18.9645 22.2535L18.719 21.7894L18.2871 21.9192L18.3429 22.4467L17.9507 22.5613ZM18.2509 21.5801L18.5631 21.4897L18.1485 20.6403" fill="#0060AF"/>
<path d="M5.74674 20.9741C5.90135 20.4791 6.0399 20.1147 6.62984 20.2766C6.94561 20.3647 7.14135 20.504 7.13208 20.8708C7.13056 20.9524 7.1036 21.0356 7.08597 21.1163L6.71867 21.0148C6.76682 20.8123 6.79733 20.6516 6.54779 20.5747C6.25938 20.4956 6.18908 20.8453 6.1493 20.9963L5.9999 21.5467C5.95243 21.7101 5.89547 21.9802 6.1493 22.0498C6.35906 22.1063 6.48631 21.9004 6.56226 21.5998L6.30526 21.5317L6.39409 21.2133L6.99827 21.4076L6.71144 22.4684L6.43342 22.3929L6.49603 22.1687H6.48812C6.36018 22.352 6.204 22.3712 6.06725 22.345C5.46307 22.1816 5.52613 21.7867 5.67034 21.2591" fill="#0060AF"/>
<path d="M7.99557 21.8701L7.81362 22.7331L7.40405 22.6445L7.84052 20.6294L8.53873 20.7872C8.94739 20.8753 9.0708 21.0573 9.01294 21.4318C8.97994 21.6468 8.87393 21.8785 8.61512 21.8597L8.61241 21.8562C8.83121 21.9328 8.84974 22.0431 8.81155 22.2339C8.79505 22.315 8.68135 22.8076 8.75978 22.8871L8.7625 22.9475L8.33869 22.8369C8.32106 22.7004 8.38096 22.455 8.40469 22.3191C8.42865 22.1989 8.46685 22.0293 8.34479 21.9656C8.24918 21.9147 8.21369 21.9172 8.10565 21.8924L7.99557 21.8701ZM8.06542 21.558L8.34118 21.6323C8.50866 21.6565 8.60179 21.5697 8.63479 21.3674C8.66463 21.1818 8.62597 21.1093 8.47566 21.0733L8.18002 21.0135" fill="#0060AF"/>
<path d="M10.6225 21.0797L11.0276 21.1267L10.8531 22.5432C10.7683 22.9924 10.5947 23.1888 10.1006 23.1273C9.59791 23.0638 9.47856 22.8348 9.50908 22.3821L9.6847 20.9667L10.0929 21.0135L9.91774 22.3972C9.89921 22.5475 9.8644 22.7702 10.1318 22.7971C10.3689 22.8151 10.4227 22.6581 10.4494 22.4628" fill="#0060AF"/>
<path d="M11.4741 23.2048L11.596 21.1791L12.3742 21.2128C12.7419 21.2309 12.8382 21.5313 12.8267 21.8179C12.8161 21.9922 12.7616 22.1868 12.6097 22.2923C12.4852 22.3821 12.3251 22.4033 12.1766 22.3961L11.923 22.382L11.8724 23.231L11.4741 23.2048ZM11.9345 22.0731L12.1407 22.0846C12.3082 22.0907 12.4192 22.0245 12.4336 21.7786C12.4418 21.5424 12.3525 21.5024 12.1355 21.4929L11.9721 21.4873" fill="#0060AF"/>
<path d="M66.3618 4.23518L63.2688 9.8491C62.1013 8.90113 60.6758 8.20337 58.8569 8.20337C54.5526 8.20337 52.8042 11.4119 52.8042 13.672C52.8042 15.3496 53.9027 17.8248 57.7326 17.8248C59.3401 17.8248 61.6255 16.7064 62.2833 16.1976L59.2242 22.7107C57.7661 23.0016 57.2871 23.182 56.0527 23.2202C49.1979 23.4248 46.4279 19.2138 46.4299 14.9108C46.4345 9.22255 51.4919 2.30465 59.8758 2.30465C60.3896 2.30465 61.018 2.48231 61.5552 2.67918L62.0982 1.98482" fill="#0060AF"/>
<path d="M79.1241 2.1609L80 22.5652H73.4817L73.4779 19.0657H69.0332L67.5703 22.5652H60.5012L67.8917 7.99476L66.2252 7.98391L69.3917 2.1609H79.1241ZM73.4356 8.40297L70.9226 14.3379H73.5113" fill="#0060AF"/>
<path d="M42.3149 2.1609C45.5428 2.17898 47.3669 3.93117 47.3669 6.46227C47.3669 8.79559 45.4431 10.8611 43.3313 11.9291C45.5055 12.7283 45.6936 14.6902 45.6936 16.0783C45.6936 19.4317 42.3287 22.5652 37.9547 22.5652H28.4158L32.1367 8.19773L30.6083 8.18892L33.7327 2.1609C33.7327 2.1609 39.69 2.14282 42.3149 2.1609ZM39.1479 10.4336C39.8156 10.4336 40.9946 10.2646 41.2894 8.97233C41.6124 7.5696 40.5059 7.53185 39.9752 7.53185L38.0788 7.52354L37.4175 10.4337L39.1479 10.4336ZM36.4668 14.0393L35.5936 17.3927H37.8266C38.7051 17.3927 39.9024 16.9567 40.1958 15.8654C40.4856 14.7709 39.6486 14.0393 38.7732 14.0393" fill="#0060AF"/>
</g>
<defs>
<clipPath id="clip0_3802_10653">
<rect width="80" height="25.0722" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

18
client_app/assets/payment_icons/bni.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg width="80" height="24" viewBox="0 0 80 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3802_11102)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 8.13517L6.74901 16.6488L0 22.2413V8.13517Z" fill="#F15A23"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.71631 22.2413L7.7946 17.993L11.3046 22.2413H2.71631Z" fill="#F15A23"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 3.57962L1.76124 5.80752L9.00279 14.8564L11.3493 12.9878C11.3493 12.9878 9.40129 10.6944 8.09326 8.13515C5.53591 3.13154 7.34645 0.0162849 7.34645 0.0162849H0V3.57962Z" fill="#F15A23"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0349 16.2534L12.4247 14.2794C12.4247 14.2794 14.7071 17.2839 17.3536 17.993C20.8217 18.9223 22.3572 16.6488 22.3572 16.6488V22.2413H14.7398L16.4575 20.7562C16.4575 20.7562 15.5613 21.3537 13.3695 19.8355C12.0759 18.9395 10.0349 16.2534 10.0349 16.2534Z" fill="#F15A23"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2548 0C10.2548 0 9.49239 1.03855 10.0351 3.57963C10.6151 6.29571 12.9219 9.17037 12.9166 9.10601C12.9166 9.10601 13.0649 6.2516 14.7399 4.57654C18.3104 1.00611 22.3574 3.13155 22.3574 3.13155V0.0162955L10.2548 0Z" fill="#F15A23"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.3573 6.8955C22.3573 6.8955 20.0993 4.96147 18.1363 4.96147C15.6251 4.96147 14.2544 7.12946 14.2544 8.7021C14.2544 10.9928 15.3539 12.2656 16.4575 13.3692C18.0434 14.9551 19.9728 16.6655 22.3573 15.2889C22.3573 12.6833 22.3573 6.8955 22.3573 6.8955Z" fill="#F15A23"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.0718 0.233002H53.3999C53.3999 0.233002 58.12 7.37988 60.4397 10.3327C62.7594 13.2855 65.2563 16.6488 65.2563 16.6488C65.2563 16.6488 65.2563 6.89552 65.2563 1.83354C65.2563 1.19368 63.5763 0.233002 63.5763 0.233002H69.7205C69.7205 0.233002 67.7044 1.06129 67.7044 1.83354C67.7044 8.13516 67.7044 23.3862 67.7044 23.3862C67.7044 23.3862 65.7699 22.3135 63.5763 19.7645C61.1115 16.9004 52.3439 5.33765 52.3439 5.33765C52.3439 5.33765 52.3439 16.2534 52.3439 20.3141C52.3439 21.0811 54.024 22.2413 54.024 22.2413H48.0718C48.0718 22.2413 49.7038 21.0717 49.7038 20.3141C49.7038 14.8564 49.7038 6.89552 49.7038 1.83354C49.7038 1.15341 48.0718 0.233002 48.0718 0.233002Z" fill="#005E6A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M73.1616 0.233002H80C80 0.233002 78.1638 1.10278 78.1638 1.83354C78.1638 6.89552 78.1638 15.2889 78.1638 20.3141C78.1638 21.1127 80 22.2413 80 22.2413H73.1616C73.1616 22.2413 74.8712 21.087 74.8712 20.3141C74.8712 14.2794 74.8712 6.89552 74.8712 1.83354C74.8712 1.13097 73.1616 0.233002 73.1616 0.233002Z" fill="#005E6A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.9526 0.233002C27.9526 0.233002 29.7255 1.11699 29.7255 1.83354C29.7255 6.89552 29.7255 14.2794 29.7255 20.3141C29.7255 21.0997 27.9526 22.2413 27.9526 22.2413C27.9526 22.2413 36.8096 22.2413 38.0835 22.2413C38.7167 22.2413 45.8083 21.0817 45.8083 15.6143C45.8083 10.147 40.2996 9.63506 40.2996 9.63506C40.2996 9.63506 43.6555 8.70212 43.6555 4.96149C43.6555 0.929499 38.7167 0.233002 38.0835 0.233002C36.7677 0.233002 27.9526 0.233002 27.9526 0.233002ZM33.3347 9.27274V2.39227C33.3347 2.39227 36.2712 2.39227 37.4503 2.39227C38.0835 2.39227 40.2996 3.13155 40.2996 5.87439C40.2996 8.13516 38.0835 9.27274 37.4503 9.27274C36.0148 9.27274 33.3347 9.27274 33.3347 9.27274ZM33.3347 11.0773C33.3347 11.0773 37.4503 11.0773 38.0835 11.0773C38.7167 11.0773 42.4525 12.0477 42.4525 15.2889C42.4525 18.5934 38.7167 19.7645 38.0835 19.7645C37.4503 19.7645 33.3347 19.7645 33.3347 19.7645V11.0773Z" fill="#005E6A"/>
</g>
<defs>
<clipPath id="clip0_3802_11102">
<rect width="80" height="23.3862" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

13
client_app/assets/payment_icons/bri.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg width="80" height="31" viewBox="0 0 80 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3802_11089)">
<path d="M25.636 3.73988e-05H4.61675C2.06806 3.73988e-05 0 2.11803 0 4.73408V25.5446C0 28.1366 2.02716 30.2414 4.54757 30.2787L25.621 30.2793C28.1697 30.2793 30.2426 28.1607 30.2426 25.5446L30.2528 4.73408C30.2528 2.11803 28.1841 3.73988e-05 25.636 3.73988e-05ZM7.11491 27.8533L5.96779 27.8672C4.57885 27.8672 3.4576 26.7236 3.4576 25.3185L3.44918 25.1158V5.89805L3.4576 4.86221C3.51354 3.50275 4.54517 2.40436 5.89861 2.40436H8.22834C10.3439 2.40436 12.0547 4.24203 12.0547 6.40634C12.0547 7.48128 11.6336 8.45155 10.9527 9.16075L5.00774 15.1905L10.5821 20.8689C11.298 21.6112 11.7311 22.5851 11.7311 23.6492C11.7311 25.9705 9.6684 27.8533 7.11491 27.8533V27.8533ZM24.2525 27.8359L13.8587 27.8329C13.8587 27.8329 15.0605 25.2331 15.0605 23.6264C15.0605 21.6672 14.4055 19.9137 13.3799 18.7564L9.82661 15.1315L13.4502 11.3864C14.5348 10.3674 15.2506 8.56463 15.2506 6.51401C15.2506 4.88928 14.8019 3.44982 14.0752 2.40436H16.595C18.7088 2.40436 20.4214 4.24203 20.4214 6.40634C20.4214 7.48128 20.0021 8.45155 19.323 9.16075L13.4881 15.1291L25.603 27.484C25.2168 27.7258 24.7343 27.8359 24.2525 27.8359V27.8359ZM26.788 23.9771L18.1049 15.1273L22.2398 10.9262C23.0825 9.87056 23.6191 8.28552 23.6191 6.51401C23.6191 4.87965 23.1619 3.4023 22.4323 2.35744L24.2808 2.41518C25.6673 2.41518 26.7952 3.55509 26.7952 4.96447L26.788 23.9771Z" fill="#00529C"/>
<path d="M48.8834 13.7179C49.0525 13.5489 49.2522 13.3311 49.4826 13.0647C49.7123 12.7982 49.9301 12.4836 50.1358 12.1203C50.3415 11.7569 50.5172 11.3521 50.6622 10.904C50.8077 10.4564 50.8805 9.97821 50.8805 9.46992C50.8805 8.47799 50.7109 7.55224 50.3722 6.69265C50.033 5.83366 49.5126 5.08295 48.8107 4.44112C48.1087 3.80049 47.2316 3.29761 46.1784 2.93428C45.1257 2.57156 43.8967 2.3899 42.4934 2.3899H42.4549H38.4198H37.3695H33.2346V7.01808V23.0405V27.8052H43.4011C44.8772 27.8052 46.1657 27.6055 47.2677 27.2061C48.3685 26.8066 49.2829 26.2562 50.0089 25.5542C50.7349 24.8523 51.2733 24.0354 51.6246 23.1036C51.9753 22.1718 52.151 21.1733 52.151 20.108C52.151 18.68 51.8243 17.4095 51.1711 16.2955C50.5172 15.1827 49.7545 14.3231 48.8834 13.7179ZM44.3882 7.04695C44.7305 7.17748 45.0162 7.34711 45.2394 7.56066C45.8174 8.11527 46.1068 8.77815 46.1068 9.54932C46.1068 10.2489 45.9859 10.827 45.7453 11.2847C45.504 11.7431 45.2628 12.0926 45.0222 12.3332H37.9548V6.74679H42.3478C43.1713 6.74679 43.8492 6.84844 44.3882 7.04695V7.04695ZM43.6549 16.7316C44.9344 16.7316 45.8824 17.063 46.4996 17.7247C47.08 18.3762 47.3724 19.1449 47.3724 20.0346C47.3724 20.9513 47.0409 21.7339 46.3781 22.3848C45.7146 23.0356 44.6246 23.3617 43.1057 23.3617H42.5385H37.9548V16.7316H43.6549Z" fill="#00529C"/>
<path d="M69.3872 16.8585C70.1493 16.3382 70.7851 15.7331 71.2934 15.0431C71.8017 14.3531 72.1765 13.591 72.4189 12.7561C72.6607 11.9206 72.7822 11.0676 72.7822 10.196C72.7822 9.05847 72.5939 8.0118 72.2192 7.05537C71.8432 6.09954 71.2808 5.27665 70.5307 4.58669C69.78 3.89673 68.8422 3.35836 67.7167 2.97098C66.5913 2.58419 65.2902 2.3899 63.814 2.3899H63.6811H53.902H53.8105V27.8052H58.6222V18.3654H61.305L67.9405 27.8052H73.5805L66.7188 18.0387C67.7348 17.7728 68.6244 17.3794 69.3872 16.8585ZM63.8501 6.74679C64.1527 6.74679 64.4384 6.76664 64.7103 6.80092C65.5681 6.93025 66.2689 7.23643 66.809 7.72307C67.5441 8.38656 67.9116 9.19983 67.9116 10.1635C67.9116 10.6465 67.8328 11.1163 67.6764 11.5741C67.5194 12.0324 67.2728 12.4361 66.9353 12.785C66.5973 13.135 66.1636 13.4178 65.6336 13.6349C65.1031 13.8521 64.4643 13.9603 63.7172 13.9603H58.6222V6.74679H63.8501Z" fill="#00529C"/>
<path d="M75.2797 2.3899V2.39712C75.231 2.39591 75.1835 2.3899 75.1348 2.3899H75.0939V2.3917V11.7076V18.3828V27.8052H80V2.3899H75.2797Z" fill="#00529C"/>
</g>
<defs>
<clipPath id="clip0_3802_11089">
<rect width="80" height="30.2793" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

15
client_app/assets/payment_icons/dana.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg width="80" height="23" viewBox="0 0 80 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3802_18349)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.623 17.3487C33.1435 17.4576 34.9152 16.2764 35.5393 15.6021C37.7089 13.2544 37.7613 9.85968 35.577 7.40105C34.7644 6.48586 32.8545 5.47435 31.6461 5.61675H27.2712V17.334L31.6335 17.3487H31.623ZM29.7382 14.8105V8.14031C30.423 8.09539 31.11 8.09539 31.7948 8.14031C32.3336 8.20279 32.8475 8.40174 33.288 8.71832C35.8011 10.4356 34.7539 14.5298 31.7529 14.8042C31.0822 14.8513 30.4092 14.8534 29.7382 14.8105Z" fill="#008CEB"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M70.0293 17.3696H72.5236V14.844H77.4723L77.4869 17.3571H79.9812V13.1937C79.9812 11.9372 80.0859 10.3707 79.7717 9.23351C79.4864 8.19245 78.8684 7.2733 78.012 6.61626C77.1555 5.95923 76.1077 5.60037 75.0282 5.59444C73.9488 5.58851 72.8971 5.93582 72.0335 6.58341C71.1698 7.23099 70.5418 8.1433 70.245 9.18115C69.9099 10.3037 70.023 11.9141 70.023 13.1602C70.023 14.5675 70.0084 15.9832 70.023 17.3906L70.0293 17.3696ZM72.5257 12.3037C72.511 11.2565 72.4 10.1361 72.8922 9.32984C73.1082 8.95863 73.4187 8.65127 73.792 8.43902C74.1654 8.22676 74.5883 8.1172 75.0178 8.12147C75.4451 8.12462 75.8642 8.23858 76.2342 8.45223C76.6042 8.66587 76.9125 8.97187 77.1288 9.34031C77.6147 10.178 77.4995 11.2251 77.4869 12.3058L72.5257 12.3037Z" fill="#008CEB"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.5058 17.3675H43.9916C43.9916 16.8398 43.9246 15.2251 44.0147 14.8419H48.9445L48.9613 17.3654H51.4513C51.4387 15.9665 51.4513 14.5696 51.4513 13.177C51.4513 11.9832 51.5623 10.2743 51.2419 9.21466C50.9548 8.17496 50.3358 7.25754 49.4792 6.60203C48.6227 5.94652 47.5754 5.58882 46.4968 5.58337C45.4182 5.57791 44.3673 5.92501 43.5042 6.57182C42.641 7.21864 42.0128 8.12975 41.7152 9.16649C41.3822 10.2555 41.4953 11.9204 41.4953 13.133C41.4953 14.5319 41.4639 15.9665 41.4953 17.3613L41.5058 17.3675ZM43.9937 12.3037C43.977 11.2565 43.8702 10.1215 44.3623 9.33194C44.5783 8.96169 44.8875 8.65452 45.2592 8.44103C45.6309 8.22754 46.052 8.1152 46.4806 8.1152C46.9093 8.1152 47.3304 8.22754 47.7021 8.44103C48.0738 8.65452 48.383 8.96169 48.599 9.33194C49.0869 10.1696 48.9696 11.2335 48.9613 12.2995L43.9937 12.3037Z" fill="#008CEB"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M55.8262 10.1927L55.7906 11.9372C55.7906 13.4031 55.7194 16.1403 55.7906 17.3319H58.2283C58.2848 16.4942 58.1403 10.5445 58.2932 10.3539C58.2932 9.19791 59.5016 8.12147 60.7204 8.11728C61.354 8.11346 61.964 8.35689 62.4209 8.79581C62.7309 9.07853 63.2063 9.72356 63.1979 10.3749C63.311 10.4398 63.2209 16.6576 63.2565 17.3466H65.6963L65.6775 10.2367C65.7382 9.67958 65.4031 8.81885 65.1874 8.38325C64.7874 7.55326 64.163 6.85185 63.3849 6.35847C62.6067 5.86508 61.706 5.59942 60.7847 5.59157C59.8634 5.58372 58.9583 5.834 58.1719 6.31407C57.3855 6.79413 56.7492 7.4848 56.3351 8.30785C56.1257 8.73717 55.7738 9.62094 55.8262 10.1927Z" fill="#008CEB"/>
<path d="M11.4366 22.8733C17.7529 22.8733 22.8733 17.7529 22.8733 11.4366C22.8733 5.12036 17.7529 0 11.4366 0C5.12036 0 0 5.12036 0 11.4366C0 17.7529 5.12036 22.8733 11.4366 22.8733Z" fill="#008CEB"/>
<path d="M18.1005 11.4848V14.7037C18.1005 14.9131 18.0105 14.9571 17.8346 14.8544C17.5992 14.7132 17.3543 14.5887 17.1016 14.4817C16.3383 14.1776 15.5115 14.0675 14.6953 14.1613C13.8044 14.2768 12.93 14.4961 12.0901 14.8147C11.2524 15.0974 10.4314 15.4031 9.57696 15.6398C8.86925 15.85 8.13275 15.9468 7.39476 15.9267C6.5769 15.895 5.78205 15.6471 5.0911 15.2084C5.00429 15.1561 4.93306 15.0815 4.88481 14.9924C4.83657 14.9033 4.81307 14.8028 4.81675 14.7016C4.81675 12.5934 4.81675 10.4852 4.81675 8.37696C4.81675 8.27435 4.81675 8.15288 4.9089 8.10052C5.00105 8.04817 5.09529 8.13403 5.17487 8.18639C5.92517 8.69371 6.81381 8.95701 7.71937 8.94031C8.36688 8.91375 9.00724 8.79456 9.62094 8.58639C10.4921 8.31623 11.334 7.95812 12.1906 7.65445C12.8573 7.39821 13.541 7.18829 14.2366 7.02618C14.8337 6.88636 15.4532 6.87168 16.0562 6.98305C16.6592 7.09442 17.2326 7.32944 17.7403 7.6733C17.8567 7.74461 17.952 7.84565 18.0164 7.96601C18.0808 8.08636 18.112 8.22171 18.1068 8.35812C18.1068 9.40524 18.1068 10.4524 18.1068 11.4995L18.1005 11.4848Z" fill="#FEFEFE"/>
</g>
<defs>
<clipPath id="clip0_3802_18349">
<rect width="79.9979" height="22.8733" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

13
client_app/assets/payment_icons/gopay.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg width="80" height="18" viewBox="0 0 80 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3802_18151)">
<path d="M8.73161 17.4632C13.554 17.4632 17.4632 13.554 17.4632 8.73161C17.4632 3.90928 13.554 0 8.73161 0C3.90928 0 0 3.90928 0 8.73161C0 13.554 3.90928 17.4632 8.73161 17.4632Z" fill="#00AED6"/>
<path d="M8.73161 17.4632C13.554 17.4632 17.4632 13.554 17.4632 8.73161C17.4632 3.90928 13.554 0 8.73161 0C3.90928 0 0 3.90928 0 8.73161C0 13.554 3.90928 17.4632 8.73161 17.4632Z" fill="#00AED6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8174 8.45967C13.7531 7.3509 12.8095 6.49976 11.7 6.54963H6.18455C5.98362 6.54963 5.82073 6.38674 5.82073 6.18581C5.82073 5.98488 5.98362 5.82199 6.18455 5.82199H11.7727C11.7425 5.06711 11.2277 4.4184 10.4994 4.21756C8.87117 3.93015 7.20521 3.93015 5.577 4.21756C4.65145 4.44555 3.95909 5.2158 3.83068 6.16034C3.57239 7.87395 3.57239 9.61658 3.83068 11.3302C4.02732 12.3276 4.81888 13.1004 5.82076 13.273C7.84189 13.524 9.8863 13.524 11.9074 13.273C12.8062 13.089 13.4863 12.3503 13.5956 11.4393C13.7765 10.457 13.8509 9.45798 13.8174 8.45967ZM12.0056 9.68209V10.0059C12.0056 10.2068 11.8427 10.3697 11.6418 10.3697C11.4409 10.3697 11.278 10.2068 11.278 10.0059V9.68209C11.1617 9.58018 11.0954 9.43286 11.0961 9.27826C11.0961 8.97686 11.3404 8.73253 11.6418 8.73253C11.9432 8.73253 12.1875 8.97686 12.1875 9.27826C12.1882 9.43286 12.1219 9.58018 12.0056 9.68209Z" fill="white"/>
<path d="M24.3658 13.0782C25.1069 14.1355 26.3393 14.7378 27.6288 14.6727C29.1494 14.6727 30.2679 13.7014 30.2679 12.3811V11.6848H30.231C29.3978 12.499 28.2604 12.9249 27.0973 12.858C25.2599 12.9107 23.5374 11.9665 22.5936 10.3892C21.6497 8.81182 21.6318 6.84759 22.5468 5.25335C23.4618 3.65911 25.1669 2.68372 27.0049 2.70304C28.1901 2.627 29.3551 3.0373 30.231 3.83926H30.2679V2.88638H32.8715V12.3449C32.8715 15.0941 30.69 17.0006 27.6288 17.0006C25.6237 17.11 23.6877 16.2511 22.4231 14.6912L24.3658 13.0782ZM30.1585 7.19392C30.1585 6.09394 28.9121 5.08563 27.5193 5.08563C25.7585 5.08563 24.5861 6.14936 24.5861 7.74391C24.5339 8.49941 24.8178 9.23942 25.362 9.76607C25.9062 10.2927 26.6551 10.5523 27.4085 10.4754C28.9306 10.4754 30.1585 9.52178 30.1585 8.33014V7.19392ZM39.6902 2.61139C42.8622 2.61139 45.1716 4.86606 45.1716 7.74391C45.1716 10.6218 42.8622 12.8764 39.6902 12.8764C37.7763 13.0019 35.9515 12.052 34.9565 10.4123C33.9614 8.7725 33.9614 6.71532 34.9565 5.07556C35.9515 3.43581 37.7763 2.48592 39.6902 2.61139ZM39.6902 4.99396C38.1741 5.0043 36.9525 6.23985 36.9593 7.75594C36.9662 9.27203 38.1989 10.4965 39.715 10.4932C41.2311 10.4899 42.4584 9.26002 42.4586 7.74391C42.493 7.00132 42.2117 6.27883 41.6843 5.75493C41.1569 5.23104 40.4325 4.95462 39.6902 4.99396ZM46.6382 2.88638H49.2418V3.7476H49.2788C50.1295 2.96525 51.258 2.55607 52.4124 2.61139C55.2074 2.66182 57.4483 4.93938 57.4534 7.73485C57.4584 10.5303 55.2257 12.8159 52.4309 12.8764C51.3276 12.9019 50.2505 12.5384 49.3882 11.8496H49.3512V16.7256H46.6382V2.88638ZM51.9918 5.01241C50.5606 5.01241 49.3512 6.02075 49.3512 7.12073V8.34861C49.3512 9.52178 50.5251 10.4931 52.0088 10.4931C53.5223 10.4884 54.7453 9.25772 54.7407 7.74426C54.7359 6.23081 53.5052 5.00772 51.9918 5.01241ZM62.568 6.80878C64.3459 6.57074 64.8774 6.31422 64.8774 5.81894C64.8774 5.17729 64.1995 4.79286 63.155 4.79286C62.0295 4.69756 61.0023 5.43641 60.7347 6.53379L58.1681 6.00227C58.5348 4.0226 60.5699 2.61139 63.0811 2.61139C65.922 2.61139 67.6828 4.05955 67.6828 6.42365V12.6014H65.2441V11.5384H65.2071C64.3805 12.4698 63.1679 12.9643 61.9257 12.8764C59.7811 12.8764 58.2974 11.7033 58.2974 9.9801C58.2975 8.16528 59.5069 7.23087 62.568 6.80878ZM65.0977 7.83557H65.0608C64.822 8.18376 64.309 8.38556 62.9901 8.6236C61.3942 8.91707 60.8271 9.22831 60.8271 9.79677C60.8271 10.3837 61.3032 10.6402 62.3293 10.6402C63.8883 10.6402 65.0977 9.92538 65.0977 8.99026V7.83557ZM72.5943 12.0699L68.1035 2.88638H71.0922L74.0425 9.22831H74.0794L76.9942 2.88638H80L73.2736 16.7256H70.2849L72.5943 12.0699Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_3802_18151">
<rect width="80" height="17.4632" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

23
client_app/assets/payment_icons/mandiri.svg Normal file
View File

@@ -0,0 +1,23 @@
<svg width="80" height="25" viewBox="0 0 80 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3802_8197)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M58.8989 0.896292C57.3589 1.81741 53.7265 3.96929 52.3705 4.77064C51.5441 5.20551 49.6301 5.39539 48.5475 3.88763C48.5281 3.86041 47.1077 2.02711 47.0497 1.95808C47.009 1.9093 46.0907 0.502368 44.0445 0.458381C43.7422 0.450977 42.239 0.442702 40.7724 1.30372C38.8229 2.45413 34.2891 5.13147 34.2891 5.13147C34.2891 5.13147 34.2878 5.13386 34.2855 5.13386C32.4218 6.23528 30.9697 7.09282 30.9697 7.09282L32.6854 9.26931C33.4879 10.2986 35.2978 11.095 36.8674 10.1643C36.8674 10.1643 42.6668 6.69541 42.6881 6.68539C45.1962 5.26452 47.1315 5.26452 48.416 5.79324C49.569 6.29647 50.572 7.55033 50.572 7.55033C50.572 7.55033 51.8829 9.22837 52.1142 9.52191C52.86 10.4702 54.0946 10.0977 54.0946 10.0977C54.0946 10.0977 54.5521 10.0441 55.2417 9.6212C55.2417 9.6212 60.8591 6.25684 60.8627 6.25575C62.6464 5.1748 64.2824 4.97294 65.1185 5.05242C67.7373 5.29827 68.5508 7.18798 69.6863 8.50628C70.355 9.28172 70.9584 9.72203 71.8811 9.69982C72.4874 9.68653 73.1724 9.30676 73.2734 9.23817L80.0002 5.22837C80.0002 5.22837 79.3099 4.15461 77.8964 2.48397C76.6313 0.993412 75.2875 1.66781 74.2162 2.21591C73.7661 2.44586 72.1352 3.56644 70.5195 4.34819C69.3682 4.905 67.7145 4.73754 66.8082 3.58081C66.754 3.51048 65.2878 1.67695 65.1337 1.45136C64.5419 0.68572 63.3873 0 61.9075 0C61.0078 0 59.9868 0.25347 58.8989 0.896292Z" fill="url(#paint0_linear_3802_8197)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0843273 16.5732C0.0843273 15.376 0.0632455 14.3713 0 13.4754H2.1942L2.29708 15.0145H2.35864C2.85596 14.2012 3.76543 13.2394 5.46188 13.2394C6.78603 13.2394 7.82031 14.0104 8.25396 15.1639H8.29655C8.64882 14.5871 9.06118 14.16 9.53658 13.8597C10.0957 13.4543 10.7372 13.2394 11.5647 13.2394C13.2398 13.2394 14.935 14.4144 14.935 17.7483V23.8801H12.453V18.1335C12.453 16.4029 11.8748 15.376 10.655 15.376C9.78471 15.376 9.14277 16.0182 8.87566 16.7664C8.81284 17.022 8.75086 17.3428 8.75086 17.6398V23.8801H6.26805V17.8547C6.26805 16.4029 5.71044 15.376 4.53112 15.376C3.57949 15.376 2.93902 16.1464 2.71091 16.8713C2.60677 17.1294 2.56503 17.4277 2.56503 17.7263V23.8801H0.0843273V16.5732Z" fill="#003A70"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.6052 21.3809C24.6052 22.3205 24.6465 23.2377 24.75 23.8806H22.4532L22.2883 22.7271H22.2255C21.6053 23.5398 20.5503 24.1157 19.2473 24.1157C17.2196 24.1157 16.0825 22.5999 16.0825 21.0179C16.0825 18.3889 18.3363 17.0654 22.06 17.0865V16.9149C22.06 16.2309 21.7908 15.0993 20.0121 15.0993C19.0187 15.0993 17.984 15.42 17.3018 15.8679L16.8047 14.1601C17.5508 13.6891 18.8551 13.2398 20.4466 13.2398C23.6749 13.2398 24.6052 15.3564 24.6052 17.6202V21.3809ZM22.122 18.7959C20.3226 18.7528 18.6062 19.1587 18.6062 20.7401C18.6062 21.7646 19.2473 22.2356 20.0543 22.2356C21.0666 22.2356 21.8125 21.5516 22.0393 20.8041C22.1009 20.6118 22.122 20.3973 22.122 20.227V18.7959Z" fill="#003A70"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3642 16.5732C26.3642 15.376 26.3415 14.3713 26.2812 13.4754H28.5133L28.6381 15.035H28.6993C29.1342 14.2241 30.2304 13.2394 31.9056 13.2394C33.6645 13.2394 35.4847 14.4144 35.4847 17.7056V23.8801H32.9407V18.0054C32.9407 16.5088 32.4029 15.376 31.0168 15.376C30.0032 15.376 29.3001 16.124 29.0305 16.9149C28.9491 17.1505 28.9276 17.4717 28.9276 17.7687V23.8801H26.3642V16.5732Z" fill="#003A70"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M46.5156 9.2947V20.9524C46.5156 22.0205 46.5563 23.1763 46.5978 23.8806H44.3223L44.2204 22.2356H44.1783C43.5781 23.39 42.3557 24.1158 40.8887 24.1158C38.4902 24.1158 36.5865 22.0009 36.5865 18.7959C36.5654 15.3129 38.6753 13.2398 41.0953 13.2398C42.4808 13.2398 43.4746 13.8389 43.9289 14.6087H43.9708V9.2947H46.5156ZM43.9708 17.8115C43.9708 17.6 43.9495 17.3424 43.9097 17.1294C43.6818 16.1038 42.8746 15.27 41.7161 15.27C40.0821 15.27 39.1718 16.7664 39.1718 18.7108C39.1718 20.6118 40.0821 22.0009 41.6955 22.0009C42.7293 22.0009 43.6401 21.2747 43.888 20.1426C43.9495 19.9065 43.9708 19.6504 43.9708 19.3717V17.8115Z" fill="#003A70"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.3134 23.88H50.8809V13.476H48.3134V23.88Z" fill="#003A70"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M52.679 16.8295C52.679 15.4199 52.6575 14.4143 52.5957 13.4751H54.8095L54.8904 15.4615H54.9762C55.4719 13.9873 56.6512 13.4751 57.7264 13.4751C57.9741 13.4751 58.1187 13.4314 58.3262 13.4751V15.7834C58.1187 15.7407 57.8917 15.698 57.5813 15.698C56.3611 15.698 55.533 16.5092 55.3058 17.6835C55.2655 17.9187 55.2238 18.1977 55.2238 18.4982V23.8805H52.679V16.8295Z" fill="#003A70"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M59.5053 23.88H62.069V13.476H59.5053V23.88Z" fill="#003A70"/>
</g>
<defs>
<linearGradient id="paint0_linear_3802_8197" x1="0" y1="24.1158" x2="80.0002" y2="24.1158" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFCA06"/>
<stop offset="0.330844" stop-color="#FBAA18"/>
<stop offset="0.694742" stop-color="#FFC907"/>
<stop offset="1" stop-color="#FAA619"/>
</linearGradient>
<clipPath id="clip0_3802_8197">
<rect width="80.0002" height="24.1158" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

10
client_app/assets/payment_icons/ovo.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="64" height="65" viewBox="0 0 64 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3802_16524)">
<path d="M31.9574 64.9375C25.7648 64.9375 20.2539 63.574 15.4248 60.8469C10.5957 58.0631 6.81758 54.2282 4.09055 49.3423C1.36352 44.3995 0 38.8034 0 32.554C0 26.3045 1.36352 20.7084 4.09055 15.7657C6.87439 10.8229 10.6809 6.95962 15.51 4.17577C20.3959 1.39192 25.9352 0 32.1278 0C38.2637 0 43.7461 1.39192 48.5752 4.17577C53.4612 6.9028 57.2392 10.7377 59.9095 15.6804C62.6365 20.6232 64 26.2477 64 32.554C64 38.8034 62.6365 44.3995 59.9095 49.3423C57.1824 54.2282 53.3759 58.0631 48.49 60.8469C43.6609 63.574 38.15 64.9375 31.9574 64.9375ZM31.9574 59.9095C37.241 59.9095 41.8997 58.7732 45.9334 56.5007C49.9672 54.2282 53.0919 51.0182 55.3076 46.8709C57.5801 42.7235 58.7164 37.9512 58.7164 32.554C58.7164 27.1567 57.6085 22.3844 55.3928 18.237C53.1771 14.0329 50.0524 10.7945 46.0186 8.52198C41.9849 6.19264 37.3546 5.02797 32.1278 5.02797C26.901 5.02797 22.2423 6.19264 18.1518 8.52198C14.0613 10.7945 10.8797 14.0329 8.60719 18.237C6.39148 22.3844 5.28362 27.1567 5.28362 32.554C5.28362 37.9512 6.39148 42.7235 8.60719 46.8709C10.8229 51.0182 13.9476 54.2282 17.9814 56.5007C22.0151 58.7732 26.6738 59.9095 31.9574 59.9095ZM31.9574 57.5234C27.1851 57.5234 22.9525 56.5007 19.2597 54.4554C15.5668 52.3534 12.6977 49.4275 10.6525 45.6778C8.664 41.8713 7.66977 37.4967 7.66977 32.554C7.66977 27.6112 8.69241 23.2366 10.7377 19.4301C12.783 15.6236 15.6236 12.6693 19.2597 10.5673C22.9525 8.46517 27.1851 7.41412 31.9574 7.41412C36.7297 7.41412 40.9623 8.46517 44.6551 10.5673C48.348 12.6693 51.217 15.652 53.2623 19.5153C55.3076 23.3218 56.3302 27.668 56.3302 32.554C56.3302 37.4399 55.3076 41.7861 53.2623 45.5926C51.217 49.3423 48.348 52.2681 44.6551 54.3702C40.9623 56.4723 36.7297 57.5234 31.9574 57.5234ZM31.9574 52.4954C35.7071 52.4954 39.0306 51.6716 41.9281 50.024C44.8256 48.3196 47.0697 45.9619 48.6605 42.9508C50.2512 39.8829 51.0466 36.4173 51.0466 32.554C51.0466 28.6338 50.2228 25.1682 48.5752 22.1571C46.9845 19.0892 44.7404 16.7031 41.8429 14.9987C38.9454 13.2943 35.6502 12.4421 31.9574 12.4421C28.2645 12.4421 24.9694 13.2943 22.0719 14.9987C19.1744 16.7031 16.9303 19.0892 15.3395 22.1571C13.7488 25.1682 12.9534 28.6338 12.9534 32.554C12.9534 36.4173 13.7488 39.8829 15.3395 42.9508C16.9303 45.9619 19.1744 48.3196 22.0719 50.024C24.9694 51.6716 28.2645 52.4954 31.9574 52.4954Z" fill="#5827D4"/>
</g>
<defs>
<clipPath id="clip0_3802_16524">
<rect width="64" height="64.9375" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

33
client_app/assets/payment_icons/permata.svg Normal file
View File

@@ -0,0 +1,33 @@
<svg width="80" height="43" viewBox="0 0 80 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3802_9601)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M51.6181 41.6449C51.6264 41.4925 51.6352 41.2482 51.6431 40.9134V34.4931L51.6223 33.8701C51.6172 33.7376 51.6108 33.6476 51.6043 33.6005C51.5974 33.5506 51.5867 33.5077 51.572 33.4679C51.5239 33.3096 51.4173 33.1978 51.257 33.1309C51.1093 33.0685 50.8909 33.0385 50.6073 33.0362V32.8178H54.2737C54.8066 32.8187 55.2882 32.8533 55.7181 32.9226C56.1476 32.9914 56.4934 33.0865 56.758 33.2075C57.5246 33.5709 57.9032 34.1828 57.8991 35.0532C57.9078 36.2972 57.0896 37.0919 55.3958 37.2964L55.1118 37.3421C55.4928 37.356 56.0081 37.483 56.2478 37.5384C56.4856 37.5933 56.7188 37.6806 56.9474 37.7998C57.8464 38.2514 58.2892 38.9736 58.2805 39.9723C58.2851 41.1854 57.6936 41.9741 56.493 42.3467C56.2307 42.4215 55.9019 42.4806 55.5043 42.5236C55.1054 42.5665 54.6722 42.5887 54.2054 42.5896H50.6073V42.3708C51.0308 42.3657 51.3221 42.301 51.451 42.1491C51.505 42.0974 51.5433 42.0406 51.5687 41.9755C51.5946 41.9094 51.6098 41.7968 51.6181 41.6449ZM52.7476 33.1179V37.1925H54.1782C55.8419 37.1828 56.7035 36.4916 56.7128 35.1077C56.7243 33.7644 55.816 33.1087 54.0553 33.1179H52.7476ZM56.9991 39.8634C56.9898 38.9135 56.6463 38.2421 55.9615 37.8667C55.7537 37.7605 55.4896 37.6788 55.1723 37.621C54.8556 37.5638 54.506 37.5347 54.1237 37.5333H52.7476V42.289H54.1237C55.1206 42.2936 55.8493 42.1075 56.2981 41.7174C56.5258 41.5303 56.6985 41.2764 56.8185 40.9578C56.9381 40.6391 56.9977 40.2734 56.9991 39.8634Z" fill="#3A3A3A"/>
<path d="M63.528 42.3108C63.4536 42.1635 63.4014 41.9884 63.3788 41.541L63.3723 41.4085L63.2841 41.5077C63.1793 41.6264 63.0764 41.7289 62.9757 41.8162C62.8746 41.9044 62.7573 41.9944 62.6257 42.0859C62.3361 42.2983 62.0572 42.4479 61.7899 42.5352C61.5225 42.622 61.221 42.6645 60.8853 42.6617C60.3007 42.664 59.8519 42.5255 59.5309 42.2526C59.3513 42.091 59.2105 41.8882 59.1075 41.6421C59.0045 41.3965 58.9519 41.1323 58.9496 40.8488C58.9565 39.8034 59.5983 39.1287 60.9111 38.83C61.2584 38.7496 61.6255 38.6836 62.0115 38.6319C62.3989 38.5802 62.8376 38.5377 63.3285 38.5044L63.3788 37.5924C63.3797 37.2808 63.3645 37.0282 63.334 36.8356C63.3035 36.6408 63.2532 36.4708 63.1826 36.3272C62.9877 35.9476 62.5906 35.7657 62.0166 35.7657C61.0958 35.7611 60.5967 36.1993 60.545 37.0711C60.5394 37.2096 60.5265 37.3071 60.5085 37.3662C60.4909 37.4216 60.4609 37.4627 60.4184 37.4927C60.327 37.5541 60.1811 37.5897 59.9715 37.592C59.5203 37.5989 59.3513 37.4645 59.3587 37.2387C59.3615 37.0023 59.44 36.7737 59.5974 36.5535C59.7549 36.3323 59.9742 36.1402 60.2577 35.9763C60.7675 35.6937 61.4205 35.5496 62.2212 35.5473C63.0971 35.5496 63.6845 35.7482 64.0054 36.1273C64.1352 36.287 64.2317 36.4842 64.2945 36.7229C64.3568 36.9617 64.3887 37.2641 64.3882 37.6322L64.3868 37.7102L64.361 39.0082L64.3471 40.303L64.3337 40.9301C64.3347 41.2251 64.3471 41.45 64.3674 41.7017C64.3878 41.9469 64.4755 42.2202 64.6717 42.2927C64.8763 42.3685 65.073 42.3985 65.4475 42.4008C65.7227 42.3953 65.9347 42.3639 66.0783 42.3029C66.2422 42.2332 66.3429 42.0854 66.3863 41.8758C66.4288 41.6712 66.4472 41.36 66.4426 40.943V37.2886C66.4518 36.7913 66.3941 36.4413 66.2524 36.2584C66.1138 36.0797 65.8562 36.0026 65.502 36.0063V35.8124L67.4516 35.6701V37.223L67.5532 37.042C67.8418 36.5281 68.1691 36.1647 68.5335 35.9463C68.8978 35.7278 69.3545 35.6198 69.9045 35.6253C70.731 35.6143 71.3068 35.8913 71.6439 36.445C71.7672 36.6301 71.8573 36.8536 71.9108 37.115C71.9644 37.3768 71.9912 37.7116 71.9898 38.1193V40.943C71.9847 41.3641 72.0022 41.6777 72.0429 41.8813C72.0844 42.091 72.1842 42.2383 72.3486 42.3061C72.4843 42.362 72.8011 42.3925 73.0712 42.3999C73.3243 42.392 73.5201 42.3611 73.654 42.3024C73.8137 42.2327 73.9103 42.0845 73.9514 41.8748C73.9911 41.6712 74.0081 41.3595 74.0031 40.943V34.3038C74.0081 33.9233 73.9925 33.6411 73.9541 33.4592C73.9144 33.2694 73.8165 33.1387 73.6563 33.0824C73.5173 33.0335 73.309 33.0104 73.0357 33.0094V32.815L75.0633 32.7116C75.0379 33.1618 75.0185 33.6222 75.0056 34.0927C74.9917 34.5841 74.9852 35.013 74.9852 35.3801V39.8403L77.2193 37.3925C77.5351 37.0425 77.7078 36.7483 77.7101 36.5128C77.7263 36.185 77.3952 36.0368 76.8517 36.0095V35.816H79.7548V36.0128C79.5803 36.0331 79.4283 36.0649 79.2995 36.1093C79.1591 36.1568 79.0151 36.2261 78.8682 36.3148C78.7191 36.4048 78.5944 36.4874 78.4933 36.5627C78.3903 36.6398 78.2688 36.7493 78.1289 36.8915C77.989 37.0333 77.7868 37.2484 77.5208 37.5375L76.7833 38.3313L78.7135 41.3674C78.9338 41.7271 79.1365 41.9815 79.3226 42.126C79.5004 42.2637 79.7271 42.3523 80 42.3943V42.5929H78.2347C78.1862 42.4941 78.1197 42.3662 78.0347 42.2092L77.754 41.6971L77.5393 41.3115L76.1106 38.9833L74.988 40.2393L74.9852 40.943C74.9802 41.3595 74.9972 41.6712 75.0374 41.8753C75.079 42.0849 75.1769 42.2332 75.339 42.3029C75.4807 42.3634 75.6917 42.3953 75.966 42.4008V42.5929H69.9996V42.4003C70.4036 42.3893 70.6811 42.3232 70.7924 42.1759C70.8372 42.1187 70.8709 42.0535 70.8945 41.9806C70.9185 41.9072 70.9328 41.8125 70.9397 41.6971C70.9476 41.6056 70.9559 41.474 70.9651 41.3009C70.9748 41.1272 70.9799 41.0077 70.9808 40.9439V38.2015C70.9831 37.525 70.9106 37.0245 70.7573 36.7063C70.5251 36.2058 70.1049 35.955 69.5092 35.9527C68.8452 35.9504 68.3155 36.2667 67.923 36.8915C67.7753 37.1275 67.6607 37.3962 67.5781 37.6959C67.495 37.9965 67.453 38.292 67.4516 38.5829V40.943C67.4465 41.3641 67.464 41.6777 67.5047 41.8813C67.5462 42.091 67.6455 42.2383 67.8099 42.3061C67.9535 42.3652 68.1673 42.3957 68.4462 42.4008V42.5929L65.5117 42.5924C65.2513 42.6012 64.7558 42.6146 64.5101 42.6114C64.2525 42.6077 64.1283 42.5804 63.8932 42.5629C63.6845 42.5019 63.5968 42.4474 63.528 42.3108ZM60.068 40.8082C60.073 41.2524 60.1811 41.6135 60.3967 41.8859C60.6128 42.1598 60.9056 42.3001 61.2667 42.3071C61.6315 42.302 61.9764 42.2069 62.2992 42.0221C62.6211 41.8374 62.8746 41.5913 63.0583 41.2852C63.1706 41.0898 63.2523 40.8386 63.3035 40.5343C63.3543 40.2314 63.3797 39.8546 63.3788 39.4044V38.7048C62.7254 38.7612 62.2581 38.8226 61.9183 38.8946C61.5761 38.9671 61.2741 39.0706 61.0109 39.2059C60.3861 39.5162 60.0726 40.0541 60.068 40.8082Z" fill="#3A3A3A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.65791 38.476V40.9071C2.65283 41.2973 2.675 41.5869 2.72487 41.7757C2.7752 41.965 2.88325 42.0897 3.04995 42.1507C3.21665 42.2121 3.47246 42.2463 3.8174 42.2532V42.5926H0V42.2532C0.325544 42.2463 0.566123 42.2121 0.722199 42.1507C0.878275 42.0897 0.979401 41.965 1.02558 41.7757C1.07175 41.5869 1.09207 41.2973 1.08699 40.9071V34.5163C1.09207 34.1261 1.07175 33.8362 1.02742 33.6468C0.982634 33.4575 0.885663 33.3314 0.736514 33.2686C0.586902 33.2054 0.357867 33.1684 0.0480235 33.1569V32.817H3.68488C4.91086 32.812 5.80853 33.0285 6.37927 33.4658C6.94955 33.9036 7.23122 34.5934 7.22476 35.5354C7.22845 36.8598 6.71312 37.7265 5.67831 38.1361C5.40818 38.2418 5.0637 38.3245 4.64534 38.3845C4.22699 38.4441 3.76199 38.4746 3.24989 38.476H2.65791ZM2.65791 38.0968H3.28637C4.04136 38.0945 4.59686 37.9158 4.95334 37.5612C5.14728 37.3557 5.29412 37.087 5.39433 36.754C5.49453 36.4216 5.54486 36.0415 5.54532 35.6139C5.54117 34.0042 4.83652 33.1985 3.43091 33.1961H2.65791V38.0968Z" fill="#3A3A3A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.371 38.8864H8.92881C8.93388 39.3602 8.96159 39.7578 9.01238 40.0787C9.06272 40.3991 9.14399 40.6924 9.25573 40.9579C9.62468 41.8177 10.1945 42.2471 10.9656 42.2471C11.4025 42.2448 11.7987 42.1164 12.1538 41.8616C12.5093 41.6067 12.8044 41.2405 13.0404 40.7621L13.3548 40.9708C13.0454 41.5863 12.6677 42.0384 12.2216 42.327C11.7756 42.6156 11.2312 42.7583 10.5884 42.7555C9.57712 42.7426 8.64759 42.4194 8.06485 41.7867C7.48256 41.1537 7.18565 40.2865 7.1741 39.1861C7.18565 38.0774 7.47286 37.2005 8.03529 36.5545C8.59726 35.909 9.49539 35.5788 10.4628 35.5645C11.1065 35.5663 11.7276 35.7127 12.1685 36.0041C12.6095 36.2959 12.9346 36.7226 13.1447 37.2841C13.2131 37.4706 13.2648 37.684 13.3003 37.9241C13.3354 38.1642 13.359 38.4851 13.371 38.8864ZM8.94127 38.5087H11.7202C11.7091 38.107 11.6874 37.7833 11.6555 37.5381C11.6241 37.2929 11.5742 37.0735 11.5064 36.8805C11.2718 36.1962 10.9112 35.8577 10.4254 35.8642C9.8805 35.8688 9.47369 36.2507 9.2054 37.0107C9.13706 37.2074 9.08211 37.4231 9.04055 37.6572C8.99899 37.8913 8.96575 38.1753 8.94127 38.5087Z" fill="#3A3A3A"/>
<path d="M13.655 35.7509L16.119 35.5805C16.1319 35.8262 16.1421 36.033 16.1486 36.1997C16.155 36.3669 16.1583 36.5147 16.1583 36.6421V37.0355C16.6935 36.057 17.3399 35.563 18.0981 35.5542C18.4255 35.5606 18.6915 35.6562 18.8961 35.8409C19.1002 36.0256 19.2059 36.2625 19.2119 36.5507C19.2073 36.7903 19.1186 36.9824 18.9464 37.127C18.7746 37.2719 18.5488 37.3463 18.2685 37.35C17.9319 37.3606 17.7269 37.2212 17.6525 36.9307C17.6041 36.7511 17.5537 36.6287 17.5015 36.5636C17.4498 36.4985 17.3732 36.468 17.2725 36.4717H17.2462C16.9885 36.4939 16.7438 36.6989 16.5124 37.0877C16.4076 37.2821 16.3287 37.4964 16.276 37.7319C16.2238 37.9669 16.1975 38.237 16.1975 38.5427V40.9674C16.1924 41.3544 16.2114 41.6398 16.2539 41.8231C16.2963 42.0064 16.3928 42.1265 16.5434 42.1833C16.6935 42.2396 16.928 42.2715 17.2462 42.2779V42.5928H13.6029V42.2779C13.8998 42.2793 14.1196 42.2507 14.2627 42.1916C14.4059 42.1329 14.4987 42.0101 14.5416 41.8231C14.5841 41.6356 14.603 41.3507 14.5989 40.9674V37.3366C14.6109 36.7963 14.5569 36.4454 14.4364 36.2833C14.3163 36.1212 14.0554 36.0487 13.655 36.0654V35.7509Z" fill="#3A3A3A"/>
<path d="M22.139 35.581L22.1524 36.8785C22.6829 36.0049 23.443 35.5634 24.4326 35.5546C25.4397 35.5482 26.0598 36.0067 26.2935 36.9312C26.5784 36.4551 26.9034 36.106 27.2682 35.8839C27.6335 35.6622 28.0597 35.5523 28.5478 35.5546C29.3189 35.5593 29.8869 35.8123 30.2517 36.3147C30.3944 36.505 30.4955 36.7377 30.5565 37.0129C30.617 37.2881 30.6465 37.645 30.6447 38.0842V40.9674C30.6405 41.3507 30.6594 41.6356 30.7019 41.8226C30.7449 42.0101 30.8377 42.1329 30.9808 42.1916C31.124 42.2507 31.3438 42.2793 31.6411 42.2779V42.5928H28.0893V42.2779C28.3732 42.2793 28.5838 42.2507 28.7214 42.1916C28.859 42.1329 28.9486 42.0101 28.9902 41.8226C29.0317 41.6356 29.0502 41.3507 29.046 40.9674V38.0971C29.0488 37.4086 28.9643 36.9118 28.7921 36.6065C28.6194 36.3013 28.3418 36.1517 27.9581 36.1577C27.4973 36.1489 27.1085 36.3891 26.7917 36.8785C26.5188 37.2872 26.383 37.7282 26.3853 38.2024V40.9674C26.3812 41.3507 26.3997 41.6356 26.4417 41.8226C26.4832 42.0101 26.5742 42.1329 26.7137 42.1916C26.8531 42.2507 27.0669 42.2793 27.3551 42.2779V42.5928H23.8429V42.2779C24.1269 42.2793 24.3379 42.2507 24.475 42.1916C24.6126 42.1329 24.7022 42.0101 24.7438 41.8226C24.7853 41.6356 24.8038 41.3507 24.7997 40.9674V38.0842C24.8061 36.7866 24.4524 36.1443 23.7381 36.1577C23.2934 36.1734 22.9207 36.3844 22.6206 36.7899C22.3204 37.1958 22.1644 37.7014 22.1524 38.3072V40.9674C22.1482 41.3549 22.1667 41.6421 22.2082 41.8286C22.2493 42.0156 22.3389 42.1376 22.4765 42.1948C22.6141 42.2521 22.8247 42.2798 23.1087 42.2779V42.5928H19.5568V42.2779C19.8542 42.2798 20.074 42.2521 20.2171 42.1948C20.3603 42.1376 20.4535 42.0156 20.496 41.8286C20.5385 41.6421 20.5574 41.3549 20.5533 40.9674V37.3241C20.5667 36.7908 20.5136 36.4454 20.3926 36.287C20.2721 36.1291 20.0024 36.0552 19.5836 36.0658V35.7514L22.139 35.581Z" fill="#3A3A3A"/>
<path d="M40.9592 36.1807V40.5582C40.9587 40.8431 40.9693 41.0791 40.9901 41.2656C41.0113 41.4522 41.0446 41.6097 41.0903 41.7376C41.1457 41.8839 41.2311 42.0008 41.3475 42.088C41.4634 42.1753 41.5918 42.2206 41.7321 42.2224C42.012 42.2183 42.3177 42.083 42.6497 41.8161L42.833 42.1439C42.307 42.5849 41.7081 42.8033 41.0377 42.7992C40.3145 42.7881 39.8209 42.548 39.5568 42.0784C39.5051 41.9745 39.4644 41.8558 39.4358 41.7228C39.4072 41.5898 39.3873 41.4102 39.3762 41.1844C39.3651 40.9581 39.3596 40.6529 39.3601 40.2696V36.1807H38.6129V35.7877C38.8983 35.7767 39.1403 35.7166 39.3388 35.6072C39.5374 35.4978 39.7105 35.3264 39.8583 35.0928C39.9742 34.915 40.0698 34.7169 40.1451 34.4999C40.2199 34.2824 40.2859 34.0127 40.3432 33.6904L40.9984 33.6248C40.9896 33.7985 40.9822 33.9744 40.9767 34.1526C40.9707 34.3309 40.9665 34.5456 40.9638 34.7968C40.9605 35.0475 40.9592 35.3694 40.9592 35.761H42.5449V36.1807H40.9592Z" fill="#3A3A3A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.6066 42.3151V42.5922C38.2228 42.6176 38.0681 42.6171 37.665 42.6176C37.345 42.6181 37.0139 42.6125 36.7392 42.5091C36.5693 42.4454 36.4741 42.3909 36.3476 42.257C36.259 42.1166 36.2026 42.1092 36.174 41.7181C35.836 42.0833 35.4837 42.3521 35.1179 42.5239C34.7518 42.6961 34.3565 42.7811 33.933 42.7797C33.3041 42.7728 32.8123 42.5991 32.4573 42.2583C32.1017 41.9176 31.9211 41.4493 31.9147 40.8527C31.9124 39.7279 32.6119 39.0288 34.012 38.7559C34.6432 38.6335 35.3594 38.5508 36.1611 38.507V37.655C36.168 36.9725 36.0955 36.4992 35.945 36.2365C35.7944 35.9733 35.5257 35.8477 35.1387 35.8597C34.7282 35.8509 34.4354 35.9991 34.2609 36.3053C34.1972 36.4101 34.151 36.5311 34.1214 36.6673C34.0924 36.8035 34.0688 36.9929 34.0513 37.2357C34.0406 37.4689 33.9728 37.6347 33.8481 37.7335C33.7229 37.8323 33.5239 37.8804 33.2515 37.8781C32.6443 37.8734 32.3386 37.6726 32.334 37.275C32.3363 37.0432 32.4078 36.822 32.5491 36.6114C32.69 36.4009 32.8895 36.2157 33.1471 36.0559C33.6929 35.7198 34.4091 35.554 35.2962 35.5582C36.1985 35.554 36.8449 35.7327 37.236 36.0956C37.412 36.2614 37.5413 36.4734 37.6239 36.731C37.707 36.9887 37.7477 37.3184 37.7472 37.7206L37.7209 40.0008C37.7098 40.3743 37.7057 40.6103 37.7075 40.7087C37.7029 41.1811 37.7181 41.5265 37.7523 41.7439C37.7865 41.9619 37.8243 42.0575 37.9675 42.1757C38.2178 42.3188 38.432 42.3147 38.6066 42.3151ZM36.1611 39.8175V38.8085C35.2228 38.8722 34.5574 39.0459 34.1644 39.3294C33.7714 39.6129 33.5807 40.0553 33.5923 40.6565C33.5964 41.1279 33.6934 41.502 33.8823 41.7786C34.0716 42.0552 34.3288 42.1965 34.6539 42.2029C34.9208 42.2002 35.1669 42.1235 35.3927 41.9716C35.6185 41.8206 35.7963 41.6091 35.9251 41.3381C36.0096 41.1718 36.0701 40.9696 36.107 40.7299C36.144 40.4903 36.162 40.1864 36.1611 39.8175Z" fill="#3A3A3A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.8911 42.3151V42.5922C49.5073 42.6176 49.3527 42.6181 48.9495 42.6185C48.6295 42.619 48.2985 42.6134 48.0237 42.51C47.8538 42.4463 47.7586 42.3918 47.6321 42.2579C47.5435 42.1175 47.4871 42.1101 47.4585 41.719C47.1205 42.0843 46.7682 42.353 46.402 42.5248C46.0363 42.697 45.641 42.782 45.2176 42.7806C44.5886 42.7737 44.0969 42.6001 43.7418 42.2593C43.3862 41.9185 43.2057 41.4503 43.1992 40.8537C43.1969 39.7288 43.896 39.0297 45.2965 38.7568C45.9278 38.6344 46.6439 38.5518 47.4456 38.5079V37.656C47.4525 36.9735 47.38 36.5002 47.2295 36.2374C47.0785 35.9742 46.8097 35.8486 46.4232 35.8606C46.0127 35.8518 45.72 36.0001 45.5454 36.3062C45.4817 36.411 45.4351 36.532 45.406 36.6682C45.3769 36.8045 45.3533 36.9938 45.3358 37.2367C45.3252 37.4699 45.2573 37.6356 45.1326 37.7349C45.0075 37.8333 44.8084 37.8813 44.536 37.879C43.9288 37.8744 43.6231 37.6735 43.6185 37.2759C43.6208 37.0441 43.6924 36.8229 43.8337 36.6124C43.9745 36.4018 44.174 36.2166 44.4312 36.0569C44.9774 35.7207 45.6936 35.5549 46.5807 35.5591C47.483 35.5549 48.1294 35.7336 48.5206 36.0966C48.6965 36.2623 48.8258 36.4743 48.9084 36.732C48.9916 36.9896 49.0322 37.3193 49.0317 37.7215L49.0054 40.0017C48.9943 40.3753 48.9902 40.6112 48.992 40.7096C48.9874 41.182 49.0026 41.5274 49.0368 41.7453C49.071 41.9628 49.1088 42.0584 49.252 42.1766C49.5023 42.3198 49.7165 42.3147 49.8911 42.3151ZM47.4456 39.8184V38.8094C46.5073 38.8732 45.8414 39.0468 45.4489 39.3303C45.0559 39.6138 44.8652 40.0562 44.8768 40.6574C44.8809 41.1289 44.9779 41.5029 45.1668 41.7795C45.3561 42.0561 45.6133 42.1974 45.9384 42.2039C46.2053 42.2011 46.4514 42.1244 46.6772 41.9725C46.903 41.8211 47.0803 41.61 47.2096 41.3385C47.2941 41.1732 47.3546 40.9705 47.3915 40.7308C47.4285 40.4916 47.4465 40.1873 47.4456 39.8184Z" fill="#3A3A3A"/>
<path d="M26.3927 9.80802L26.3609 10.4281L38.2584 24.3848L38.6856 24.4546L38.7395 24.4279L38.9483 24.041L33.8745 7.05786L33.0134 6.47754L26.3927 9.80802Z" fill="#0097B9"/>
<path d="M45.4856 6.14116L53.1785 9.67814L53.1927 10.676L40.5679 29.7995L39.9916 29.9515L39.9065 29.9124L39.7266 29.4812L44.8151 6.51387L45.4856 6.14116Z" fill="#80B13A"/>
<path d="M33.7345 0.699916L34.0408 0.109947L43.8899 0.00329856L44.5264 0.664178L39.8078 16.4294L39.5088 16.603L39.4992 16.6024L39.1758 16.3846L33.7345 0.699916Z" fill="#D81936"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.9112 11.1063L38.7097 24.4917L38.2417 24.4152L26.3289 10.4221L29.9112 11.1063Z" fill="#005874"/>
<path d="M33.0258 6.46259L33.8841 7.04518L31.2185 10.5895L29.9807 10.0483L33.0258 6.46259Z" fill="#2FB8E7"/>
<path d="M29.9807 10.0483L29.9112 11.1063L26.3289 10.4221L26.3666 9.80685L29.9807 10.0483Z" fill="#007592"/>
<path d="M31.2185 10.5895L33.8896 7.03994L39.0274 24.0373L38.7659 24.4769L31.2185 10.5895Z" fill="#007592"/>
<path d="M53.2192 10.6736L40.6046 29.8385L39.9596 30.0263L48.0677 11.1121L53.2192 10.6736Z" fill="#6E9123"/>
<path d="M46.615 10.3132L39.8871 29.9671L39.6976 29.4849L44.806 6.49426L46.615 10.3132Z" fill="#3F7937"/>
<path d="M53.1988 9.67781L53.2192 10.6736L48.0677 11.1121L47.7773 9.74816L53.1988 9.67781Z" fill="#A5C550"/>
<path d="M47.7773 9.74816L46.6146 10.3119L44.805 6.49245L45.4698 6.11748L47.7773 9.74816Z" fill="#5D8B27"/>
<path d="M38.2598 1.76029L37.5502 2.59873L33.7012 0.681894L34.0121 0.0987324L38.2598 1.76029Z" fill="#AF2C35"/>
<path d="M33.7012 0.681894L37.5502 2.59873L39.5017 16.6349L39.1602 16.4023L33.7012 0.681894Z" fill="#762624"/>
<path d="M39.4019 2.60073L44.5437 0.657231L39.8319 16.4508L39.5086 16.6346L39.4019 2.60073Z" fill="#B22B37"/>
<path d="M38.2598 1.76029L39.4019 2.60073L44.5437 0.657231L43.9003 0L38.2598 1.76029Z" fill="#DC505E"/>
</g>
<defs>
<clipPath id="clip0_3802_9601">
<rect width="80" height="42.7992" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

8
client_app/assets/payment_icons/placeholder.svg Normal file
View File

@@ -0,0 +1,8 @@
<!-- Generic payment-card glyph — falls back from missing brand icons. Mono-color
so it can be tinted via ColorFilter at the call site. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<path d="M3 7.5C3 6.119 4.119 5 5.5 5h13C19.881 5 21 6.119 21 7.5v9c0 1.381-1.119 2.5-2.5 2.5h-13C4.119 19 3 17.881 3 16.5v-9z"
stroke="currentColor" stroke-width="1.5"/>
<path d="M3 10h18" stroke="currentColor" stroke-width="1.5"/>
<rect x="6" y="14" width="5" height="2" rx="1" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 543 B

18
client_app/assets/payment_icons/qris.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg width="80" height="30" viewBox="0 0 80 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3802_26543)">
<path d="M76.7227 10.4773H64.024V7.936H76.7227V2.856H56.4053V15.5547H69.104V18.096H56.4053V23.176H76.7227V10.4773Z" fill="black"/>
<path d="M53.8667 2.856H48.7867V23.1733H53.8667V2.856Z" fill="black"/>
<path d="M25.9307 2.856V7.936H41.168V10.4773H25.9307V23.176H31.008V15.632L38.6293 23.176H46.248L38.2987 15.5547H46.248V2.856H25.9307Z" fill="black"/>
<path d="M10.6907 15.5547H15.7573V10.488H10.6907V15.5547ZM11.9627 11.7467H14.5013V14.2853H11.9627V11.7467Z" fill="black"/>
<path d="M8.152 2.856H3.70667C3.53867 2.85728 3.37786 2.92428 3.25867 3.04267C3.19937 3.10176 3.15234 3.172 3.12031 3.24935C3.08827 3.3267 3.07185 3.40962 3.072 3.49333V22.5387C3.07185 22.6224 3.08827 22.7053 3.12031 22.7827C3.15234 22.86 3.19937 22.9302 3.25867 22.9893C3.37813 23.107 3.539 23.1731 3.70667 23.1733H15.7707V18.1067H8.152V2.856Z" fill="black"/>
<path d="M22.7547 2.856H10.6907V7.936H18.312V15.5547H23.3787V3.49333C23.3802 3.32555 23.3161 3.16381 23.2 3.04267C23.081 2.92563 22.9216 2.8588 22.7547 2.856Z" fill="black"/>
<path d="M23.392 18.096H18.312V29.5253H23.392V18.096Z" fill="black"/>
<path d="M10.16 0H0.634667C0.466559 0.000701921 0.305536 0.0677938 0.186665 0.186665C0.0677938 0.305536 0.000701921 0.466559 0 0.634667V10.16H1.26933V1.89333C1.27281 1.72708 1.34113 1.56878 1.4597 1.4522C1.57827 1.33562 1.73772 1.26999 1.904 1.26933H10.1707L10.16 0Z" fill="black"/>
<path d="M78.7307 16.5067V24.7733C78.73 24.9414 78.6629 25.1025 78.544 25.2213C78.4251 25.3402 78.2641 25.4073 78.096 25.408H69.8293V26.6667H79.3547C79.4388 26.6677 79.5223 26.6521 79.6004 26.6207C79.6785 26.5893 79.7496 26.5428 79.8096 26.4838C79.8696 26.4248 79.9173 26.3545 79.95 26.2769C79.9826 26.1994 79.9997 26.1161 80 26.032V16.5067H78.7307Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_3802_26543">
<rect width="80" height="29.5253" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

20
client_app/assets/payment_icons/shopeepay.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg width="80" height="36" viewBox="0 0 80 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3802_18175)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.9554 0.00732258L1.05561 3.19434C1.05561 3.19434 0 3.31692 0 4.58885V27.2859C0 27.2859 0.144209 29.9422 3.17981 29.9422H30.2666C30.2666 29.9422 32.6807 29.3654 32.6807 26.9485V8.22003C32.6807 8.22003 32.7282 5.5637 29.5427 5.5637H3.42208C3.11467 5.4987 2.83195 5.34801 2.6066 5.12904C2.38126 4.91008 2.22251 4.6318 2.14871 4.32639C2.0694 3.90529 2.23957 3.86203 2.68517 3.86203H26.67V1.27492C26.67 1.27492 26.5849 -0.112371 24.9554 0.00732258Z" fill="#E8451E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.8249 26.0904C14.8434 26.0904 13.384 25.2829 11.231 23.1529C11.0547 22.9688 10.9572 22.7232 10.9593 22.4683C10.9614 22.2134 11.063 21.9694 11.2424 21.7884C11.4218 21.6073 11.6648 21.5034 11.9197 21.4989C12.1745 21.4944 12.4211 21.5895 12.6068 21.7642C14.8737 24.0052 15.9236 24.5618 17.7348 24.0715C18.7876 23.7831 19.7321 22.4448 19.7869 20.9061C19.8302 19.7106 18.9866 18.9304 17.2806 18.5887C14.2176 17.9758 12.4092 16.8048 11.9073 15.106C11.5036 13.7389 12.0343 12.2117 13.3624 10.924L13.4172 10.8749C16.2726 8.48826 19.5879 10.2664 20.9421 11.5412C21.1228 11.7206 21.2263 11.9634 21.2308 12.218C21.2352 12.4725 21.1402 12.7188 20.9659 12.9044C20.7915 13.09 20.5517 13.2003 20.2973 13.2118C20.043 13.2233 19.7941 13.1351 19.6038 12.966C19.4899 12.8592 16.9244 10.5288 14.7007 12.3516C13.9407 13.103 13.5975 13.9264 13.7849 14.558C14.0561 15.4781 15.4347 16.2308 17.6656 16.6779C21.4569 17.4364 21.7799 19.9413 21.7424 20.9825C21.6617 23.2509 19.7639 25.7919 17.9829 26.0169C17.5988 26.0658 17.212 26.0904 16.8249 26.0904Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M42.7335 5.4267C42.301 5.16259 41.8328 4.96201 41.3433 4.83112C40.3338 4.5427 39.6056 4.17352 39.258 3.70196C38.948 3.29241 38.948 2.75883 39.3201 2.07528C39.5306 1.66573 40.0411 1.40615 40.6972 1.35424C41.5277 1.32131 42.3515 1.51419 43.081 1.91232C43.1862 1.96491 43.308 1.97357 43.4195 1.93638C43.5311 1.89919 43.6233 1.81922 43.6759 1.71404C43.7285 1.60886 43.7371 1.4871 43.6999 1.37554C43.6628 1.26398 43.5828 1.17176 43.4776 1.11917C42.4609 0.597138 41.4587 0.398129 40.6237 0.461581C39.6546 0.535128 38.8932 0.95766 38.5269 1.63977C37.9674 2.67086 38.0049 3.51449 38.5269 4.22111C39.01 4.85419 39.8911 5.33873 41.0953 5.6733C41.5074 5.78805 41.9033 5.95475 42.2735 6.16938C42.745 6.45779 43.0551 6.79092 43.205 7.15C43.3486 7.48899 43.369 7.86756 43.2627 8.22003C43.2046 8.40269 43.1252 8.5779 43.0262 8.74207C43.0262 8.76658 43.0017 8.7911 42.9772 8.82859C42.6167 9.36216 42.0341 9.63472 41.326 9.63472C40.5444 9.63472 39.5883 9.32467 38.5716 8.70457C38.4274 8.61805 38.2832 8.53008 38.1621 8.44355C38.0634 8.37777 37.9426 8.35388 37.8263 8.37714C37.71 8.40039 37.6077 8.4689 37.542 8.56757C37.4762 8.66625 37.4523 8.78702 37.4755 8.90331C37.4988 9.0196 37.5673 9.12189 37.666 9.18767C37.8116 9.27948 37.9522 9.37914 38.0871 9.48618C39.2537 10.1943 40.3584 10.5404 41.3015 10.5404C42.3196 10.5404 43.1632 10.1438 43.6968 9.34919C43.7184 9.30589 43.7435 9.26442 43.7718 9.22517C43.9158 8.99307 44.0283 8.74284 44.1063 8.48105C44.2729 7.93272 44.2376 7.34287 44.0068 6.81832C43.7387 6.23248 43.2933 5.74569 42.7335 5.4267Z" fill="#E8451E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.5719 4.44608C49.0637 4.32126 48.531 4.33822 48.0317 4.49511C47.4631 4.67076 46.9385 4.96574 46.493 5.36036V0.884114C46.4866 0.770127 46.4367 0.66294 46.3537 0.584534C46.2707 0.506128 46.1609 0.462446 46.0467 0.462446C45.9325 0.462446 45.8227 0.506128 45.7397 0.584534C45.6567 0.66294 45.6069 0.770127 45.6004 0.884114V10.1048C45.6069 10.2188 45.6567 10.326 45.7397 10.4044C45.8227 10.4828 45.9325 10.5265 46.0467 10.5265C46.1609 10.5265 46.2707 10.4828 46.3537 10.4044C46.4367 10.326 46.4866 10.2188 46.493 10.1048V6.65392C46.5019 6.64698 46.5101 6.63926 46.5176 6.63084C47.0771 5.94729 47.6972 5.5262 48.2928 5.34017C48.6343 5.2295 48.9999 5.21652 49.3484 5.30268C49.632 5.37955 49.8811 5.55038 50.055 5.78722C50.2486 6.08717 50.3439 6.44004 50.3275 6.79668V10.0947C50.3275 10.2133 50.3746 10.327 50.4585 10.4109C50.5423 10.4947 50.656 10.5418 50.7746 10.5418C50.8931 10.5418 51.0069 10.4947 51.0907 10.4109C51.1745 10.327 51.2216 10.2133 51.2216 10.0947V6.79236C51.237 6.25299 51.0804 5.72271 50.7746 5.27816C50.4824 4.86958 50.0572 4.57539 49.5719 4.44608Z" fill="#E8451E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M57.1659 9.01318C56.7502 9.42611 56.188 9.65785 55.602 9.65785C55.016 9.65785 54.4538 9.42611 54.038 9.01318C53.6251 8.59741 53.3934 8.03521 53.3934 7.44923C53.3934 6.86325 53.6251 6.30105 54.038 5.88529C54.4554 5.47431 55.017 5.24295 55.6027 5.24067C56.0396 5.24095 56.4667 5.37071 56.83 5.61356C57.1932 5.8564 57.4763 6.20145 57.6436 6.60511C57.8109 7.00877 57.8548 7.45295 57.7698 7.88155C57.6847 8.31014 57.4746 8.70393 57.1659 9.01318ZM55.6027 4.35955C54.7948 4.37701 54.0259 4.71019 53.4607 5.28772C52.8956 5.86525 52.5791 6.64117 52.5791 7.44923C52.5791 8.2573 52.8956 9.03322 53.4607 9.61075C54.0259 10.1883 54.7948 10.5215 55.6027 10.5389C56.4106 10.5215 57.1795 10.1883 57.7447 9.61075C58.3098 9.03322 58.6264 8.2573 58.6264 7.44923C58.6264 6.64117 58.3098 5.86525 57.7447 5.28772C57.1795 4.71019 56.4106 4.37701 55.6027 4.35955Z" fill="#E8451E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M64.6864 9.01318C64.2705 9.42591 63.7092 9.65893 63.1232 9.66212C62.6863 9.66184 62.2592 9.53208 61.896 9.28924C61.5327 9.04639 61.2496 8.70135 61.0823 8.29768C60.915 7.89402 60.8711 7.44984 60.9562 7.02125C61.0412 6.59265 61.2513 6.19886 61.56 5.88961C61.9766 5.47846 62.5379 5.24704 63.1232 5.245C63.5593 5.24613 63.9852 5.37619 64.3476 5.61882C64.7099 5.86146 64.9924 6.20582 65.1595 6.6086C65.3265 7.01138 65.3708 7.45457 65.2866 7.88244C65.2025 8.3103 64.9936 8.70371 64.6864 9.01318ZM63.1347 4.35955C62.7291 4.35908 62.3273 4.43885 61.9526 4.59428C61.5779 4.74971 61.2376 4.97772 60.9514 5.26518C60.9151 5.29503 60.8818 5.32836 60.8519 5.36469V4.8066C60.8519 4.68804 60.8048 4.57433 60.721 4.49049C60.6371 4.40665 60.5234 4.35955 60.4049 4.35955C60.2863 4.35955 60.1726 4.40665 60.0888 4.49049C60.0049 4.57433 59.9578 4.68804 59.9578 4.8066V13.5918C59.9578 13.7104 60.0049 13.8241 60.0888 13.9079C60.1726 13.9918 60.2863 14.0389 60.4049 14.0389C60.5234 14.0389 60.6371 13.9918 60.721 13.9079C60.8048 13.8241 60.8519 13.7104 60.8519 13.5918V9.53378C60.8879 9.56399 60.9212 9.59729 60.9514 9.63328C61.3107 9.99238 61.753 10.2573 62.2391 10.4047C62.7252 10.552 63.2402 10.5772 63.7384 10.478C64.2366 10.3788 64.7026 10.1582 65.0952 9.83592C65.4878 9.51359 65.7948 9.09942 65.9891 8.63009C66.1834 8.16075 66.259 7.65074 66.2091 7.14523C66.1592 6.63972 65.9855 6.15431 65.7032 5.732C65.4209 5.30968 65.0389 4.9635 64.5909 4.7241C64.1428 4.48471 63.6427 4.35949 63.1347 4.35955Z" fill="#E8451E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M68.4993 6.7664C68.6098 6.40543 68.808 6.07744 69.0762 5.81174C69.2513 5.63445 69.4599 5.4937 69.6899 5.39764C69.9199 5.30157 70.1666 5.25211 70.4159 5.25211C70.6651 5.25211 70.9118 5.30157 71.1418 5.39764C71.3718 5.4937 71.5804 5.63445 71.7556 5.81174C72.022 6.08244 72.2258 6.40833 72.3526 6.7664H68.4993ZM72.3843 5.1801C72.1292 4.91877 71.8241 4.71154 71.4871 4.57081C71.1501 4.43007 70.7883 4.35871 70.4231 4.361C70.0574 4.3549 69.6943 4.42452 69.3568 4.56548C69.0193 4.70644 68.7146 4.9157 68.4618 5.1801C67.3947 6.33377 67.4077 7.57542 67.8288 8.82859C68.0172 9.36277 68.3858 9.81458 68.8714 10.1063C69.3653 10.4143 69.9411 10.5652 70.5226 10.5389C71.2326 10.5127 71.9312 10.3527 72.5819 10.0673C72.639 10.0469 72.6912 10.0149 72.7355 9.97352C72.7799 9.93212 72.8152 9.88211 72.8395 9.82656C72.8638 9.771 72.8766 9.71107 72.8769 9.65044C72.8772 9.5898 72.8652 9.52973 72.8415 9.47391C72.8178 9.41809 72.783 9.36769 72.7391 9.3258C72.6953 9.2839 72.6434 9.2514 72.5865 9.23027C72.5297 9.20915 72.4692 9.19984 72.4086 9.20293C72.348 9.20602 72.2887 9.22144 72.2343 9.24824C71.6903 9.49802 71.1021 9.63723 70.5038 9.65779C70.0945 9.67236 69.6897 9.56927 69.3372 9.36072C69.0246 9.14782 68.7826 8.84657 68.6421 8.49547C68.547 8.23033 68.4807 7.95571 68.4445 7.67636H72.5516C72.7751 7.67636 73.5077 7.72539 73.1284 6.47222C72.9922 5.98508 72.7352 5.54018 72.3814 5.17866L72.3843 5.1801Z" fill="#E8451E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M75.2772 6.7664C75.387 6.40513 75.5853 6.07699 75.854 5.81174C76.0293 5.63441 76.238 5.49363 76.4681 5.39754C76.6982 5.30146 76.9451 5.25199 77.1944 5.25199C77.4438 5.25199 77.6906 5.30146 77.9207 5.39754C78.1508 5.49363 78.3596 5.63441 78.5349 5.81174C78.8008 6.08259 79.0041 6.40846 79.1304 6.7664H75.2772ZM80.0044 7.2322V6.90629C79.9841 6.75953 79.9513 6.61479 79.9063 6.47366C79.7716 5.98493 79.515 5.53837 79.1607 5.17578C78.906 4.91435 78.6011 4.70705 78.2644 4.5663C77.9276 4.42555 77.5659 4.35425 77.2009 4.35667C76.8352 4.35048 76.4721 4.42006 76.1346 4.56103C75.7971 4.702 75.4924 4.9113 75.2397 5.17578C74.1725 6.32945 74.184 7.57109 74.6066 8.82427C74.7946 9.35868 75.1634 9.81062 75.6492 10.102C76.1431 10.41 76.7189 10.5608 77.3004 10.5346C78.0104 10.5084 78.7091 10.3484 79.3597 10.063C79.4168 10.0425 79.4691 10.0106 79.5134 9.9692C79.5577 9.9278 79.5931 9.87779 79.6174 9.82223C79.6417 9.76668 79.6544 9.70675 79.6547 9.64611C79.6551 9.58548 79.643 9.52541 79.6194 9.46959C79.5957 9.41377 79.5608 9.36337 79.517 9.32147C79.4732 9.27958 79.4212 9.24708 79.3644 9.22595C79.3075 9.20482 79.247 9.19552 79.1864 9.19861C79.1259 9.2017 79.0666 9.21712 79.0122 9.24392C78.4682 9.49369 77.88 9.6329 77.2817 9.65347C76.8724 9.66804 76.4675 9.56494 76.115 9.3564C75.8021 9.14388 75.56 8.84252 75.4199 8.49114C75.325 8.22587 75.2583 7.95131 75.2209 7.67204H79.3295C79.4924 7.67348 79.925 7.69944 80 7.2322H80.0044Z" fill="#E8451E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M45.0307 22.0641H40.393V15.3252H44.575C44.6468 15.3247 44.7186 15.3286 44.7899 15.3368C45.4273 15.4074 48.2105 15.8891 48.2105 18.8742C48.2105 22.0612 45.0279 22.0612 45.0279 22.0612L45.0307 22.0641ZM44.2116 12.7569H37.7828V29.9422H40.393V24.8127H44.4914C45.8669 24.8261 47.2206 24.4695 48.411 23.7802C49.817 22.9481 51.2216 21.4815 51.2216 18.9463C51.2216 16.5683 49.9872 15.0599 48.6749 14.1268C47.3652 13.218 45.8057 12.7383 44.2116 12.754V12.7569Z" fill="#E8451E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M57.6837 27.5758C56.9189 27.5758 56.1714 27.3491 55.5355 26.9243C54.8996 26.4996 54.4038 25.8959 54.1109 25.1895C53.818 24.4831 53.7411 23.7058 53.8899 22.9557C54.0386 22.2056 54.4064 21.5164 54.9468 20.9753C55.4871 20.4341 56.1757 20.0653 56.9256 19.9154C57.6755 19.7655 58.4529 19.8413 59.1598 20.1332C59.8666 20.425 60.471 20.9198 60.8967 21.5551C61.3224 22.1904 61.5502 22.9376 61.5513 23.7023V23.7124C61.5506 24.7375 61.1427 25.7204 60.4174 26.4449C59.6921 27.1694 58.7088 27.5761 57.6837 27.5758ZM61.5513 17.7263V18.9362C60.6493 18.2041 59.5584 17.7426 58.4049 17.6051C57.2514 17.4676 56.0825 17.6598 55.0337 18.1593C53.9849 18.6588 53.0991 19.4453 52.4789 20.4276C51.8588 21.4099 51.5296 22.5478 51.5296 23.7095C51.5296 24.8712 51.8588 26.0091 52.4789 26.9914C53.0991 27.9737 53.9849 28.7602 55.0337 29.2597C56.0825 29.7593 57.2514 29.9514 58.4049 29.8139C59.5584 29.6764 60.6493 29.2149 61.5513 28.4828V29.8514H64.1586V17.7263H61.5513Z" fill="#E8451E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M65.3325 17.5605H68.8195L72.9107 25.391L76.8577 17.5605H80V17.5821L70.6293 35.0242H67.5591L71.1369 28.542L65.3325 17.5605Z" fill="#E8451E"/>
</g>
<defs>
<clipPath id="clip0_3802_18175">
<rect width="80.0044" height="35.0242" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

73
client_app/lib/features/auth/screens/register_screen.dart
View File

@@ -11,7 +11,6 @@ import '../../../core/theme/widgets/widgets.dart';
/// S3a — WhatsApp input screen.
///
/// Visual contract is `Figma/screens/onboarding.jsx::S3Phone`:
/// - HaloStepDots at the top (step 3 of 4: S2 Nama → S5 ESP → S5b USP → S3a)
/// - Personalised display-title `"nomor wa-mu, {name}?"`
/// - +62 prefix as static chip; user types only the trailing digits
/// - Privacy reassurance card
@@ -137,9 +136,21 @@ class _RegisterScreenState extends ConsumerState<RegisterScreen> {
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Padding(
padding: EdgeInsets.only(top: 8, bottom: 8),
child: HaloStepDots(total: 4, current: 3),
Padding(
padding: const EdgeInsets.only(top: 4, bottom: 4),
child: Row(
children: [
_CircleBackButton(
onTap: () {
if (Navigator.of(context).canPop()) {
Navigator.of(context).pop();
} else {
context.go('/home');
}
},
),
],
),
),
Expanded(
child: LayoutBuilder(
@@ -152,6 +163,8 @@ class _RegisterScreenState extends ConsumerState<RegisterScreen> {
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Center(child: _LogoBadge()),
const SizedBox(height: 18),
Text(
'nomor wa-mu, $shownName?',
style: const TextStyle(
@@ -312,6 +325,58 @@ class _PhoneRow extends StatelessWidget {
}
}
class _CircleBackButton extends StatelessWidget {
final VoidCallback onTap;
const _CircleBackButton({required this.onTap});
@override
Widget build(BuildContext context) {
return Material(
color: HaloTokens.brand,
shape: const CircleBorder(),
elevation: 2,
shadowColor: const Color(0x1F000000),
child: InkWell(
customBorder: const CircleBorder(),
onTap: onTap,
child: const SizedBox(
width: 40,
height: 40,
child: Icon(Icons.arrow_back, color: Colors.white, size: 20),
),
),
);
}
}
class _LogoBadge extends StatelessWidget {
const _LogoBadge();
@override
Widget build(BuildContext context) {
return Container(
width: 72,
height: 72,
decoration: BoxDecoration(
color: HaloTokens.brandLogoBg,
borderRadius: BorderRadius.circular(20),
boxShadow: const [
BoxShadow(
color: Color(0x47FF69A0),
blurRadius: 18,
offset: Offset(0, 6),
),
],
),
clipBehavior: Clip.antiAlias,
child: Transform.scale(
scale: 1.4,
child: Image.asset('assets/icons/logo.png', fit: BoxFit.cover),
),
);
}
}
class _PrivacyCard extends StatelessWidget {
const _PrivacyCard();

210
client_app/lib/features/onboarding/onboarding_screen.dart
View File

@@ -1,210 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../../router.dart';
const _kOnboardingDone = 'onboarding_done';
const _kPink = Color(0xFFBE7C8A);
class _OnboardingPage {
final String title;
final String text;
final String image;
const _OnboardingPage({
required this.title,
required this.text,
required this.image,
});
}
const _pages = [
_OnboardingPage(
title: 'Langsung Curhat',
text: 'Tidak perlu form panjang atau janji. Masuk dan langsung ngobrol.',
image: 'assets/images/splash/splash_1.png',
),
_OnboardingPage(
title: '100% Anonim',
text: 'Identitas kamu tidak akan ditampilkan. Cerita dengan tenang, tanpa khawatir.',
image: 'assets/images/splash/splash_2.png',
),
_OnboardingPage(
title: 'Bestie yang Relevan',
text: 'Kamu akan dipasangkan dengan bestie berdasarkan topik & kondisi kamu saat ini.',
image: 'assets/images/splash/splash_3.png',
),
];
class OnboardingScreen extends ConsumerStatefulWidget {
const OnboardingScreen({super.key});
@override
ConsumerState<OnboardingScreen> createState() => _OnboardingScreenState();
}
class _OnboardingScreenState extends ConsumerState<OnboardingScreen> {
final _controller = PageController();
int _currentPage = 0;
@override
void initState() {
super.initState();
// Auto-advance: page 0 → 1 after 500ms
_scheduleAutoAdvance(0);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _scheduleAutoAdvance(int fromPage) {
// Only auto-advance for pages 0 and 1
if (fromPage >= 2) return;
Future.delayed(const Duration(seconds: 1), () {
if (mounted && _currentPage == fromPage) {
_controller.nextPage(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
}
});
}
void _onPageChanged(int index) {
setState(() => _currentPage = index);
_scheduleAutoAdvance(index);
}
Future<void> _finish() async {
final prefs = await SharedPreferences.getInstance();
await prefs.setBool(_kOnboardingDone, true);
ref.invalidate(onboardingDoneProvider);
if (mounted) {
context.go('/home');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Column(
children: [
Expanded(
child: PageView.builder(
controller: _controller,
itemCount: _pages.length,
onPageChanged: _onPageChanged,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
final page = _pages[index];
return _buildPage(page);
},
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
child: Row(
children: [
// Page indicators
Row(
children: List.generate(_pages.length, (index) {
final isActive = index == _currentPage;
return Container(
margin: const EdgeInsets.only(right: 8),
width: isActive ? 32 : 12,
height: 6,
decoration: BoxDecoration(
color: isActive ? _kPink : _kPink.withValues(alpha: 0.3),
borderRadius: BorderRadius.circular(3),
),
);
}),
),
const Spacer(),
// CTA button — only show "Mulai" on last page
if (_currentPage == _pages.length - 1)
GestureDetector(
onTap: _finish,
child: Container(
height: 56,
padding: const EdgeInsets.symmetric(horizontal: 32),
decoration: BoxDecoration(
color: _kPink,
borderRadius: BorderRadius.circular(16),
),
child: const Center(
child: Text(
'Mulai',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
),
],
),
),
);
}
Widget _buildPage(_OnboardingPage page) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
children: [
const Spacer(flex: 1),
// Image
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Image.asset(
page.image,
height: 280,
fit: BoxFit.contain,
),
),
const Spacer(flex: 1),
// Title
Text(
page.title,
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: _kPink,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 16),
// Description
Text(
page.text,
style: TextStyle(
fontSize: 16,
color: Colors.pink.shade300,
height: 1.5,
),
textAlign: TextAlign.center,
),
const Spacer(flex: 1),
],
),
);
}
}
/// Check if onboarding has been completed
Future<bool> isOnboardingDone() async {
final prefs = await SharedPreferences.getInstance();
return prefs.getBool(_kOnboardingDone) ?? false;
}

286
client_app/lib/features/payment/screens/payment_method_screen.dart
View File

@@ -6,11 +6,19 @@ import '../../../core/api/api_client_provider.dart';
import '../../../core/constants.dart';
import '../../../core/theme/halo_tokens.dart';
import '../../../core/theme/widgets/halo_button.dart';
import '../state/payment_catalog_provider.dart';
import '../state/payment_draft_provider.dart';
import '../widgets/payment_icon.dart';
/// "Cara bayar" — QRIS-first list of payment methods. On tap of `bayar`:
/// 1. POST `/api/client/payment-requests` with the draft + chosen method.
/// 2. Push `/payment/waiting/:paymentId`.
/// "Cara bayar" — catalog-driven payment method picker. Methods are grouped
/// into collapsible sections sourced from `paymentCatalogProvider`; the user
/// picks one, then taps `bayar` which:
/// 1. POSTs `/api/client/payment-requests` with the draft + chosen
/// `payment_code`.
/// 2. Pushes `/payment/waiting/:paymentId`.
///
/// First group is expanded by default; the rest are collapsed. Empty groups
/// are hidden by the backend before they reach this screen.
class PaymentMethodScreen extends ConsumerStatefulWidget {
const PaymentMethodScreen({super.key});
@@ -18,33 +26,17 @@ class PaymentMethodScreen extends ConsumerStatefulWidget {
ConsumerState<PaymentMethodScreen> createState() => _PaymentMethodScreenState();
}
enum _PayMethod {
qris('qris', 'QRIS', 'semua e-wallet & m-banking', '🔲', recommended: true),
ovo('ovo', 'OVO', 'saldo OVO', '🟣'),
gopay('gopay', 'GoPay', 'saldo GoPay', '🟢'),
dana('dana', 'DANA', 'saldo DANA', '🔵'),
shopee('shopee', 'ShopeePay', 'saldo ShopeePay', '🟠');
final String id;
final String label;
final String sub;
final String icon;
final bool recommended;
const _PayMethod(
this.id,
this.label,
this.sub,
this.icon, {
this.recommended = false,
});
}
class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
_PayMethod _selected = _PayMethod.qris;
String? _selectedCode;
bool _submitting = false;
String? _error;
/// Track which groups are expanded. Keyed by group id; default-expanded for
/// the first group is applied lazily inside `build` when we first see the
/// catalog (we don't know the group ids until then).
final Set<String> _expandedGroupIds = {};
bool _initialExpansionDone = false;
Future<void> _onPay() async {
if (_submitting) return;
final draft = ref.read(paymentDraftNotifierProvider);
@@ -52,6 +44,10 @@ class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
setState(() => _error = 'Pilih durasi dulu sebelum bayar.');
return;
}
if (_selectedCode == null) {
setState(() => _error = 'Pilih metode pembayaran dulu.');
return;
}
setState(() {
_submitting = true;
_error = null;
@@ -63,15 +59,9 @@ class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
'duration_minutes': draft.durationMinutes,
'price_idr': draft.priceIDR,
'is_first_session_discount': draft.isFirstSessionDiscount,
'method': _selected.id,
// Returning-targeted "Curhat lagi" flow: backend ties the payment
// session to the picked mitra so the eventual chat request can fire
// against the same bestie. Absent on the general-blast path.
if (draft.targetedMitraId != null)
'targeted_mitra_id': draft.targetedMitraId,
'method': _selectedCode,
if (draft.targetedMitraId != null) 'targeted_mitra_id': draft.targetedMitraId,
};
// Trailing slash matches the existing payment_notifier path — Fastify
// is not configured with `ignoreTrailingSlash`.
final response = await api.post('/api/client/payment-requests/', data: body);
final data = response['data'] as Map<String, dynamic>;
final paymentId = data['id'] as String;
@@ -99,21 +89,29 @@ class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
if (status == 422 || code == 'VALIDATION_ERROR' || code == 'INVALID_TIER') {
return 'Pilihan durasi tidak valid.';
}
if (code == 'INVALID_PAYMENT_METHOD') {
return 'Metode pembayaran tidak tersedia.';
}
if (status == 403) return 'Sesi tidak diizinkan.';
if (status == 404) return 'Sesi pembayaran tidak ditemukan.';
return 'Gagal membuat sesi pembayaran.';
}
void _applyInitialExpansion(PaymentCatalog catalog) {
if (_initialExpansionDone || catalog.groups.isEmpty) return;
_expandedGroupIds.add(catalog.groups.first.id);
_initialExpansionDone = true;
}
@override
Widget build(BuildContext context) {
final draft = ref.watch(paymentDraftNotifierProvider);
final catalogAsync = ref.watch(paymentCatalogProvider);
final amount = draft.priceIDR ?? 0;
final durationLabel = draft.durationMinutes != null
? 'sesi ${draft.durationMinutes} menit'
: 'sesi';
final amountLabel = formatRupiah(amount);
final recommended = _PayMethod.values.where((m) => m.recommended).toList();
final others = _PayMethod.values.where((m) => !m.recommended).toList();
return Scaffold(
backgroundColor: HaloTokens.bg,
@@ -143,6 +141,7 @@ class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
),
body: Column(
children: [
// Amount summary card (unchanged from the pre-catalog version).
Padding(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s24,
@@ -188,30 +187,39 @@ class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
),
),
),
// Catalog body — collapsible groups.
Expanded(
child: ListView(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s20,
HaloSpacing.s8,
HaloSpacing.s20,
HaloSpacing.s16,
),
children: [
const _SectionLabel('paling cepat'),
...recommended.map((m) => _MethodTile(
method: m,
selected: _selected == m,
onTap: () => setState(() => _selected = m),
large: true,
)),
const SizedBox(height: HaloSpacing.s8),
const _SectionLabel('e-wallet lain'),
...others.map((m) => _MethodTile(
method: m,
selected: _selected == m,
onTap: () => setState(() => _selected = m),
)),
],
child: catalogAsync.when(
data: (catalog) {
_applyInitialExpansion(catalog);
return ListView(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s20,
HaloSpacing.s8,
HaloSpacing.s20,
HaloSpacing.s16,
),
children: catalog.groups.map((g) {
return _GroupSection(
group: g,
expanded: _expandedGroupIds.contains(g.id),
selectedCode: _selectedCode,
onToggle: () => setState(() {
if (!_expandedGroupIds.add(g.id)) {
_expandedGroupIds.remove(g.id);
}
}),
onSelect: (code) => setState(() {
_selectedCode = code;
_error = null;
}),
);
}).toList(),
);
},
loading: () => const Center(child: CircularProgressIndicator()),
error: (_, __) =>
const Center(child: Text('Gagal memuat metode pembayaran.')),
),
),
if (_error != null)
@@ -256,7 +264,7 @@ class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
label: _submitting ? 'memproses...' : 'bayar $amountLabel',
size: HaloButtonSize.lg,
fullWidth: true,
onPressed: _submitting ? null : _onPay,
onPressed: (_submitting || _selectedCode == null) ? null : _onPay,
),
),
],
@@ -265,38 +273,93 @@ class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
}
}
class _SectionLabel extends StatelessWidget {
final String label;
const _SectionLabel(this.label);
class _GroupSection extends StatelessWidget {
final PaymentMethodGroup group;
final bool expanded;
final String? selectedCode;
final VoidCallback onToggle;
final ValueChanged<String> onSelect;
const _GroupSection({
required this.group,
required this.expanded,
required this.selectedCode,
required this.onToggle,
required this.onSelect,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(4, HaloSpacing.s8, 4, HaloSpacing.s8),
child: Text(
label,
style: const TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: HaloTokens.inkSoft,
letterSpacing: 0.6,
),
padding: const EdgeInsets.only(bottom: HaloSpacing.s12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
InkWell(
onTap: onToggle,
borderRadius: HaloRadius.md,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: HaloSpacing.s8,
horizontal: HaloSpacing.s4,
),
child: Row(
children: [
Expanded(
child: Text(
group.name.toLowerCase(),
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w700,
color: HaloTokens.brandDark,
letterSpacing: 0.4,
),
),
),
AnimatedRotation(
duration: HaloMotion.fast,
turns: expanded ? 0.5 : 0,
child: const Icon(
Icons.keyboard_arrow_down,
color: HaloTokens.brandDark,
size: 20,
),
),
],
),
),
),
AnimatedCrossFade(
duration: HaloMotion.normal,
firstChild: const SizedBox(height: 0),
secondChild: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: group.methods
.map((m) => _MethodTile(
method: m,
selected: selectedCode == m.paymentCode,
onTap: () => onSelect(m.paymentCode),
))
.toList(),
),
crossFadeState:
expanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
),
],
),
);
}
}
class _MethodTile extends StatelessWidget {
final _PayMethod method;
final PaymentMethodEntry method;
final bool selected;
final VoidCallback onTap;
final bool large;
const _MethodTile({
required this.method,
required this.selected,
required this.onTap,
this.large = false,
});
@override
@@ -311,7 +374,7 @@ class _MethodTile extends StatelessWidget {
onTap: onTap,
child: AnimatedContainer(
duration: HaloMotion.fast,
padding: EdgeInsets.all(large ? HaloSpacing.s16 : HaloSpacing.s12),
padding: const EdgeInsets.all(HaloSpacing.s12),
decoration: BoxDecoration(
border: Border.all(
color: selected ? HaloTokens.brand : HaloTokens.border,
@@ -322,69 +385,34 @@ class _MethodTile extends StatelessWidget {
child: Row(
children: [
Container(
width: large ? 40 : 36,
height: large ? 40 : 36,
width: 40,
height: 40,
decoration: BoxDecoration(
color: HaloTokens.surface,
borderRadius: HaloRadius.md,
border: Border.all(color: HaloTokens.border),
),
alignment: Alignment.center,
child: Text(method.icon, style: TextStyle(fontSize: large ? 20 : 18)),
child: PaymentIcon(
slug: method.icon,
size: 22,
color: HaloTokens.brandDark,
),
),
const SizedBox(width: HaloSpacing.s12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
method.label,
style: TextStyle(
fontSize: large ? 14.5 : 13.5,
fontWeight: FontWeight.w600,
color: HaloTokens.ink,
),
),
if (method.recommended) ...[
const SizedBox(width: HaloSpacing.s8),
Container(
padding: const EdgeInsets.symmetric(
horizontal: HaloSpacing.s8,
vertical: 2,
),
decoration: const BoxDecoration(
color: HaloTokens.mint,
borderRadius: HaloRadius.pill,
),
child: const Text(
'DIREKOMENDASIKAN',
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.w700,
color: Color(0xFF1F4D34),
letterSpacing: 0.4,
),
),
),
],
],
),
const SizedBox(height: 2),
Text(
method.sub,
style: TextStyle(
fontSize: large ? 11.5 : 11,
color: HaloTokens.inkSoft,
),
),
],
child: Text(
method.displayName,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: HaloTokens.ink,
),
),
),
Container(
width: large ? 20 : 18,
height: large ? 20 : 18,
width: 20,
height: 20,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
@@ -396,8 +424,8 @@ class _MethodTile extends StatelessWidget {
child: selected
? Center(
child: Container(
width: large ? 8 : 6,
height: large ? 8 : 6,
width: 8,
height: 8,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,

99
client_app/lib/features/payment/state/payment_catalog_provider.dart Normal file
View File

@@ -0,0 +1,99 @@
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/api/api_client_provider.dart';
/// One row in the payment-method catalog (server-side: `payment_methods`).
class PaymentMethodEntry {
final String id;
final String paymentCode;
final String displayName;
final String? icon;
const PaymentMethodEntry({
required this.id,
required this.paymentCode,
required this.displayName,
this.icon,
});
}
/// One group in the payment-method catalog (server-side:
/// `payment_method_groups`). Groups are already filtered + ordered by the
/// backend — render verbatim.
class PaymentMethodGroup {
final String id;
final String name;
final List<PaymentMethodEntry> methods;
const PaymentMethodGroup({
required this.id,
required this.name,
required this.methods,
});
}
class PaymentCatalog {
final List<PaymentMethodGroup> groups;
const PaymentCatalog(this.groups);
/// Whether this came from the hardcoded fallback (catalog endpoint failed).
/// UI uses this to optionally surface a "couldn't load all methods" hint.
final bool isFallback = false;
}
class _FallbackCatalog extends PaymentCatalog {
const _FallbackCatalog() : super(const [_kFallbackGroup]);
@override
bool get isFallback => true;
}
const _kFallbackGroup = PaymentMethodGroup(
id: 'fallback-paling-cepat',
name: 'Paling Cepat',
methods: [
PaymentMethodEntry(
id: 'fallback-qris',
paymentCode: 'QRIS',
displayName: 'QRIS',
icon: 'qris',
),
],
);
const PaymentCatalog kFallbackPaymentCatalog = _FallbackCatalog();
/// App-facing catalog. Calls `GET /api/client/payment-methods`; on 5xx or
/// network error returns [kFallbackPaymentCatalog] so checkout never
/// hard-fails. See `requirement/phase5-payment-catalog-plan.md` §5.
final paymentCatalogProvider = FutureProvider<PaymentCatalog>((ref) async {
final api = ref.read(apiClientProvider);
try {
final res = await api.get('/api/client/payment-methods');
final data = res['data'] as Map<String, dynamic>?;
final raw = data?['groups'] as List<dynamic>? ?? const [];
final groups = raw.map((g) {
final gm = g as Map<String, dynamic>;
final methods = (gm['methods'] as List<dynamic>? ?? const []).map((m) {
final mm = m as Map<String, dynamic>;
return PaymentMethodEntry(
id: mm['id'] as String,
paymentCode: mm['payment_code'] as String,
displayName: mm['display_name'] as String,
icon: mm['icon'] as String?,
);
}).toList(growable: false);
return PaymentMethodGroup(
id: gm['id'] as String,
name: gm['name'] as String,
methods: methods,
);
}).toList(growable: false);
// Defensive empty-catalog guard: if every group ended up empty after
// parsing, fall back so the user always sees at least QRIS.
if (groups.isEmpty || groups.every((g) => g.methods.isEmpty)) {
return kFallbackPaymentCatalog;
}
return PaymentCatalog(groups);
} catch (_) {
return kFallbackPaymentCatalog;
}
});

56
client_app/lib/features/payment/widgets/payment_icon.dart Normal file
View File

@@ -0,0 +1,56 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../../../core/theme/halo_tokens.dart';
/// Slugs we ship SVGs for. Keep this in sync with `assets/payment_icons/`.
/// When a brand mark is added to the bundle (drop the SVG into the asset
/// dir), add its slug here. Anything not in this set renders the placeholder.
///
/// Source: idn-finlogos (github.com/hafidznoor/idn-finlogos) — see
/// `assets/payment_icons/NOTICE_IDN_FINLOGOS.txt` for licensing terms.
const Set<String> _kBundledSlugs = {
'qris',
'ovo',
'dana',
'shopeepay',
'gopay',
'bca',
'mandiri',
'bni',
'bri',
'permata',
};
/// Renders a payment-method brand mark by slug (`payment_methods.icon`).
/// Falls back to a generic credit-card placeholder when the slug isn't
/// bundled. Slugs are kept lower-case by convention.
class PaymentIcon extends StatelessWidget {
final String? slug;
final double size;
final Color color;
const PaymentIcon({
super.key,
required this.slug,
this.size = 24,
this.color = HaloTokens.brandDark,
});
@override
Widget build(BuildContext context) {
final isBundled = slug != null && _kBundledSlugs.contains(slug);
final asset = isBundled
? 'assets/payment_icons/$slug.svg'
: 'assets/payment_icons/placeholder.svg';
// Brand SVGs ship with their canonical colors and must NOT be tinted;
// the placeholder is mono-color and DOES want the brand-dark tint.
return SvgPicture.asset(
asset,
width: size,
height: size,
colorFilter: isBundled ? null : ColorFilter.mode(color, BlendMode.srcIn),
);
}
}

198
client_app/lib/features/splash/splash_screen.dart
View File

@@ -1,16 +1,200 @@
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:ui';
class SplashScreen extends StatelessWidget {
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../core/auth/auth_notifier.dart';
import '../../core/auth/onboarding_intent_provider.dart';
import '../../core/theme/halo_tokens.dart';
/// S1 · Splash — figma-bestie/project/screens/onboarding.jsx
///
/// Self-driving: waits for both a 1s minimum hold AND the auth provider to
/// resolve, then navigates to the appropriate destination. The router's
/// redirect leaves /splash alone — see [router.dart].
class SplashScreen extends ConsumerStatefulWidget {
const SplashScreen({super.key});
@override
ConsumerState<SplashScreen> createState() => _SplashScreenState();
}
class _SplashScreenState extends ConsumerState<SplashScreen> {
bool _holdElapsed = false;
bool _navigated = false;
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted) return;
// 2.5s here because the native Android launch splash covers Flutter for
// ~1-1.5s on cold start. By the time the user actually sees this widget,
// ~1s has already burned — 2.5s leaves a comfortable ~1.2s of visible
// splash before we navigate.
Future.delayed(const Duration(milliseconds: 2500), () {
if (!mounted) return;
setState(() => _holdElapsed = true);
_maybeLeave();
});
});
}
void _maybeLeave() {
if (_navigated || !mounted || !_holdElapsed) return;
final authState = ref.read(authProvider);
if (authState is AsyncLoading) return;
_navigated = true;
final data = authState.valueOrNull;
if (data is AuthNeedsDisplayNameData) {
context.go('/auth/set-name');
} else if (data is AuthForceRegisterData) {
context.go('/auth/force-register');
} else if (data is AuthAuthenticatedData &&
ref.read(onboardingIntentProvider) == OnboardingIntent.onboarding) {
context.go('/payment/entry');
} else {
context.go('/home');
}
}
@override
Widget build(BuildContext context) {
ref.listen(authProvider, (_, __) => _maybeLeave());
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Image.asset(
'assets/images/splash_chat_hebat.png',
width: 200,
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.0, 0.6, 1.0],
colors: [
HaloTokens.brandSofter,
HaloTokens.bg,
HaloTokens.accentSoft,
],
),
),
child: Stack(
children: [
const Positioned(
top: 80,
right: -40,
child: _Orb(
size: 180,
color: HaloTokens.brand,
opacity: 0.31,
blurSigma: 20,
),
),
const Positioned(
bottom: 120,
left: -40,
child: _Orb(
size: 160,
color: HaloTokens.accent,
opacity: 0.38,
blurSigma: 24,
),
),
SafeArea(
child: Padding(
padding: const EdgeInsets.fromLTRB(28, 40, 28, 40),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 96,
height: 96,
decoration: BoxDecoration(
color: HaloTokens.brandLogoBg,
borderRadius: BorderRadius.circular(24),
boxShadow: HaloShadows.soft,
),
clipBehavior: Clip.antiAlias,
// logo.png has ~25% internal whitespace around the
// glyph; scale up so the visible art reaches the edges
// of the tile. The Container clip keeps it inside the
// rounded square.
child: Transform.scale(
scale: 1.4,
child: Image.asset(
'assets/icons/logo.png',
fit: BoxFit.cover,
),
),
),
const SizedBox(height: 28),
const Text(
'HaloBestie',
style: TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 44,
fontWeight: FontWeight.w700,
height: 1.05,
letterSpacing: -1.1,
color: HaloTokens.brandDark,
),
),
const SizedBox(height: 18),
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 280),
child: const Text(
'kamu gak harus ngerasain\nini sendirian.',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 15,
height: 1.5,
color: HaloTokens.inkSoft,
),
),
),
],
),
),
),
),
],
),
),
);
}
}
class _Orb extends StatelessWidget {
const _Orb({
required this.size,
required this.color,
required this.opacity,
required this.blurSigma,
});
final double size;
final Color color;
final double opacity;
final double blurSigma;
@override
Widget build(BuildContext context) {
return IgnorePointer(
child: ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: blurSigma, sigmaY: blurSigma),
child: Container(
width: size,
height: size,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
center: const Alignment(-0.4, -0.4),
radius: 0.7,
colors: [color.withValues(alpha: opacity), color.withValues(alpha: 0)],
),
),
),
),
);

25
client_app/lib/router.dart
View File

@@ -8,7 +8,6 @@ import 'features/auth/screens/register_screen.dart';
import 'features/auth/screens/otp_screen.dart';
import 'features/auth/screens/force_register_screen.dart';
import 'features/auth/screens/set_display_name_screen.dart';
import 'features/onboarding/onboarding_screen.dart';
import 'features/onboarding/screens/notif_gate_screen.dart';
import 'features/onboarding/screens/usp_screen.dart';
import 'features/splash/splash_screen.dart';
@@ -53,9 +52,6 @@ class RouterNotifier extends ChangeNotifier {
}
}
/// Cached onboarding status — loaded once at startup, invalidated after onboarding completes
final onboardingDoneProvider = FutureProvider<bool>((ref) => isOnboardingDone());
final routerProvider = Provider<GoRouter>((ref) => buildRouter(ref));
GoRouter buildRouter(Ref ref) {
@@ -70,7 +66,6 @@ GoRouter buildRouter(Ref ref) {
if (state.matchedLocation == '/_theme_preview') return null;
final authState = ref.read(authProvider);
final isSplash = state.matchedLocation == '/splash';
final isOnboarding = state.matchedLocation == '/onboarding';
final isAuthRoute = state.matchedLocation.startsWith('/auth');
// Phase 4 onboarding flow (Verif Choice → ESP → USP) — must transit
// freely while authState is AuthAnonymousData so the router doesn't
@@ -78,19 +73,14 @@ GoRouter buildRouter(Ref ref) {
final isOnboardingFlow =
state.matchedLocation.startsWith('/onboarding/');
// Show splash only during initial load
if (authState is AsyncLoading) {
if (isSplash || isAuthRoute || isOnboarding) return null;
return '/splash';
}
// SplashScreen is self-driving — it waits for both a 1s minimum hold and
// for `authProvider` to resolve, then navigates explicitly. The router
// must never redirect away from /splash on its own.
if (isSplash) return null;
// Check onboarding status — must complete before anything else
final onboardingDone = ref.read(onboardingDoneProvider).valueOrNull ?? false;
if (!onboardingDone) {
return isOnboarding ? null : '/onboarding';
}
if (isOnboarding) {
return '/home';
if (authState is AsyncLoading) {
if (isAuthRoute) return null;
return '/splash';
}
final data = authState.valueOrNull;
@@ -154,7 +144,6 @@ GoRouter buildRouter(Ref ref) {
if (kThemePreviewEnabled)
GoRoute(path: '/_theme_preview', builder: (_, __) => const ThemePreviewScreen()),
GoRoute(path: '/splash', builder: (_, __) => const SplashScreen()),
GoRoute(path: '/onboarding', builder: (_, __) => const OnboardingScreen()),
GoRoute(path: '/auth/display-name', builder: (_, __) => const DisplayNameScreen()),
GoRoute(path: '/auth/register', builder: (_, __) => const RegisterScreen()),
GoRoute(path: '/auth/otp', builder: (context, state) => OtpScreen(phone: state.extra as String)),

40
client_app/pubspec.lock
View File

@@ -470,6 +470,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "3.1.2"
flutter_svg:
dependency: "direct main"
description:
name: flutter_svg
sha256: "35882981abcbfb8c15b286f0cd690ff25bac12d95eff3e25ee207f37d4c42e7f"
url: "https://pub.dev"
source: hosted
version: "2.3.0"
flutter_test:
dependency: "direct dev"
description: flutter
@@ -775,6 +783,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "1.9.1"
path_parsing:
dependency: transitive
description:
name: path_parsing
sha256: "883402936929eac138ee0a45da5b0f2c80f89913e6dc3bf77eb65b84b409c6ca"
url: "https://pub.dev"
source: hosted
version: "1.1.0"
path_provider:
dependency: transitive
description:
@@ -1268,6 +1284,30 @@ packages:
url: "https://pub.dev"
source: hosted
version: "4.5.3"
vector_graphics:
dependency: transitive
description:
name: vector_graphics
sha256: "2306c03da2ba81724afeb589c351ebbc0aa7d86005925be8f8735856dbe5e42d"
url: "https://pub.dev"
source: hosted
version: "1.2.2"
vector_graphics_codec:
dependency: transitive
description:
name: vector_graphics_codec
sha256: "99fd9fbd34d9f9a32efd7b6a6aae14125d8237b10403b422a6a6dfeac2806146"
url: "https://pub.dev"
source: hosted
version: "1.1.13"
vector_graphics_compiler:
dependency: transitive
description:
name: vector_graphics_compiler
sha256: b9b3f391857781aa96acacef96066f2f49b4cd03cf9fce3ca4d8da2ef5ea129e
url: "https://pub.dev"
source: hosted
version: "1.2.3"
vector_math:
dependency: transitive
description:

10
client_app/pubspec.yaml
View File

@@ -42,6 +42,13 @@ dependencies:
# (mock mode encodes payment_session_id; real QR will come from Xendit later).
qr_flutter: ^4.1.0
# Payment method icons (Phase 5.x catalog) — bundled SVGs under
# assets/payment_icons/, copied from github.com/hafidznoor/idn-finlogos.
# Xendit's per-channel media-asset pages were planned but found
# decommissioned during implementation. See
# `requirement/phase5-payment-catalog-plan.md` §7 for the sourcing decision.
flutter_svg: ^2.0.10+1
# OS notification permission — used by the post-payment notif gate
# (Phase 4 Stage 4) and the home banner.
permission_handler: ^11.3.1
@@ -85,7 +92,8 @@ flutter:
uses-material-design: true
assets:
- assets/images/
- assets/images/splash/
- assets/icons/
- assets/payment_icons/
- assets/fonts/
fonts: