polish polish polish

taepras · Jun 12, 2021 · 170f670 · 170f670
1 parent 3569f1d
commit 170f670
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 63 deletions.
diff --git a/public/index.html b/public/index.html
@@ -48,15 +48,15 @@
   <meta property="og:title" content="เข้าใจภาษีแบบ &ldquo;เห็นภาพ&rdquo;">
   <meta property="og:description" content="คำนวณภาษียากจัง!? มาลองคิดภาษีแบบคร่าวๆ สไตล์มือใหม่หัดทำภาษี ผ่าน data visualization กัน!">
   <meta property="og:image"
-    content="%PUBLIC_URL%/ogimage.png">
+    content="https://taepras.github.io/howtotax/ogimage.png">
 
   <!-- Twitter -->
   <meta property="twitter:card" content="summary_large_image">
   <meta property="twitter:url" content="https://taepras.github.io/howtotax">
   <meta property="twitter:title" content="เข้าใจภาษีแบบ &ldquo;เห็นภาพ&rdquo;">
   <meta property="twitter:description" content="คำนวณภาษียากจัง!? มาลองคิดภาษีแบบคร่าวๆ สไตล์มือใหม่หัดทำภาษี ผ่าน data visualization กัน!">
   <meta property="twitter:image"
-    content="%PUBLIC_URL%/ogimage.png">
+    content="https://taepras.github.io/howtotax/ogimage.png">
 </head>
 
 <body>

diff --git a/src/App.jsx b/src/App.jsx
@@ -58,11 +58,17 @@ const ContentContainer = styled.div`
   transition: min-height 0.3s;
 
   @media (min-width: 480px) {
-    min-height: ${(props) => (props.taller ? '440px' : '240px')};
+    min-height: ${(props) => (props.taller ? '460px' : '240px')};
     flex-grow: 0;
   }
 `;
 
