From a0c70bb02e667242d9178bf788b94ec34ced9e3b Mon Sep 17 00:00:00 2001 From: fadilkun45 Date: Thu, 24 Sep 2026 10:25:15 +0700 Subject: [PATCH] feat: penambahan page pricing waba --- public/image/perubahan-pricing/bot-icon.svg | 5 + .../perubahan-pricing/free-monthly-tier.svg | 17 ++ .../perubahan-pricing/service-message.svg | 24 +++ public/style/globals.css | 40 +++- src/app/perubahan-pricing-waba/faq.tsx | 48 +++++ src/app/perubahan-pricing-waba/layout.tsx | 26 +++ src/app/perubahan-pricing-waba/page.tsx | 198 ++++++++++++++++++ src/app/perubahan-pricing-waba/title.tsx | 12 ++ 8 files changed, 366 insertions(+), 4 deletions(-) create mode 100644 public/image/perubahan-pricing/bot-icon.svg create mode 100644 public/image/perubahan-pricing/free-monthly-tier.svg create mode 100644 public/image/perubahan-pricing/service-message.svg create mode 100644 src/app/perubahan-pricing-waba/faq.tsx create mode 100644 src/app/perubahan-pricing-waba/layout.tsx create mode 100644 src/app/perubahan-pricing-waba/page.tsx create mode 100644 src/app/perubahan-pricing-waba/title.tsx diff --git a/public/image/perubahan-pricing/bot-icon.svg b/public/image/perubahan-pricing/bot-icon.svg new file mode 100644 index 0000000..f6dc70e --- /dev/null +++ b/public/image/perubahan-pricing/bot-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/image/perubahan-pricing/free-monthly-tier.svg b/public/image/perubahan-pricing/free-monthly-tier.svg new file mode 100644 index 0000000..f44a33b --- /dev/null +++ b/public/image/perubahan-pricing/free-monthly-tier.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/image/perubahan-pricing/service-message.svg b/public/image/perubahan-pricing/service-message.svg new file mode 100644 index 0000000..c6f565c --- /dev/null +++ b/public/image/perubahan-pricing/service-message.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/style/globals.css b/public/style/globals.css index c3e9533..cfdda06 100644 --- a/public/style/globals.css +++ b/public/style/globals.css @@ -2,14 +2,25 @@ @theme { --color-secondary-400: #f7a01f; - --color-title: #020618; - --color-subtitle: #45556c; - --color-body: #62748e; + --color-secondary-100: #feecc7; + --color-secondary-200: #fcd78b; + --color-secondary-hover: #f3810d; + --color-primary-800: #2852a3; --color-primary-600: #337add; --color-primary-100: #deedfb; + --color-primary-200: #c4e1f9; + --color-primary-50: #f0f7fe; + --color-primary-surface: #f0f7fe; + --color-primary-hover: #264781; + --color-primary-default: #2953a4; + + --color-title: #020618; + --color-subtitle: #45556c; + --color-body: #62748e; --color-border: #e2e8f0; --color-subtle: #f1f5f9; + --color-surface: #f8fafc; } :root { @@ -20,11 +31,32 @@ body { font-family: var(--font-open-sauce-one); } +html { + scroll-behavior: smooth; +} + ul { list-style-type: disc; - list-style-position: inside; + list-style-position: outside; + padding-left: 16px; +} + +table { + border-collapse: separate; + border-spacing: 0; + border: 1px solid #e2e8f0; + border-radius: 12px; + overflow: hidden; +} + +td { + padding: 12px; } .primary-button { @apply bg-white p-2 flex gap-3 items-center justify-center text-title font-semibold w-fit cursor-pointer; } + +.card { + @apply rounded-xl border bg-white border-border flex; +} diff --git a/src/app/perubahan-pricing-waba/faq.tsx b/src/app/perubahan-pricing-waba/faq.tsx new file mode 100644 index 0000000..4b7f01f --- /dev/null +++ b/src/app/perubahan-pricing-waba/faq.tsx @@ -0,0 +1,48 @@ +"use client"; + +import { useState } from "react"; +import TitleComponent from "./title"; +import { CaretDownIcon, QuestionIcon } from "@phosphor-icons/react"; + +export default function FAQ() { + const [openFaq, setOpenFaq] = useState(-1); + + const listFaq = [ + { + question: "Apakah semua pesan akan dikenakan biaya mulai 1 Oktober 2026?", + answer: "Tidak. Perubahan ini membuat Service Message menjadi berbayar setelah free tier terpakai. Template Message tetap mengikuti pricing berdasarkan kategorinya.", + }, + { question: "Apakah pesan dari pelanggan ikut dihitung?", answer: "Tidak. Perhitungan Service Message berlaku untuk pesan dari bisnis kepada pelanggan yang berhasil delivered." }, + { question: "Apakah pesan yang gagal delivered dikenakan biaya?", answer: "Tidak. Charging Meta dilakukan berdasarkan pesan yang berhasil delivered." }, + { + question: "Jika memiliki beberapa nomor WhatsApp, apakah masing-masing mendapat 1.000 pesan gratis?", + answer: "Ya. Free tier mengikuti business phone number. Setiap nomor WhatsApp Business Platform mendapatkan kuota 1.000 Service Message gratis per bulan secara terpisah.", + }, + { + question: "Apakah M-OMNIX akan menerapkan free tier ini?", + answer: "Ya. M-OMNIX akan mengikuti ketentuan pricing dan billing yang diberlakukan oleh Meta, termasuk free tier 1.000 Service Message per business phone number per bulan.", + }, + ]; + + return ( +
+ +
+ {listFaq.map((item, index) => ( +
+
(openFaq === index ? setOpenFaq(-1) : setOpenFaq(index))}> +
+

{item.question}

+
+ +
+
+
{item.answer}
+
+ {index !== listFaq.length - 1 &&
} +
+ ))} +
+
+ ); +} diff --git a/src/app/perubahan-pricing-waba/layout.tsx b/src/app/perubahan-pricing-waba/layout.tsx new file mode 100644 index 0000000..d657634 --- /dev/null +++ b/src/app/perubahan-pricing-waba/layout.tsx @@ -0,0 +1,26 @@ +import { Metadata } from "next"; +import "@/style/globals.css"; +import Logo from "@/image/Logo.svg"; +import Image from "next/image"; + +export const metadata: Metadata = { + title: "Mulia Informasi Teknologi", + description: "Build Fast, Scale Smart", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + +
+ logo +
+
{children}
+ + + ); +} diff --git a/src/app/perubahan-pricing-waba/page.tsx b/src/app/perubahan-pricing-waba/page.tsx new file mode 100644 index 0000000..992405b --- /dev/null +++ b/src/app/perubahan-pricing-waba/page.tsx @@ -0,0 +1,198 @@ +import { ChatDotsIcon, GiftIcon, LightningIcon, MegaphoneSimpleIcon, ShieldCheckIcon, UserCircleCheckIcon } from "@phosphor-icons/react/dist/ssr"; +import ServiceMessage from "@/image/perubahan-pricing/service-message.svg"; +import FreeMonthTier from "@/image/perubahan-pricing/free-monthly-tier.svg"; +import botIcon from "@/image/perubahan-pricing/bot-icon.svg"; +import Image from "next/image"; +import TitleComponent from "./title"; +import FAQ from "./faq"; + +export default function ChangePricing() { + const listPerubahan = [ + { image: ServiceMessage, title: "Service Message", caption: "Berbayar per pesan yang berhasil delivered." }, + { image: FreeMonthTier, title: "Free Monthly Tier", caption: "1.000 pesan gratis setiap bulan per nomor." }, + ]; + + const listServiceMessage = [ + "Service Message akan dikenakan biaya per pesan yang berhasil delivered.", + "Pesan yang dikirim pelanggan kepada bisnis tidak dikenakan biaya Service Message.", + "Rate Service Message akan mengikuti rate Utility dan Authentication berdasarkan market/country tujuan pesan.", + ]; + + const chatBot = ["Pesanan Anda sudah kami proses.", "Saat ini pesanan sedang dalam pengiriman."]; + + const freeTier = [ + "Berlaku per business phone number.", + "Reset setiap bulan.", + "Sisa kuota tidak dapat dipindahkan ke bulan berikutnya.", + "Hanya berlaku untuk Service Message.", + "Tidak berlaku untuk Marketing, Utility, atau Authentication Template Message.", + ]; + + const column = [ + { nomor: "Nomor A", fee: "1.000/Bulan" }, + { nomor: "Nomor B", fee: "1.000/Bulan" }, + { nomor: "Nomor C", fee: "1.000/Bulan" }, + { nomor: "Nomor D", fee: "1.000/Bulan" }, + ]; + + const customerService = [ + { title: "Senin, 09.00", caption: "Pelanggan mengirim pesan → window aktif sampai Selasa, 09.00." }, + { title: "Senin, 14.00", caption: "Pelanggan mengirim pesan lagi → periode 24 jam dimulai kembali, window aktif sampai Selasa, 14.00." }, + ]; + + return ( +
+
+
+
+ +

Kebijakan Baru Meta

+
+
Berlaku mulai 1 Oktober 2026
+
+
+

Perubahan Pricing WhatsApp Business Platform

+

+ Mulai 1 Oktober 2026, Meta akan mengenakan biaya per pesan untuk Service Message dan memperkenalkan free tier sebanyak{" "} + 1.000 Service Message per bulan untuk setiap business phone number. +

+
+
+ +
+ {listPerubahan?.map((item) => ( +
+ image-perubahan +
+

{item.title}

+

{item.caption}

+
+
+ ))} +
+ +
+ +

+ Service Message adalah pesan non-template yang dikirim oleh bisnis kepada pelanggan selama customer service window 24 jam masih + aktif. +

+
+

Mulai 1 Oktober 2026:

+
+
    + {listServiceMessage.map((item: string) => ( +
  • {item}
    • + ))} +
+
+
+
+
+
+
AD
+
+

Halo, saya ingin menanyakan status pesanan.

+

20:00

+
+
+ {chatBot.map((item: string) => ( +
+
+

{item}

+

20:00

+
+
+ bot-icon +
+
+ ))} +
+

Pada contoh di atas, bisnis mengirimkan 2 Service Message.

+
+
+ +
+ +

+ Setiap business phone number akan mendapatkan 1.000 Service Message gratis setiap bulan. Meta hanya akan mengenakan biaya mulai + dari Service Message ke-1.001 yang berhasil delivered. +

+
+

Ketentuan free tier

+
    + {freeTier.map((item: string) => ( +
  • {item}
    • + ))} +
+
+
+ + + + + + + {column.map((item) => ( + + + + + ))} + +
Nomor WhatsAppFree Service Message
{item.nomor}{item.fee}
+

Masing-masing business phone number mendapatkan kuota gratisnya sendiri. Free tier dihitung berdasarkan business phone number, bukan Business Portfolio atau WABA.

+
+
+ +
+ +

+ Tidak ada perubahan pada ketentuan customer service window. Window berlaku selama 24 jam sejak pesan terakhir pelanggan. Setiap kali pelanggan mengirimkan pesan baru, periode 24 + jam akan dimulai kembali dari pesan tersebut. +

+
+ {customerService.map((item, index) => ( +
+
+

{item.title}

+

{item.caption}

+
+ {index === 0 &&
} +
+ ))} +
+
+ +
+
+ +

+ Mulai 1 Oktober 2026, Utility Template Message yang dikirim selama customer service window 24 jam juga akan dikenakan biaya sesuai{" "} + rate Utility yang berlaku. Free tier 1.000 Service Message tidak berlaku untuk Utility Template Message. +

+
+ +
+ +

Tidak terdapat perubahan pada mekanisme charging utama untuk Marketing dan Authentication Template Message. Keduanya tetap dikenakan biaya sesuai kategori dan market/country tujuan pesan.

+
+
+ +
+ +

+ Tidak ada perubahan pada mekanisme Free Entry Point. Ketika pelanggan mengirimkan pesan ke bisnis melalui Click-to-WhatsApp Ads atau Facebook Page call-to-action button, pesan bisnis dapat memperoleh periode bebas biaya selama 3 + hari (72 jam) sesuai ketentuan Meta. +

+

+ Free Entry Point berbeda dengan customer service window. Customer service window menentukan kapan bisnis dapat mengirim pesan non-template, sedangkan Free Entry Point berkaitan dengan periode pesan yang tidak dikenakan biaya Meta. +

+
+ + + +
M-OMNIX · Informasi WhatsApp Business Platform
+
+ ); +} diff --git a/src/app/perubahan-pricing-waba/title.tsx b/src/app/perubahan-pricing-waba/title.tsx new file mode 100644 index 0000000..91dd611 --- /dev/null +++ b/src/app/perubahan-pricing-waba/title.tsx @@ -0,0 +1,12 @@ +import { type Icon } from "@phosphor-icons/react"; + +export default function TitleComponent({ title, icon: Icon }: { title: string; icon: Icon }) { + return ( +
+
+ +
+

{title}

+
+ ); +}