+const VisibleNonMobile = styled.span`
+  @media (min-width: 480px) {
+    display: none;
+  }
+`;
+
 const PageContainer = styled.div`
   padding: 30px;
   /* padding-top: 15px; */
@@ -308,7 +314,7 @@ function App() {
   const narrativeSteps = [
     <>
       <p style={{ textAlign: 'center' }}>
-        หลายคนอาจจะเคยเห็นตาราง
+        เราอาจจะเคยเห็นตาราง
         <br />
         <Pill color="taxText">อัตราภาษีเงินได้บุคคลธรรมดา</Pill>
         {' '}
@@ -322,19 +328,18 @@ function App() {
 
     <>
       <p style={{ textAlign: 'center' }}>
-        ถ้าเราเอาตารางอัตราภาษีที่ว่ามาพล็อตระหว่าง
+        ถ้าเราเอาตารางอัตราภาษีนั้นมาพล็อตระหว่าง
         <br />
         <Pill color="incomeText">เงินได้สุทธิ</Pill>
         {' '}
         และ
         {' '}
         <Pill color="taxText">อัตราภาษี</Pill>
+        {' '}
+        ก็จะได้กราฟแบบนี้
       </p>
       <p style={{ textAlign: 'center' }}>
-        ก็จะได้กราฟหน้าตาเป็น &ldquo;ขั้นบันได&rdquo; แบบนี้
-        <br />
-        {' '}
-        ไล่ไปตั้งแต่เงินได้สุทธิบาทแรก (ภาษี 0%)
+        ไล่ตั้งแต่เงินได้สุทธิบาทแรก (ภาษี 0%)
         {' '}
         <br />
         ไปถึงบาทที่ 5,000,000 ขึ้นไป (ภาษี 35%)
@@ -520,12 +525,19 @@ function App() {
 
     <>
       <p style={{ textAlign: 'center' }}>
+        หลังคิด
+        <Pill color="incomeText">รายได้</Pill>
+        แล้ว ก็นำมาหัก
+        <Pill color="expenseText">ค่าใช้จ่าย</Pill>
+      </p>
+      <p style={{ textAlign: 'center' }}>
+        โดยที่
+        {' '}
         <Pill color="expenseText">ค่าใช้จ่าย</Pill>
-        ที่หักได้ คิดจาก
+        ที่หักได้ คิดแยกตาม
         <Pill color="incomeText">รายได้</Pill>
-        แต่ละประเภท
         <br />
-        ซึ่งตามภาษาภาษีแล้ว...
+        แต่ละประเภท ซึ่งตามภาษาภาษีแล้ว...
       </p>
       <p
         style={{
@@ -535,12 +547,12 @@ function App() {
           marginBottom: 0,
         }}
       >
-        <span style={{ textAlign: 'right' }}>เงินเดือน</span>
-        <span>นับเป็น &ldquo;เงินได้ประเภทที่ 1&rdquo;</span>
-        <span style={{ textAlign: 'right' }}>เงินจากฟรีแลนซ์</span>
-        <span>นับเป็น &ldquo;เงินได้ประเภทที่ 2&rdquo;</span>
-        <span style={{ textAlign: 'right' }}>เงินจากขายของ</span>
-        <span>นับเป็น &ldquo;เงินได้ประเภทที่ 8&rdquo;</span>
+        <small style={{ textAlign: 'right' }}>เงินเดือน</small>
+        <small>นับเป็น &ldquo;เงินได้ประเภทที่ 1&rdquo;</small>
+        <small style={{ textAlign: 'right' }}>เงินจากฟรีแลนซ์</small>
+        <small>นับเป็น &ldquo;เงินได้ประเภทที่ 2&rdquo;</small>
+        <small style={{ textAlign: 'right' }}>เงินจากขายของ</small>
+        <small>นับเป็น &ldquo;เงินได้ประเภทที่ 8&rdquo;</small>
       </p>
       {/* <p style={{ textAlign: "center", color: theme.colors.textMuted }}>
         *ตามประมวลรัษฎากร มาตรา 40
@@ -605,13 +617,21 @@ function App() {
 
     <>
       <p style={{ textAlign: 'center', marginBottom: 0 }}>
-        ดังนั้น คุณจะหักค่าใช้จ่ายได้รวม
+        ดังนั้นก็จะหักค่าใช้จ่ายได้รวม
         <br />
         <b style={{ color: theme.colors.expenseText }}>
           <Pill color="expenseText" bold>{Math.round(expense).toLocaleString()}</Pill>
         </b>
         {' '}
         บาท
+        {' '}
+        เหลือเป็นเงินได้หลัง
+        <br />
+        หักค่าใช้จ่าย
+        {' '}
+        <Pill color="incomeText" bold>{expense.toLocaleString()}</Pill>
+        {' '}
+        บาท
       </p>
       <NetIncomeEquation
         income={income}
@@ -623,29 +643,34 @@ function App() {
 
     <>
       <p style={{ textAlign: 'center' }}>
-        นอกจาก
+        และนอกจาก
         <Pill color="expenseText">ค่าใช้จ่าย</Pill>
-        แล้ว ทุกคน
+        แล้ว
         <br />
-        สามารถหัก &ldquo;ค่าลดหย่อนส่วนตัว&rdquo;
+        ก็ยังสามารถหัก
+        <Pill color="allowanceText">ค่าลดหย่อน</Pill>
+        {' '}
+        ได้อีก
+      </p>
+      <p style={{ textAlign: 'center' }}>
+        ซึ่งทุกคนสามารถหัก &ldquo;ค่าลดหย่อนส่วนตัว&rdquo;
         <br />
-        ได้ทันทีอีก
+        ได้ทันที
         {' '}
         <Pill color="allowanceText" bold>60,000</Pill>
         {' '}
         บาท!
       </p>
-      <p style={{ textAlign: 'center', marginBottom: 0 }}>
-        และ
-        <Pill color="allowanceText">ค่าลดหย่อน</Pill>
-        ก็มาจากสิ่งอื่นๆ ได้อีก
-        <br />
-        เช่น การบริจาคเงิน ค่าเบี้ยประกันต่างๆ ฯลฯ
-      </p>
     </>,
 
     <>
-      {/* <p>ลดหย่อนส่วนตัวได้ 60,000 บาท</p> */}
+      <p style={{ textAlign: 'center' }}>
+        นอกจากนั้น
+        ก็ยัง
+        <Pill color="allowanceText">ลดหย่อน</Pill>
+        จากอย่างอื่นได้อีก
+        เช่น การบริจาคเงิน ค่าเบี้ยประกันต่างๆ ฯลฯ
+      </p>
       <ControlsContainer>
         <div style={{ display: 'flex' }}>
           <label style={{ flexGrow: 1 }}>ค่าลดหย่อน</label>
@@ -667,9 +692,9 @@ function App() {
           color={theme.colors.allowance}
         />
       </ControlsContainer>
-      <small style={{ marginLeft: 'auto', color: theme.colors.textMuted }}>
+      {/* <small style={{ marginLeft: 'auto', color: theme.colors.textMuted }}>
         ลดหย่อนส่วนตัวได้ 60,000 บาท
-      </small>
+      </small> */}
       <NetIncomeEquation
         income={income}
         expense={expense}
@@ -680,8 +705,17 @@ function App() {
 
     <>
       <p style={{ textAlign: 'center', marginBottom: 0 }}>
-        ดังนั้นเงินได้สุทธิของคุณคือ
+        ดังนั้น เมื่อคิดจาก
         <br />
+        <Pill color="incomeText">รายได้</Pill>
+        {' '}
+        <Pill color="expenseText">ค่าใช้จ่าย</Pill>
+        {' '}
+        <Pill color="allowanceText">และค่าลดหย่อน</Pill>
+        ของคุณ
+        <br />
+        เงินได้สุทธิของคุณก็คือ
+        {' '}
         <Pill color="incomeText" bold>
           {Math.round(netIncome).toLocaleString()}
         </Pill>
@@ -702,15 +736,19 @@ function App() {
     </>,
 
     <>
-      <p style={{ textAlign: 'center', marginBottom: 0 }}>
+      <p style={{ textAlign: 'center' }}>
         เมื่อคำนวณ
         <Pill color="incomeText">เงินได้สุทธิ</Pill>
         ได้แล้ว
         <br />
-        จะต้องนำตัวเลขที่ได้ไปเข้า
-        <Pill color="taxText">ขั้นบันไดภาษี</Pill>
+        ก็กลับมาดูว่าเงินได้สุทธิของเราล้ำเข้าไป
         <br />
-        เพื่อคำนวณภาษีที่จะต้องจ่าย
+        ในกล่อง
+        <Pill color="taxText">ขั้นบันไดภาษี</Pill>
+        ทางซ้ายแค่ไหน
+      </p>
+      <p style={{ textAlign: 'center' }}>
+        ส่วนที่ล้ำเข้าไปก็คือภาษีที่จะต้องจ่าย
       </p>
     </>,
 
@@ -726,7 +764,7 @@ function App() {
         {' '}
         บาท
         <br />
-        หรือเป็นประมาณ
+        หรือประมาณ
         {' '}
         <Pill color="taxText" bold>
           {((taxFinal / income) * 100).toFixed(1)}
@@ -770,8 +808,14 @@ function App() {
       }}
     >
       <ScrollInstruction visible={showDragInstruction} />
-      <p style={{ marginBottom: '0.5rem' }}>
-        <b>ลองปรับตัวเลขดู</b>
+      <p style={{ textAlign: 'center' }}>
+        ลองปรับตัวเลขคร่าวๆ ให้ตรงกับข้อมูลของคุณ
+        <VisibleNonMobile>
+          <br />
+          (เลื่อนขึ้นเพื่อดูข้อมูลช่องอื่นๆ)
+        </VisibleNonMobile>
+        <br />
+        <small style={{ color: theme.colors.textSecondary }}>* เว็บไซต์นี้ไม่มีการเก็บข้อมูลตัวเลขที่คุณกรอก</small>
       </p>
       <div
         style={{
@@ -988,7 +1032,6 @@ function App() {
   ];
 
   useEffect(() => {
-    console.log(currentNarrativeStep);
     setEnableIncome(currentNarrativeStep >= 4);
     setEnableIncomeExtra(currentNarrativeStep >= 5);
     setEnableExpense(currentNarrativeStep >= 7);
@@ -997,7 +1040,7 @@ function App() {
     setTimeout(() => setEnableAllowance(currentNarrativeStep >= 9), 800);
     setShowBrackets(currentNarrativeStep >= 12 || currentNarrativeStep <= 3);
     setActivateTax(currentNarrativeStep >= 13 || currentNarrativeStep === 2 || currentNarrativeStep === 3);
-    // setShowFullScale(currentNarrativeStep === 1 || currentNarrativeStep === 2);
+    setTimeout(() => setShowFullScale(currentNarrativeStep >= 1 && currentNarrativeStep <= 3), 800);
   }, [currentNarrativeStep, enableAllowance, income, expense]);
 
   return (
@@ -1052,7 +1095,7 @@ function App() {
             }}
             forceBlinkTax={currentNarrativeStep === 2 || currentNarrativeStep === 3}
             isFocusIncome={currentNarrativeStep >= 11}
-            showFullScale={currentNarrativeStep <= 3}
+            showFullScale={showFullScale}
             // slowTransition={currentNarrativeStep <= 4}
           />
           <TaxTableDisplay show={currentNarrativeStep <= 0}>

diff --git a/src/components/D3Component.jsx b/src/components/D3Component.jsx
@@ -271,12 +271,12 @@ export const D3Component = ({
               <g className="axis axis-tax-rate" />
               <g transform={`translate(${0},${height / 2}) rotate(90)`}>
                 <text fill={theme.colors.text} fontSize={14} textAnchor="middle" dominantBaseline="baseline" y={-48}>
-                  เงินได้
+                  เงินได้ →
                 </text>
               </g>
               <g transform={`translate(${barWidth / 2},${0})`}>
                 <text fill={theme.colors.text} fontSize={14} textAnchor="middle" dominantBaseline="hanging" y={24} opacity={showBrackets ? 1 : 0}>
-                  อัตราภาษี
+                  อัตราภาษี →
                 </text>
               </g>
 

diff --git a/src/components/TaxBracketDisplay.jsx b/src/components/TaxBracketDisplay.jsx
@@ -100,7 +100,7 @@ export const TaxBracketDisplay = ({
         .attr('x2', barWidth)
         .style('stroke', theme.colors.tax)
         .style('stroke-width', 2)
-        // .style('stroke-dasharray', '5, 3')
+        .style('stroke-dasharray', '5, 3')
         .transition()
         .duration(transitionDuration)
       // .style('stroke-opacity', '0.4')

diff --git a/src/pages/CoverPage.jsx b/src/pages/CoverPage.jsx
@@ -53,9 +53,9 @@ const CoverPage = ({ currentNarrativeStep, setCurrentNarrativeStep }) => (
         แบบเห็นภาพ
       </h1>
       <p>
-        คำนวณภาษียากจัง!? มาลองคิดภาษี
+        ภาษีคิดมายังไง? คำนวณภาษียากจัง?
         <br />
-        แบบคร่าวๆ สไตล์มือใหม่หัดทำภาษี
+        มาลองคิดภาษีแบบ &ldquo;เห็นภาพ&rdquo;
         <br />
         ผ่าน data visualization กัน!
       </p>

diff --git a/src/pages/EndingPage.jsx b/src/pages/EndingPage.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { theme } from '../theme';
 import Button from '../components/Button';
 import Step from '../components/Step';
+import Pill from '../components/Pill';
 
 const EndingPage = ({ currentNarrativeStep, setCurrentNarrativeStep, narrativeStepsCount }) => (
   <Step
@@ -13,27 +14,35 @@ const EndingPage = ({ currentNarrativeStep, setCurrentNarrativeStep, narrativeSt
       backgroundColor: theme.colors.bg,
       zIndex: 100,
       top: 30,
-      padding: 50,
-      paddingTop: 30,
+      padding: 30,
+      paddingTop: 50,
       textAlign: 'center',
     }}
   >
     <p>
-      เรื่องราวเกี่ยวกับภาษียังมีรายละเอียด
+      และนี่คือการคำนวณ
       <br />
-      กว่านี้อีกมาก สามารถอ่านเพิ่มเติมได้ที่
+      <Pill color="taxText">ภาษีเงินได้บุคคลธรรมดา</Pill>
+      เบื้องต้น
+      <br />
+      {/* <small style={{ color: theme.colors.textSecondary }}>(อ้างอิงข้อมูลปีภาษี 2563)</small>
+    </p>
+    <p> */}
+      หากสนใจเรื่องการคำนวณภาษี
+      <br />
+      อย่างละเอียด สามารถอ่านได้จาก
       <br />
-      เว็บไซต์
       {' '}
-      <a href="https://www.rd.go.th/548.html">กรมสรรพากร</a>
+      <a href="https://www.rd.go.th/548.html" target="_blank" rel="noreferrer">กรมสรรพากร</a>
       {' '}
-      <br />
-      หรือแหล่งข้อมูลเกี่ยวกับภาษีอื่นๆ
+      หรือ
+      {' '}
+      <a href="https://www.google.com/search?q=%E0%B8%84%E0%B8%B3%E0%B8%99%E0%B8%A7%E0%B8%93%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B5" title="Google: 'คำนวณภาษี'" target="_blank" rel="noreferrer">แหล่งข้อมูลอื่นๆ</a>
     </p>
     <p>
       แต่ถ้าชอบ visualization นี้
       <br />
-      แชร์ให้เพื่อนดูต่อได้เลย
+      ก็อย่าลืมแชร์ต่อให้เพื่อนได้เลย!
     </p>
     <div style={{ display: 'flex', gap: '10px' }}>
       <div
@@ -106,6 +115,8 @@ const EndingPage = ({ currentNarrativeStep, setCurrentNarrativeStep, narrativeSt
       <a
         href="https://taepras.com"
         style={{ color: theme.colors.textSecondary }}
+        target="_blank"
+        rel="noreferrer"
       >
         <img src={`${process.env.PUBLIC_URL}/logo_initials.svg`} alt="tp_" style={{ width: 64 }} />
         <br />